混色シミュレーター

この混色ツールは、2つの色を混ぜた結果をすぐにHEX・RGB・HSLで表示します。1色を明るくしたり暗くしたり、くすませたりでき、最大15段階のグラデーションも作れます。

操作

色1

#E63946のようなHEX、rgb(230, 57, 70)、hsl(...)

色2

HEX、rgb()、hsl()

2番目の色の割合

0％＝色1のみ、100％＝色2のみ。明るくする場合は白の割合

混色の方式

グラデーションの段階数

色1から目標の色まで2〜15色

マイツールボックス入力内容はこのブラウザーにのみ保存されます。

結果

このツールが混ぜるのは画面の色、つまり光の値であり、顔料でできた絵の具ではありません。そのため、赤と青は紫（#800080）になりますが、青と黄色は水彩のような緑ではなく、中間の灰色になります。

各色チャンネルについて中間の値を計算します。どのように計算するかは「混色の方式」で決まります。

色を白と混ぜると明るく（ティント）、黒と混ぜると暗く（シェード）、灰色と混ぜると落ち着いた色（トーン）になります。割合で強さを、段階数で一連の色を作れるので、ホバー時の色やカラースケールづくりにも便利です。

color-mix()の式は、そのままスタイルシートにコピーできます。合う配色は配色パレット、形式の変換はカラーコード変換、文字の読みやすさはコントラストチェッカーで確かめられます。

青と黄色を混ぜるとどうなりますか？

画面上では中間の灰色（sRGBの平均で#808080）になります。光の色を混ぜているためです。水彩やアクリル絵の具では、顔料が光を引き算するので緑になります。

2色を同じ割合で混ぜるには？

2つの色を入力し、2番目の色の割合を50％のままにします。色2を3分の1にしたいときは33を入力します。

色を明るく・暗くするには？

「色を明るくする」または「色を暗くする」を選び、割合を調整します。白20％ならやや明るく、80％ならほぼ白になります。

混色の方式はどれを選べばよいですか？

sRGBはCSSや多くのソフトの標準と同じです。Oklabはなめらかなグラデーション向き、線形光は光源を重ねた場合に当たります。

結果をCSSで使うには？

「CSS（color-mix）」の値をコピーすれば、最新のブラウザで色としてそのまま使えます。HEXの値を使っても構いません。

更新日：2026年10月1日 · 編集方針