カラーキーワード
|
1 |
color: red; |
HEX(16進数)
定番の指定方法
|
1 |
color: #ff0000; |
RGB
透明度を指定したい場合に使う。透明度に関しては、photoshopのアルファチャンネルに近い概念。opacityに近いけどレイヤー全体に指定せず、背景とかだけに指定できるのが特徴。（もしopacityで要素に指定すると文字や、子要素まで半透明になってしまうため。）
|
1 2 3 |
color: rgb(255, 0, 0); // 透明度も指定できる。 background-color: rgba(0, 0, 0, 0.5); |
HSL
1990年代からある。oklchよりも「明るさ」の仕様が異なる。RGBをベースに算出した値。まあでも今から新規で書くなら積極的に選ぶ理由はないです。（oklchがほぼ上位互換のため）
|
1 2 |
// 色相 0、彩度 100%、明度 50% color: hsl(0 100% 50%); |
oklab
明るさ（L）＋色の方向（a/b）で表現（色を分析・計算しやすい）
あんま使わない。
oklch
2020年代の前半に登場した。色相・彩度・明度で指定します。「人間の見え方に近い」、デザインシステムやアクセシビリティと相性が良い。hslの明るさは「人間の視覚的な明るさに近づくように設計された値」
|
1 2 3 4 5 6 7 |
// 明度（L = Lightness）：60%、彩度（C = Chroma）：0.2、色相（H = Hue）：30° color: oklch(60% 0.2 30); // RGBだと色を変えて明るさを揃えるのが難しい。oklchだと簡単。 --red: oklch(60% 0.2 30); --blue: oklch(60% 0.2 260); --green: oklch(60% 0.2 140); |
UIのprimary、secondaryなどを作るのに便利。
グラデーションに強い
|
1 2 3 4 5 |
background: linear-gradient( 90deg, oklch(60% 0.2 30), oklch(60% 0.2 260) ); |
color-mix
2023年5月に実装されて、2026年にようやく採用されるようになってきた。もしデザイナー不在でもphotoshopとかで明度彩度とかいじってたように直感的に色調整が可能。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.button { background: color-mix(in oklch, blue 80%, white); } // 昔 --primary: #3366ff; --primary-hover: #2952cc; --primary-light: #668cff; // 導入後はこんな感じで行ける。 --primary: oklch(...); --primary-hover: color-mix(in oklch, var(--primary), black 15%); --primary-light: color-mix(in oklch, var(--primary), white 30%); |
light-dark
OSのライト/ダークの設定に合わせるCSS。OSのモード切り替えは2018年ごろから普及して、このプロパティが普及したのは2024年ごろ。
|
1 2 3 4 5 6 |
:root { color-scheme: light dark; --bg: light-dark(white, black); --text: light-dark(black, white); } |
color-scheme
このWebページはライト／ダークのどの配色に対応しています。ということをOSに伝えることができる。
|
1 2 3 |
:root { color-scheme: light dark; } |
ブラウザ自身が持ってるUIをテーマに合わせて変更依頼することができる。
- スクロールバー
- input
CSS変数化
|
1 2 3 4 5 6 7 8 9 10 |
:root { --color-primary: #0066ff; --color-text: #333; --color-background: #fff; } .button { background-color: var(--color-primary); color: var(--color-background); } |
この記事へのコメントはありません。