Tutorials

CSS color-mix()：ブラウザでネイティブにカラーをブレンド

2 min read

長年、CSSでカラーバリアントを生成するには、手による毎つのシェードのハードコーディングまたはchroma.jsやtinycolor2などのカラー操作ライブラリとしてJavaScriptに到達する必要がありました。CSS color-mix()関数がこれを変わります。これはネイティブCSS関数であり、すべての主要なブラウザでサポートされており、指定された比率で2つのカラーを一緒にブレンドします。スタイルシートの直接、JavaScriptなし、前処理なし。

この記事では、完全な構文をカバーし、カラースペースの選択がすべてを変える理由を説明し、color-mix()を本当に有用にする実践的な使用例を歩きます。ブラウザサポートとフォールバック戦略に対処しました。

color-mix()とは何か

color-mix()はCSS Color Level 5関数であり、2つのカラー値と混合比率を取り、結果のブレンドカラーを返します。これは2つのペイントを一緒に混合するのと同等です。しかし、重要な追加パラメータは カラースペース ブレンディングが発生する場所です。

最も単純な使用例は、ベースカラーからティントとシェードを作成しています。ブランドのブルーのすべてのシェードバリアントを手で定義する代わりに、動的に導出できます。

:root {
  --brand-blue: #2563EB;

  /* ティント — ホワイトで混合 */
  --brand-blue-light:   color-mix(in oklch, var(--brand-blue) 60%, white);
  --brand-blue-lighter: color-mix(in oklch, var(--brand-blue) 30%, white);

  /* シェード — ブラックで混合 */
  --brand-blue-dark:    color-mix(in oklch, var(--brand-blue) 80%, black);
  --brand-blue-darker:  color-mix(in oklch, var(--brand-blue) 50%, black);
}

ベースブルー#2563EBは1回定義されます。ティントとシェードはそれから導出されます。ブランドカラーが変更された場合、すべてのバリアントは自動的に更新されます。

構文とパラメータ

color-mix()の完全な構文は以下の通りです。

color-mix(in <color-space>, <color1> [<percentage>]?, <color2> [<percentage>]?)

カラースペースパラメータ

最初の引数in <color-space>は必須で、ブレンディングが発生する場所を指定します。有効なオプションには以下が含まれます。

  • srgb — スタンダードRGBでブレンド(最も親しみ深い、しかし泥のような中点の傾向)
  • hsl — HSLシリンダーに従ってブレンド
  • hwb — HWB(色相、白さ、黒さ)でブレンド
  • lab — CIE Labでブレンド(知覚的に均一)
  • oklab — Oklabでブレンド(CIE Labよりも優れた均一性)
  • lch — LCH(円筒形CIE Lab)でブレンド
  • oklch — OKLCH(円筒形Oklab、ほとんどの使用に推奨)でブレンド
  • display-p3 — Display P3ワイドガマットでブレンド
  • xyz — CIE XYZでブレンド

ほとんどのデザイン作業では、oklchが最も知覚的に自然な結果を生成します。次のセクションでこれについては詳しく説明します。

カラー引数

2つのカラー値は、任意の有効なCSSカラーです。16進コード、rgb()、hsl()、oklch()、命名されたカラー、またはCSSカスタムプロパティです。各々は、そのカラーがミックスに寄与する量を示すパーセンテージをオプションで持つことができます。

/* 50/50ミックス(パーセンテージが与えられていない場合、デフォルト) */
color-mix(in oklch, #FF5733, #3498DB)

/* 70%最初のカラー、30%秒 */
color-mix(in oklch, #FF5733 70%, #3498DB 30%)

/* 80%最初のカラー — 秒のカラーパーセンテージは20%として推論されます */
color-mix(in oklch, #FF5733 80%, #3498DB)

パーセンテージが100%未満に合計された場合、結果は部分的に透明です。100%を超える場合、パーセンテージは正規化されます。パーセンテージが指定されていない場合、ミックスは50/50です。

/* これらは等しい */
color-mix(in srgb, blue, red)
color-mix(in srgb, blue 50%, red 50%)
color-mix(in srgb, blue 50%, red)

異なるカラースペースで混合する

カラースペースの選択は美学的ではありません。それは根本的に生成されたカラーを変わります。同じ2つのカラーが異なるスペースで混合すると、劇的に異なる結果が得られます。

sRGBで混合する

sRGBブレンディングは、赤、緑、青のチャネルを直線的に補間することで機能します。多くのカラーペアでは、これは許容できる結果を生み出しますが、補色(カラーホイールの反対側の色)はしばしば彩度が低い、灰色の中点を生じます。

/* sRGBでオレンジレッドとブルーを混合する */
color-mix(in srgb, #FF5733 50%, #3498DB 50%)
/* 結果：相殺された、ほぼブラウンパープル — [#9A77B7]範囲 */

問題は、補色のRGBチャネルが平均化されると互いに打ち消し合うことです。赤[255、87、51]とブルー[52、152、219]は[154、120、135]の中点を生み出します。相殺された、グレーアウトの結果です。

HSLで混合する

HSLブレンディングは、カラーホイール沿って補間し、異なる問題を引き起こす可能性があります。予期しない中間カラーを通して色相回転。

/* HSLでオレンジ(色相~15°)とブルー(色相~210°)を混合 */
color-mix(in hsl, #FF5733 50%, #3498DB 50%)
/* 色相は~112°を補間します — 緑色の中間を取得します */

2つのカラーがカラーホイールに遠く離れている場合、HSL内のそれらの間の最短経路は、緑または他の予期しない色合いを通過する可能性があります。HSLはまた、一般的にhsl()の知覚的な非均一性の問題を共有しています。中点の明度は、2つのソース明度の中間に見えないかもしれません。

OKLCHで混合する

OKLCHブレンディングは、ほとんどの実践的な使用例の推奨されるアプローチです。それは知覚的に均一なスペースで補間し、これは中間カラーが自然な視覚的な中点のように見えることを意味します。鮮やか、バランスしており、予期しない色相ドリフトなし。

/* OKLCHでオレンジレッドとブルーを混合 */
color-mix(in oklch, #FF5733 50%, #3498DB 50%)
/* 結果：鮮やかなマゼンタパープル — 知覚的に中間 */

#FF5733(温かいオレンジレッド)と#3498DB(明るいブルー)がOKLCHで50/50混合は、活発で彩度の高い中間を生成します。色相はパープル範囲を直接補間します。デザイナーが「差を分割する」ように頼まれたときのオレンジとブルーの間。

Oklabで混合する(色相短いパス/長いパス)

色相補間の場合、カラーホイール周囲の短いまたは長いアーク を取得するかどうかを指定することもできます。

/* 短い色相パス(デフォルト) */
color-mix(in oklch shorter hue, red, blue)

/* 長い色相パス — ホイール周りの反対方向に行く */
color-mix(in oklch longer hue, red, blue)

/* 色相の増加 */
color-mix(in oklch increasing hue, red, blue)

このコントロールは、意図的に特定の中間色合いを通過する補間を望む場合に有用です。たとえば、パープルではなく黄色から青への赤を通る勾配。

比較表

カラースペース オレンジ+ブルー中点 ビジュアル特性
srgb 相殺された灰色パープル 彩度が低い、泥のような
hsl 緑色 予期しない色相シフト
lab パープル、より少ない活発 sRGBより自然
oklch 鮮やかなマゼンタパープル 最も知覚的に自然

カラーコンバータを使用して、特定のカラーのOKLCH値を探索し、ブレンディング方法を予測します。

実践的な使用例

ホバーと活動状態の作成

最も即座に有用なアプリケーションの1つは、各々の個別変数を定義することなく対話的な状態を生成しています。

:root {
  --btn-bg: oklch(0.55 0.22 250);  /* ブランドのブルー */
}

.btn {
  background-color: var(--btn-bg);
}

.btn:hover {
  /* ブラックで15%混合して暗くする */
  background-color: color-mix(in oklch, var(--btn-bg) 85%, black);
}

.btn:active {
  /* 押された状態により暗くする */
  background-color: color-mix(in oklch, var(--btn-bg) 70%, black);
}

.btn:disabled {
  /* 無効のためにdesaturateおよびライト */
  background-color: color-mix(in oklch, var(--btn-bg) 40%, white);
  opacity: 0.6;
}

これにより、デザインツールで3つのアラート個別シェードを選択する必要性が排除されます。ホバーアクティブカラーはベースから数学的に導出され、ブランドカラーが変更された場合でも関係が一貫しています。

セマンティックカラースケールの構築

デザインシステムはセマンティックカラーを必要とします。成功、警告、危険 — ブランドパレットと調和しており、独立して選択する代わりにcolor-mix()を使用して、ブランドカラーからこれらを導出させます。

:root {
  --brand: oklch(0.55 0.22 250);  /* ブランドのブルー */

  /* 成功：純粋なグリーンとブランドをミックスしてブランドアイデンティティのヒントを保持 */
  --success: color-mix(in oklch, oklch(0.65 0.22 145) 85%, var(--brand) 15%);

  /* 警告：純粋なアンバー — ここではミックスが必要ありません */
  --warning: oklch(0.75 0.18 70);

  /* 危険：純粋な赤 */
  --danger: oklch(0.62 0.24 25);

  /* 各状態のティント背景 */
  --success-bg: color-mix(in oklch, var(--success) 12%, white);
  --warning-bg: color-mix(in oklch, var(--warning) 12%, white);
  --danger-bg:  color-mix(in oklch, var(--danger)  12%, white);
}

--success-bgは成功グリーンの非常に軽いティントであり、自動的に導出されます。通知バナー、警告ボックス、フォームフィールドエラー状態にこれらを使用してください。

フルシェードスケールを動的に生成する

シェードジェネレータは、正確な知覚的ステップで完全な50–950スケールを作成するための正しいツールです。color-mix()は、ハンドフルバリアントを必要とするコンポーネント用にインラインで使用可能な近似を生成できます。

:root {
  --primary: oklch(0.58 0.20 250);

  --primary-50:  color-mix(in oklch, var(--primary) 8%,  white);
  --primary-100: color-mix(in oklch, var(--primary) 15%, white);
  --primary-200: color-mix(in oklch, var(--primary) 30%, white);
  --primary-300: color-mix(in oklch, var(--primary) 50%, white);
  --primary-400: color-mix(in oklch, var(--primary) 70%, white);
  --primary-500: var(--primary);
  --primary-600: color-mix(in oklch, var(--primary) 85%, black);
  --primary-700: color-mix(in oklch, var(--primary) 70%, black);
  --primary-800: color-mix(in oklch, var(--primary) 55%, black);
  --primary-900: color-mix(in oklch, var(--primary) 35%, black);
  --primary-950: color-mix(in oklch, var(--primary) 20%, black);
}

ダークモードカラー導出

color-mix()は、体系的にダークモード表面カラーを導出する場合に特に価値があります。

@media (prefers-color-scheme: dark) {
  :root {
    --surface-base:     #09090b;
    --surface-elevated: color-mix(in oklch, var(--brand) 8%, #09090b);
    --surface-overlay:  color-mix(in oklch, var(--brand) 12%, #09090b);
  }
}

ダークサーフェスにブランドカラーの少量を混合することで、微妙なティント — AppleのmacOSおよび多くのモダンデザインシステムで使用される技術を作成し、ダークモードが純粋なニュートラルサーフェースよりも無菌ではないように感じさせます。

アルファチャネル動作

パーセンテージが100%に合計されない場合、結果は部分的に透明です。これを意図的に使用して、半透明バリアントを作成できます。

/* 30%のブルー — 30%不透明度でのrgbaと等しい */
color-mix(in srgb, blue 30%, transparent)

/* また有効：反対側からの命名された透明性 */
color-mix(in oklch, #3B82F6 25%, transparent)

これは固定アルファを持つrgba()を使用するパターンを置き換えます。利点は、不透明度関係がミックスパーセンテージで明示的であり、任意のカラーと混合できることです。純粋な透明性だけではなく。

ブラウザサポートとフォールバック

2026年の時点で、color-mix()は完全にサポートされています。

  • Chrome/Edge ：バージョン111以来(2023年3月)
  • Firefox ：バージョン113以来(2023年5月)
  • Safari ：バージョン16.2以来(2022年12月)

グローバルサポートは90%を超えています。color-mix()の結果を見ることができないユーザーは、非常に古いモバイルブラウザまたはロックされたブラウザバージョンを備えたエンタープライズ環境にあります。

プログレッシブ強化フォールバック

CSSカスタムプロパティの宣言がカスケード。ブラウザがcolor-mix()をサポートしていない場合、前の行のフォールバックが使用されます。

:root {
  /* color-mix()なしブラウザ用フォールバック */
  --btn-hover: #1D4ED8;

  /* モダンブラウザの計算値でオーバーライド */
  --btn-hover: color-mix(in oklch, var(--btn-bg) 85%, black);
}

カスタムプロパティは同じ変数を再宣言するため、プログレッシブ強化パターンとして動作します。color-mix()をサポートしていないブラウザは明示的なフォールバックカラーを使用します。モダンブラウザは導出値を使用します。

または、@supportsを使用します。

.btn:hover {
  background-color: #1D4ED8; /* フォールバック */
}

@supports (color: color-mix(in oklch, red, blue)) {
  .btn:hover {
    background-color: color-mix(in oklch, var(--btn-bg) 85%, black);
  }
}

@supportsアプローチはより明示的で、古いブラウザサポートを最終的にドロップする際にクリーンアップする方が簡単です。

主要なポイント

  • color-mix()はCSSでネイティブに2つのカラーをブレンドし、多くの使用例のためにJavaScriptまたは事前生成されたシェードテーブルの必要性を排除します。
  • in <color-space>引数はブレンディングが発生する場所を制御し、結果に劇的に影響します。ほとんどの作業にはoklchを使用してください。つまり、sRGBの問題(泥のような彩度喪失)またはHSLの問題(予期しない色相シフト)なしで知覚的に自然な中点を生成します。
  • 最も実践的な使用例は、対話的な状態(ホバー、活動、無効)、セマンティックカラー導出、ダークモード表面ティント、および単一のベース変数から小さなシェードスケールの生成です。
  • パーセンテージが100%未満に合計された場合、出力は部分的に透明です。rgba()なしで不透明度バリアントを作成するのに有用です。
  • ブラウザサポートは2023年初頭からすべてのモダンブラウザをカバーしています。古い環境のための前置CSSの宣言またはすべての@supportsブロック内にハードコーディングされたフォールバック値を提供します。
  • カラーコンバータを使用して、既存のブランドカラーをcolor-mix()で使用する前にOKLCHに変換し、パレットジェネレータを使用して、CSSを書く前に調和のあるカラー関係を確認してください。

Related Colors

black

#000000

blue

#0000FF

green

#008000

magenta

#FF00FF

orange

#FFA500

purple

#800080

white

#FFFFFF

yellow

#FFFF00

Related Brands

Apple

Think different

3 colors

Line

Closing the distance

2 colors

Drop

3 colors

Hex

8 colors

One

2 colors

Shift

3 colors

Related Tools

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH color formats instantly.

Open tool

Palette Generator

Generate harmonious color palettes using complementary, analogous, triadic, and split-complementary schemes.

Open tool