CSSで色を指定する方法はいくつかあります。どれを使っても同じ色が出せますが、意味を知っていると調整が楽になります。

書き方は主に4つ

  • 色名 … red、blue など。約140種類。手軽だが微調整できない
  • 16進数 … #0f6fd1 のような形。実務でいちばん使われる
  • rgb() … rgb(15, 111, 209) のように、赤・緑・青を0〜255で指定
  • hsl() … 色相・鮮やかさ・明るさで指定。調整しやすい

16進数の6文字を分解する

#0f6fd1 は、実は2文字ずつの3つの組です。順に「赤」「緑」「青」の量を表しています。

  • 0f … 赤の量（少ない）
  • 6f … 緑の量（中くらい）
  • d1 … 青の量（多い）

各2文字は00からffまでで、00がゼロ、ffが最大です。だから #000000 は全部ゼロで黒、#ffffff は全部最大で白になります。青が多い #0f6fd1 は青系の色、というわけです。

同じ文字が2つずつ並ぶときは3文字に省略できます。#ffffff は #fff、#000000 は #000 と書けます。

CODE数字をいじって色を作るコードを書き換えると、すぐ下で動きます

16進数の値を書き換えてみてください。最初の2文字を ff にすると赤が最大になり、色ががらりと変わります。

透明度を足す

色を半透明にしたいときは、rgba() を使うか、16進数を8文字にします。最後の2文字が透明度で、00が完全に透明、ffが不透明です。

CODE半透明を重ねるコードを書き換えると、すぐ下で動きます

rgba の最後の数字（0〜1）が透明度です。0.2 や 0.9 に変えて、下の色の透け方を見てください。

hsl は「同じ系統で明るさ違い」を作りやすい

hsl は、色相（0〜360の角度）、鮮やかさ、明るさで指定します。3つ目の数字を変えるだけで、同じ色味の濃淡が作れるのが便利です。ボタンのホバー時に少し暗くする、といった調整に向いています。

CODE明るさだけを変えるコードを書き換えると、すぐ下で動きます

3つの色は、色相と鮮やかさが同じで明るさだけが違います。最後の % の数字を変えてみてください。

文字色は必ずコントラストを確認する

背景と文字の明るさの差が小さいと読めません。基準は、本文なら4.5倍以上の差（コントラスト比4.5:1）です。検証ツールで文字色をクリックすると、比率が表示されます。おしゃれな薄いグレーは、たいていここで基準を下回ります。

色を決められないときは

色選びに正解はありませんが、迷ったら「基本の色を1つ決めて、あとは明るさ違いで作る」のが失敗しにくい方法です。色数を増やすほど難しくなるので、まずは1色＋グレーで組み立ててみてください。