CanDoYa
JA

色を混ぜるカラーミキサー

すべてブラウザー内で動作します。アップロードも登録も不要です。

2つのデジタルカラーを選び、スライダーで混ぜる割合を調整します。

50% A / 50% B
混ぜた色デジタルsRGB合成
#9a7b8650% A / 50% B
HEX#9a7b86
RGBrgb(154, 123, 134)
HSLhsl(339, 13%, 54%)
CSS--mixed-color: #9a7b86;
このツールをシェア

色を混ぜると何色になりますか？

カラーミキサーは、2つのデジタルカラーを指定した割合で合成し、できた色をすぐに表示します。2つのHEX値を選ぶか貼り付け、スライダーで比率を調整してください。結果はHEX、RGB、HSL、CSS変数としてコピーできます。計算はブラウザ内だけで行われます。

使い方

  1. 12色を選ぶ. 各カラーピッカーを使うか、カラーAとカラーBの欄に3桁または6桁のHEX値を貼り付けます。
  2. 2混ぜる割合を決める. スライダーをAまたはBへ動かします。プレビューと各カラー値がすぐに更新されます。
  3. 3結果をコピーする. 混ぜた色をHEX、RGB、HSL、またはそのまま使えるCSSカスタムプロパティとしてコピーします。

こんな方に

このカラーミキサーでは、2つのsRGBカラーに含まれる赤、緑、青の各チャンネルを加重平均します。50%なら両方の色が同じだけ反映されます。スライダーを端へ動かすほど、片方の元色が強く残ります。入力した色は端末の外へ送信されません。結果はデザインデータやスタイルシートへそのまま貼り付けられます。

画面上のRGB合成は、絵の具を混ぜる場合とは異なります。顔料は光を吸収するため、実際の絵の具は暗くなったり彩度が下がったりします。このツールが計算するのは、WebサイトやUIなどで使う正確なデジタルカラーです。

よくある質問

色を混ぜるサイトは無料で使えますか？

はい。アカウント登録もダウンロードも回数制限もなく、無料で使えます。2色を選び、比率を調整して、必要な数だけ結果をコピーできます。

選んだ色はどこかへアップロードされますか？

いいえ。色の値はブラウザ内のJavaScriptで合成され、サーバーには送信されません。公開前のブランドカラーや製品カラーも安心して試せます。

一度に何色まで混ぜられますか？

正確に比率を調整できるよう、一度に混ぜるのは2色です。3色目を加える場合は、最初の結果を片方の入力欄へコピーし、次の色と混ぜてください。

カラーミキサーはどのように色を計算しますか？

2つのHEXカラーを赤、緑、青のチャンネル値へ変換し、選んだ割合を各チャンネルに適用します。値を足して最も近い整数へ丸めた後、HEX、RGB、HSLへ変換します。

絵の具を混ぜたときの色も分かりますか？

いいえ。画面表示用のデジタルsRGBカラーを混ぜるツールです。絵の具は顔料による減法混色で、素材、濃度、照明によって結果が変わります。実物では暗くなったり色相がずれたりすることがあります。

3桁のHEXカラーも混ぜられますか？

はい。#f06のような3桁と、#ff0066のような6桁のどちらも入力できます。先頭の#は省略しても構いません。3桁の値は通常の6桁へ自動的に展開されます。