色の指定はいろいろ書ける

CSS では、同じ色をいくつもの記法で書けます。どれを使っても結果は同じ色ですが、書き方によって調整のしやすさが変わります。代表的な記法を見ていきます。

HEX と rgb()

もっとも見かけるのが 16 進数（HEX）と rgb() です。近年は成分を空白で区切り、スラッシュのあとに不透明度を書けます。

#ff6347
#f63
rgb(255 99 71)
rgb(255 99 71 / 50%)

hsl() と hwb()

色相・彩度・明度で書く hsl() は、色みを保ったまま明るさだけ調整する、といった操作が直感的です。hwb() は色相に白と黒をどれだけ混ぜるかで表します。

hsl(9 100% 64%)
hwb(9 28% 0%)

oklch()（新しい記法）

oklch() は知覚的に均等な色空間にもとづく新しい記法です。明度をそろえた配色や、なめらかなグラデーション、広色域の色を扱うのに向きます。

oklch(0.7 0.19 30)

名前と currentColor

tomato や rebeccapurple のような色名、文字色を引き継ぐ currentColor、完全な透明の transparent も使えます。currentColor はアイコンの色を文字色に合わせるときに便利です。

まとめ

このツールが表示する HEX・RGB・HSL は、そのまま CSS に貼って使えます。細かな調整のしやすさで記法を選び、明度をそろえたいときは oklch() も検討するとよいでしょう。