Color Mixer

使い方

1. 下地として色 A、ブレンドする色として色 Bを設定します。どちらの欄も #abc、#aabbcc、rgb(12, 34, 56)、hsl(210 50% 40%) を受け付け、カラーピッカーは入力テキストと同期します。
2. ブレンドモードを選びます。ノーマル・乗算・スクリーン・オーバーレイ・差の絶対値から選択でき、各モードは RGB 値をチャンネルごとに計算します。
3. ブレンド比率を動かします。0% なら混合していない色 A、100% なら完全に混合した結果で、その間は補間されます。
4. スウォッチで結果を確認し、HEX・RGB・HSL の値、または CSS ブロック全体をコピーします。入れ替えを使えば 2 色を入れ替えて再入力の手間を省けます。

よくある用途

• ホバー・押下状態を作る —— 2 つ目のカラーコードを手で推測する代わりに、乗算を低い比率で使ってブランドカラーを暗くする。
• 色付き背景とのコントラストを確認する —— 下地とオーバーレイを混ぜ、その結果と文字色を比較する。
• グラデーションの中間色を決める —— 両端を指定して 50% の値を使う。
• 表記を変換する —— 1 つの表記で入力し、同じ色を別の表記で読み取る。

よくある質問

Q: データはアップロードされますか？ A: いいえ。色の計算はすべてブラウザ内で行われます。貼り付けたブランドパレットやデザイントークンが端末の外に出ることはありません。

Q: デザインツールの表示と結果が違うのはなぜ？ A: ここではブレンドモードを sRGB のチャンネル値で直接計算しており、カラーマネジメントやアルファ合成は行いません。別の色空間で処理するツールや、複数レイヤーを背景に合成するツールでは値がわずかに変わることがあります。

Q: 3 色以上を一度に混ぜられますか？ A: 1 回では 2 色までです。まず 2 色を混ぜてカラーコードをコピーし、それを色 A に貼り付けて次の色と混ぜてください。

Q: 比率は整数パーセントだけですか？ A: スライダーは 1% 刻みで、目視で色を選ぶには十分な精度です。出力される CSS には使用した正確な比率が記録されるので、後から再現できます。