黒を混ぜて色を暗くする

1つのブランド色からシェードを派生させる

ティントと対称的に、シェード (より暗いバリアント) は黒を混ぜることで 得られます：

:root {
  --brand: #2563eb;
}

.shade-15 { background: color-mix(in oklch, var(--brand), black 15%); }
.shade-30 { background: color-mix(in oklch, var(--brand), black 30%); }
.shade-50 { background: color-mix(in oklch, var(--brand), black 50%); }

15% 黒混合は典型的なホバー時の暗化、30% は押下/アクティブ状態、 50% はフッターやコントラストゾーンに有用な「深い」サーフェスを生みます。

OKLCH を選ぶ理由（再び）

sRGB で黒を混ぜると、明度より速く彩度が落ちるため、「より暗い ブランド色」がブランドアイデンティティを早く失います。OKLCH は L を 下げつつ彩度を保つので、70% 黒混合まではブランド感が残ります。これが 2024 年以降のすべてのデザインシステムが OKLCH でシェードスケールを 構築する理由です。

「ブランド上のインク」レシピ

ブランドとして読めるテキストの暗色バリアントが必要ですか？ ブランド色に黒を 75% 混合し、背景とのコントラストを アクセシビリティ カラーチェッカー で確認してください。

currentColor と組み合わせる

color: color-mix(in oklch, currentColor, black 20%) は、要素が 継承する任意の色を暗くします。ブランド色をハードコードしたくない再利用 コンポーネントの内部で便利です。