CSSで使える「カラーネーム」140色

例えば文字を 赤 にしたい時。
「あれ？赤のカラーコードってなんだっけ？」と迷わずとも以下のように書けば赤くなります。

<span style="color: red;">赤くしたい文字</span>

表を別ページに移動しました。

CSの色指定の基本は10進数と16進数

赤の10進数(Decimal デシマル) --- rgb(255, 0, 0)
赤の16進数(Hexadecimal ヘキサデシマル) --- #ff0000
赤のカラーネーム --- red

CSSの色コード指定の推奨は10進数です。
みなさんにより馴染みがあるのは16進数の方だと思います。
個人的にもカスタマイズをよくされる方へはなるべく10進数を用いると良いと思います。

推奨は10進数

明度調整が簡単

例えば上記のような青系の背景を持つ要素があったとします。
少し色味がキツいので淡くしたいが色のテイストは変更したくない、という場合。
rgbカラーの場合 rが赤、gが緑、bが青 を意味し、それぞれの配分で決まります。
0により近いと黒系に、255により近いと白系になります。

色の混ざり具合が微妙な色合いを決めていますので、この配分を動かさずに淡くするには3つの数値をそれぞれ 255 に近づけることで実現します。同数値をこの3つに足せば良いわけです。
それぞれ30を足してみます。

255がmax値なのでそれを超えないようにします。
サンプルとは反対に濃くしたい場合は255の逆の0に近づけます。

こうして簡単に色の 明度 を変更することができ、16進数よりも直感的な操作が可能です。

不透明度指定が簡単

透明度ではなく 不透明度 です。
色の透け具体を指定するには rgba() (rgba function)を用います。
rgbの10進数に a (alpha アルファ = 不透明度)が追加されたものです。

先程の明度調整とは異なり、この青い色は透けていますので、仮に後ろに背景画像などがあればそれがうっすらと見えることになります。

10進数ならば簡単に不透明度を追加することができます。16進数ではできません。

不透明を設定する際に opacity を利用することがあり、「背景透過」と説明されていることがありますが間違いです。
opacityはやはり 不透明度 指定です。
そして 背景だけでなく前景も透過します。

下の青いボックスには rgb(83, 104, 195) と書いてありますが、背景の青色はもとより前景のテキストまでも透過の影響を受けて薄くなり、結果読めなくなってるのがわかります。

直感で使える「カラーネーム」

webセーフカラー というのがありますが、こちらは OS間で差異なく表現できる240色 のことを指します。
それとは別でhtmlには 全ブラウザ間で差異なく表現できる140色 を規定しています。
その140色については カラーネームの使用が認められています。

webセーフカラーネーム一覧 (web safe color name)

各文字列クリックでコピーできます。「最適」の項目は、各カラーネームを背景にしたときに最適な文字色を10進数で表記しています(WCAG 2.1準拠)「適」の項目は最適が無い場合の文字色です。 「適」の場合はより合格指数の高いものを記載していますが、個人差で反対色の方が見やすい場合もあります。...

vanillaice000.blog.fc2.com

まとめ

気に入った色はカラーネームを覚えておくとCSSですぐに適用できます。
良く利用する「black」「white」「gray」「red」... などなど。
カラーコードを探すよりも遥かに楽だと思いますので活用されると良いと思います。