CSSはいくつかの色形式を提供しています。これらはすべて同じ色を生成しますが、選択は可読性と透明度が必要かどうかに関わります。
css
{ : red; }
{ : ; }
{ : ; }
{ : ( ); }
{ : ( / ); }
{ : ( ); }
{ : ( / ); }
HSLは色をHue(色相、色輪上の0~360°)、Saturation(彩度)、Lightness(明度)で表現します。これは人間が色をどう考えるかにマッピングされるため、バリエーションが直感的です:
:root { --brand-h: 220; }
.primary { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
より明るい/暗い色合いを生成するのは簡単です。1つの数値を変更するだけです。16進数やrgbでそうするには、すべてのチャネルを再計算する必要があります。
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
/ alpha構文(0 = 透明、1 = 不透明)は、半透明の色を作る方法で、オーバーレイとシャドウに便利です。(注:要素のopacityは全体の要素を薄くします。子も含めてです。一方、アルファ色はその色だけを薄くします。)
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
形式を知ることで、適切なツールを選べます。16進数/rgbは単発の色に、HSL/OKLCHはデザインシステムに(簡単で直感的な色合いの変動)、/ alpha構文は透明度に向いています。
HSLは特に、一貫性のあるテーマ対応カラーパレットの構築をはるかに簡単にします。