白を混ぜて色を明るくする

1つのブランド色からティントを派生させる

ブランド色から ティント (より明るい色) を派生させる最もクリーンな方法 は、OKLCH で白を混ぜることです：

:root {
  --brand: #2563eb; /* blue-600 */
}

.tint-25 { background: color-mix(in oklch, var(--brand), white 25%); }
.tint-50 { background: color-mix(in oklch, var(--brand), white 50%); }
.tint-75 { background: color-mix(in oklch, var(--brand), white 75%); }

white の比率がどれだけ白を混ぜるかを決めます。75% 白では、ほぼ 白に近いサーフェスでありながら、ブランド色の気配を残せます。 ライトテーマのホバー背景に最適です。

opacity より優れている理由

要素に opacity: 0.25 を設定すると、子要素やテキストを含む 要素全体 がフェードします。color-mix() は背景色だけを変えるので、前面のコンテンツ は完全な不透明度を保ち、アクセシビリティが守られます。

sRGB ではなく OKLCH を選ぶ理由

sRGB で白を混ぜると、知覚的明度のスケールが圧縮され、ステップが不揃いに なります。OKLCH は L 軸を線形に進むので、連続する混合は視覚的に等しい ステップを生み出します。これがすべてのモダンなシェードスケールの基礎です。

組み合わせる

完全なシェードスケール (50–950) には白と黒の両方の入力が必要です。 ブランドシェード例 で、ティントとシェードを連結して完全なパレットを作る方法を解説しています。