カラーミキサー

調整可能な重みで2色以上を混合します。結果の色をHEX、RGB、HSLで確認できます。

混合結果

色の混合の仕組み

このツールはRGBカラー空間で加法混色を使用します。各色のRGBコンポーネントは重みに従って平均化されます。これは、(重なり合うスポットライトのように)光が混ざる方法をシミュレートし、(絵の具を混ぜるような)減法混色とは異なります。

3色以上を混合できますか?

はい!「+ 色を追加」をクリックして、最大8色を追加できます。重みスライダーを使って、各色の混合への寄与を制御できます。

使い方

  1. 色を選択: ピッカーを使って各色を選びます。「+ 色を追加」をクリックして、最大8つまでスロットを追加できます。
  2. 各色の重みを調整: 各色の下のスライダーをドラッグして、最終的な混合への寄与を制御します。
  3. 結果をプレビュー: 混合された色は、hex、RGB、HSL値とともにライブで表示されます。
  4. 混合された色をコピー: クリックして取得したhexまたはRGB値をコピーし、デザインやコードで使用します。

なぜカラーミキサーを使うのか?

色を混合することはデザインの基本操作です, 色合いを作成(白と混合)、影を作成(黒と混合)、トーンを作成(灰色と混合)、または2つのブランドカラー間の調和のとれた中間色を作成します。デザイナーはパレットのバリエーションを生成、グラデーションのストップに中間トーンを見つける、隣接する色のアクセシブルなコントラスト比を確保する、ベースカラーに視覚的にリンクされたホバー/フォーカス状態を作成するためにこれを使用します。

人々が「色を混ぜる」と言うときに意味する3つのこと

非専門家が「2つの色を混ぜる」と言うとき、ほぼ常に3つのまったく異なる操作のうちの1つを意味します。間違ったモデルを選ぶことは、カラーツールにおける混乱の最大の単一の原因です。

加法混色は、色のついた光線が重なるときに起こることです。赤と緑の2つの懐中電灯を白い壁の同じ部分に向けると、黄色のパッチが生まれます。その上に青い3つ目の懐中電灯を加えると白が生まれます。混色モデルは「より多くの光 = より明るい」で、3つの原色は赤、緑、青です。これは人間の錐体細胞のピーク感度がおよそそれらの帯域にあるためです。あらゆる画面、電話、モニター、テレビ、プロジェクターは加法混色を使用しています。各ピクセルには3つのサブピクセル(R、G、B)が含まれ、すべてを最大にすると白が生まれます。これがウェブのデフォルトカラーモデルがRGBである理由です:媒体は発光性で、数学が媒体と一致します。

減法混色は、色素が白い光から波長を吸収するときに起こることです。シアンのインクは赤い光を吸収し、緑と青を反射します。黄色のインクは青を吸収し、赤と緑を反射します。シアンを黄色の上に重ねると、両方のフィルターを通過する唯一の波長は緑のものだけです。モデルは「より多くの顔料 = より暗い」で、3つの減法原色はシアン、マゼンタ、黄色です。CMYは理論上、最大強度で黒に混合されますが、実際には顔料は不完全で、結果はくすんだ茶色になります。そのため商業印刷では真の黒のために別の黒インク(CMYKのK)を追加しました。画面上で動作するカラーミキサーは、画面自体が加法的であるため、真に減法混色を実行することはできません。外観をシミュレートできるだけです。

伝統的なアーティストの色彩理論は、私たちに原色は赤、黄、青であると教えました。絵画の伝統、ゲーテの1810年の色彩論、イッテンの1961年のバウハウスの教科書色彩の芸術は、アーティストのパレットの基礎としてRYBを成文化しました。RYBは物理的に正確ではありません。色域を最大化する真の減法原色はCMYであり、RYBではありません。しかし、RYBは何世紀にもわたって持ちこたえてきました。なぜなら、本物の絵の具は純粋な減法フィルターではないからです:カドミウムレッドのチューブとウルトラマリンブルーのチューブは認識可能な紫色に混合され、システムはイーゼル上で世代の生徒を教えるのに十分「機能」します。このツールは加法RGBブレンダーで、これはウェブが実際に行うことなので、「赤 + 緑」は黄色を生み、絵の具ミキサーが生むであろう茶色ではありません。

カラースペース、sRGB、Display P3、Rec. 2020、Adobe RGB

カラーモデル(RGB、CMYK、HSL)は、どの次元があるかを教えてくれます。カラースペースは、各数値トリプルが正確にどの物理的な色に対応するかを教えてくれます:原色の色度、白色点、転送関数を固定します。両方とも「RGB」を話す2つのディスプレイは、異なるカラースペースをターゲットとする場合、同じコードに対して目に見えて異なる赤を生成する可能性があります。

知覚カラースペース、そしてsRGBで混色するとなぜ中間点が濁るのか

ほとんどのウェブツールが色を保存および操作するsRGBとHSL座標は知覚的に均一ではありません。HSLのL channelの単位ステップは、色がどれだけ明るく見えるかの単位ステップに対応しません。これが、チャネルを平均化することによって2つの色を混合すると直感に反する結果が得られる深い理由です。

典型的な例:純粋な赤#ff0000と純粋な緑#00ff00を取ります。RGBチャネルをコンポーネントごとに平均化します:赤は255から127に、緑は0から127に、青は0のままです。結果は#7f7f00で、これは鈍く、暗く、わずかに濁ったオリーブです。それは、赤と緑の懐中電灯を実際に同じ壁のパッチに照らした場合に得られる鮮やかな黄色#ffff00とは似ても似つきません。これを説明する2つの複合的な問題があります。

第一に、sRGBはガンマエンコードされています。127として保存されている数値は、255が表す光の半分を表しません。転送関数は非線形です:sRGBの127は線形光強度の約21%に対応し、50%ではありません。したがって、ガンマエンコードされた値を平均化すると、強度の平方根のようなものを平均化していることになり、強度そのものではなく、結果は本来あるべきよりもはるかに暗くなります。その問題だけの修正は、平均化する前にsRGBを線形RGBに変換し、その後変換し戻すことです。線形RGBの平均化では、赤+緑を2で割ったものは、はるかに明るく信頼できる黄緑になります。

第二に、線形RGBでさえ知覚と一致しません。線形RGBの等しいステップは、知覚される明るさや色度の等しいステップとは依然として異なります。線形RGBの赤と青の中間点は、デザイナーが期待する豊かな紫色ではなく、彩度の低いラベンダーです。そのより深い問題の修正は、知覚的に均一な空間、Lab、Oklab、OKLCHで混合することです。両端をOklabに変換し、L、a、bチャネルを線形補間し、sRGBに戻します。Oklabの赤と緑の中間点は、鮮やかで信頼できる黄色です。赤と青の中間点は飽和したマゼンタです。黄色と青の中間点は、ナイーブなRGBから得られる沼地の緑ではなく、きれいなニュートラルグレーです。

このツールは現在ガンマエンコードされたsRGBで平均化しています、これは最もシンプルなモデルであり、これらの濁った中間点を生成するモデルです。その単純なケースには正しいですが、物理的な光や人間の知覚が実際に行うことには一致しません。グラデーションのストップやパレットの中間トーンを選んでいて、濁ったグレーの罠を避けたい場合は、以下に説明する新しいCSS color-mix()関数、または色数学ライブラリの1つを使用してください。

CIE Lab、Oklab、OKLCH、知覚スタック

CIE Lab(CIELABとも表記される)は、1976年に国際照明委員会によって公開されました。3つの軸があります:0(黒)から100(白)までの明度のL*、緑から赤への色度軸のa*、青から黄への色度軸のb*。等しい数値の差が等しい知覚差にほぼ対応するように設計されました。半世紀の間、それはグラフィックス、視覚科学、色管理における標準的な知覚空間でした。既知の弱点:青は補間されると不自然に紫がかってきます;明度軸は高度に飽和した色の知覚を完全に追跡しません。

CIE LCHは、極座標で表現されたCIE Labです:明度のL、彩度(中性軸からの距離)のC、色相角のH。生のa*/b*値よりもデザイナーにとってより便利です。なぜなら、「色相を30度シフトする」や「彩度を0に落とす」のような操作が自然なメンタルモデルに直接マッピングされるからです。

Oklabは、Björn Ottossonによって2020年12月に「A perceptual color space for image processing」というエッセイでbottosson.github.ioに公開されました。Ottossonはゲーム業界で色に取り組んでいたスウェーデンのエンジニアです。OklabはCIE Labの既知の欠点のほとんどを修正します。特に補間における青紫シフトと、飽和色における彩度差の過大予測です。W3CはOttossonのブログ投稿から約1年以内にOklabをCSS Color Module Level 4に採用しました。新しいカラースペースの非常に速い標準化です。今日、すべての主要なブラウザはネイティブでoklab()をサポートしています。

OKLCHは円柱座標のOklabです:明度のL 0-1、彩度のC 0から約0.4、色相のH 0-360度。デザインシステムのパレットに最も推奨されるカラースペースになりつつあります。なぜなら、その軸の操作がデザイナーの直感にきれいにマッピングされ、2つのOKLCH色の間の補間がCSSで現在利用可能なあらゆる空間の中で最も滑らかで心地よいグラデーションを生み出すからです。

CSS color-mix()関数、JSなしの知覚混色

CSS Color Module Level 5はcolor-mix()を導入しました。これは2つの色、補間カラースペース、そしてオプションの重みを取り、ブラウザによって完全に計算された混合結果を返します。構文はcolor-mix(in oklch, red 50%, blue 50%)です。空間を切り替えることができ(in srgb、in oklab、in lch、in hsl longer hueなど)、その空間で数学が実行されます。ブラウザサポートは2023年初頭に到着しました:

JavaScriptなし、CSSネイティブのカラーミキサーは今や2年以上広く利用可能です。color-mix()の上に構築されたツールはすべて、知覚的に正しい結果を「無料で」得ます、ブラウザが変換スタックを処理します。CSS Color Module Level 4自体は2022年にCandidate Recommendationステータスに達し、モダンブラウザで広くサポートされています。

カラー数学のためのJavaScriptライブラリ

color-mix()に頼れない、または頼りたくないときに、3つのライブラリが支配します:

色彩理論の短い歴史

西洋の色彩理論は1665年のアイザック・ニュートンから始まります。ペスト中にケンブリッジから隔離されている間、ニュートンは太陽光をプリズムに通し、7つの異なる色(赤、橙、黄、緑、青、藍、紫)を特定しました。それから彼はそれらを閉じた円、ニュートンの色相環に配置し、スペクトルの両端(紫と赤)を非スペクトルのマゼンタを通して接続しました。色相環は1704年に彼のOpticksで発表されましたが、1665-1666年に作り上げられました。

ヨハン・ヴォルフガング・フォン・ゲーテは1810年に色彩論(Zur Farbenlehre)を発表しました。ニュートンが物理学者だったのに対し、ゲーテは色の心理学を調査する詩人でした:色が観察者の心の中でどのように感じられ、対比し、組み合わさるか。彼の作品は多くの点で科学的に誤っていましたが、補色、色の残像、暖色と寒色のパレットの感情的特性についてのアイデアを導入し、今日でも教えられています。

ヨハネス・イッテン、バウハウスのマスターは、1961年に色彩の芸術(Kunst der Farbe)を出版しました。イッテンの12本スポークRYB色相環と彼の7つの色の対比(色相、明暗、寒暖、補色、同時、彩度、面積)は、20世紀後半のデザイン教育の支配的な教育フレームワークになりました。

PantoneはLawrence Herbertによって作成されました。彼は1956年にPantone Inc.に従業員として加わり、1962年に会社を買収しました。1963年に彼はPantone Matching System(PMS)を立ち上げました:番号で識別される標準化されたスポットカラーインクのライブラリで、ニューヨークのデザイナーと香港の印刷会社が曖昧さなしに正確に同じ色を指定し再現できる印刷されたスウォッチ本付き。Pantoneは技術的なCIE的な意味でのカラースペースではありません、それは物理的なインク混合物の独自のカタログですが、プロの色ワークフローへの影響は大きいです。

HSLとHSVはAlvy Ray Smithによって彼の1978年の論文「Color Gamut Transform Pairs」で導入されました。これは彼がXerox PARCにいた間、SIGGRAPH proceedingsに発表されました(SmithはのちにPixarを共同創設しました)。彼はRGBよりもアーティストの直感により自然にマッピングされる色座標を探していました。HSLはウェブでデフォルトの「デザイナーフレンドリー」カラーモデルになり、CSSで最も広く認識されている非RGB表記のままです。しかし、知覚的に非均一です、OKLCHはその現代の後継者です。

コントラストとアクセシビリティ、WCAG 1.4.3

デザイナーが2つの色を混ぜて3つ目を作成するとき、ホバーステート、色付きの背景、グラデーションストップ、結果として生じる色は、その上に置かれるテキストやアイコンに対してまだコントラスト要件を満たさなければなりません。WCAG 2.x成功基準1.4.3「コントラスト(最小)」は次を要求します:

コントラスト比は相対輝度を使用して計算されます、上記の線形RGB変換と線形化されたチャネルの重み付き合計(L = 0.2126·R + 0.7152·G + 0.0722·B)を使用します。2つの色の間の比率は(L_明るい + 0.05) / (L_暗い + 0.05)です。実用的な意味合い:グラデーションに沿った中間ストップは、両端でコントラストチェックに合格するかもしれませんが、真ん中では劇的に失敗する可能性があります。ブランドが暗い紺色と明るい黄色を混ぜてホバーステートのオリーブを生成する場合、そのオリーブは白いテキストと黒いテキストの両方に対してWCAG失敗ゾーンにある可能性があります。

その他の質問

なぜ赤と緑を足しても茶色にならないのですか?

このツールは、すべての画面と同様に、加法RGB混色を使用するためです。赤い光に緑の光を足すと黄色が得られます。茶色は赤と緑の絵の具を混ぜたときに得られるもので、これは減法的です:各顔料が異なる波長を吸収し、生き残る波長が茶色に見えます。画面上で「絵の具混合」を正確にシミュレートするには、スペクトルまたは顔料認識モデルが必要です(ProcreateとAdobe Frescoはアートアプリのためにこれを行います);このツールを含む一般的なウェブカラーミキサーは正直な加法RGBブレンダーで、茶色ではなく黄色を返します。

私の中間点が濁って見えます、修正方法は何ですか?

修正の2つのレイヤー。最小限の正しさのステップは線形光ブレンディングです:平均化する前にsRGBを線形RGBに変換し、それから戻します。これだけで赤+緑→黄色がはるかに明るく信頼できるように見えます。完全な知覚的修正はOKLCHまたはOklabで混合することです、両端をOKLCHに変換し、補間し、戻します。ブラウザのCSS color-mix(in oklch, red, green)はこれを1行で正確に行い、2023年5月以降に出荷されたすべてのブラウザで動作します。JavaScriptパイプラインの場合、culori.jsがリファレンスライブラリです。

デザインシステムのパレットを混ぜる正しいカラースペースは何ですか?

OKLCHが現在のコンセンサスの答えです。知覚的に均一で、デザイナーの直感に一致する清潔な軸(明度 / 彩度 / 色相)を持ち、濁った中間点なしのグラデーション補間を生成し、CSS Color 4のoklch()とCSS Color 5のcolor-mix(in oklch, ...)を介してすべてのモダンブラウザで出荷されます。2024-2026年に構築されたデザインシステムは、まさにこの理由からHSLベースのパレットからOKLCHベースのパレットに切り替えることが増えています。

私の混合色はWCAGコントラストチェックに合格しますか?

このツールは現在結果のコントラスト比を表面化していませんが、計算できます:WCAG輝度はsRGBチャネルを線形化した後L = 0.2126·R + 0.7152·G + 0.0722·Bで、2つの色のコントラスト比は(L_明るい + 0.05) / (L_暗い + 0.05)です。ターゲットは通常テキストで4.5:1、大きなテキストまたはUIコンポーネントで3:1です。関連ツールエリアのColor Contrast Checkerはこの計算を直接実行します。

関連ツール

色合いジェネレーター

色合いと影を生成します。

カラーコンバーター

カラー形式間で変換します。

カラーパレットジェネレーター

カラーパレットを生成します。