Widely available 安全に使用可能。カラーパレットの動的生成やホバーエフェクトの色調整に非常に便利。
カラー Widely available

color-mix() function

color-mix() は2つの色を任意の色空間（srgb、oklch、lab など）で混合する。各色に割合を指定でき、透明度の調整やカラーパレットの動的生成に使える。CSS カスタムプロパティと組み合わせることで、テーマカラーのバリエーションを1つの変数から派生できる。

カラー合成

概要

color-mix() は2つの色を任意の色空間（srgb、oklch、lab など）で混合する。各色に割合を指定でき、透明度の調整やカラーパレットの動的生成に使える。CSS カスタムプロパティと組み合わせることで、テーマカラーのバリエーションを1つの変数から派生できる。

対応ブラウザ

デスクトップ

Chrome 111+
Edge 111+
Safari 16.2+
Firefox 113+

モバイル

Chrome Android 111+
Safari iOS 16.2+
Firefox Android 113+

基本構文

CSS 
/* 基本的な混合（sRGB） */
.mixed {
  color: color-mix(in srgb, #ff0000, #0000ff);
}

/* 割合を指定 */
.light-brand {
  background: color-mix(in oklch, var(--brand) 80%, white);
}

/* 透明度の調整 */
.faded {
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
}

/* ホバー時の明るさ調整 */
.button:hover {
  background: color-mix(in oklch, var(--btn-bg) 85%, black);
}

実務での使いどころ

  • テーマカラーからの派生色生成

    ブランドカラー1色から、hover 用の暗い色や disabled 用の薄い色を動的に生成できる。

  • 透明度の代替手段

    rgba() の代わりに color-mix で transparent と混合し、背景が透けない半透明色を作れる。

注意点

  • 混合する色空間によって結果の色が異なる。oklch での混合が知覚的に最も自然な結果を生む。
  • 割合の合計が 100% を超える場合は正規化されるが、意図しない結果になることがある。

アクセシビリティ

  • 動的に生成された色のコントラスト比が十分であるか、代表的なパターンで検証すること。

参考リンク