CreaTools LogoCreaTools
Tech Notes
Color Palette

Webデザインの配色、最低限これだけ知っておけば大丈夫

2025-11-10

:::note ※配色の基本を知りたい人向けの「入門」記事です :::

結論（私の判断基準）

  • 色の指定：基本はHEX。調整が必要なときだけHSL
  • 色数：3〜4色で十分。グレーはカウント外
  • 彩度：60〜70%程度に抑える。100%は事故る

私は調整が必要なとき以外、HSLは使わない。理由は、色相より「明るさ」の事故が多いから。明るさは目で見て調整する。

🚀 配色を作る → Color Palette Generator

色の三属性

属性説明私が気にする順
明度（Lightness）明るさ最優先。コントラストに直結
彩度（Saturation）鮮やかさ次に見る。高すぎると目が疲れる
色相（Hue）赤・青・黄などの色味最後。ここは好みの問題

私は色相より明度を先に見る。コントラストが取れなければ、どんな色も意味がない。

60-30-10 ルール

割合役割私の使い方
60%ベースカラー白か薄いグレー。ここで冒険しない
30%サブカラーカードの背景。ベースより少し濃いだけ
10%アクセントカラーボタン、リンク。ここだけ色を使う

正直、ベースとサブは「白系」「グレー系」で十分。アクセントの10%だけ色を考える。

よくある失敗（私が見たケース）

失敗1：彩度が高すぎる

/* ❌ 原色に近い。目が疲れる */
background: hsl(210, 100%, 50%);

/* ✅ 彩度を下げた */
background: hsl(210, 65%, 55%);

彩度100%はほぼ使わない。60〜70%で十分鮮やか。

失敗2：コントラストが足りない

グレーのテキストを白背景に置いた。「洗練されてる」と思ったが、「読みにくい」とクレームが来た。

本文テキストと背景のコントラスト比は4.5:1以上。これは絶対。

失敗3：グレーが無機質

/* ❌ 純粋なグレー。冷たい印象 */
color: hsl(0, 0%, 50%);

/* ✅ 青みを少し混ぜる。温かみが出る */
color: hsl(210, 10%, 50%);

グレーにベースカラーを5〜10%混ぜると、統一感が出る。

ダークモードのポイント

単純な反転では目が疲れる。

要素ライトモードダークモード
背景#FFFFFF#121212（真っ黒ではない）
テキスト#1F2937#E0E0E0（真っ白ではない）

私は背景を#000000（真っ黒）にしない。コントラストが強すぎて目が疲れる。

迷ったときの判断

迷い私の判断
色の指定方法HEX。調整するときだけHSL
彩度をどうするか60〜70%。100%は使わない
グレーをどうするかベースカラーを5〜10%混ぜる
ダークモードの背景#121212。真っ黒は使わない

この記事で解決しない場合

色数は3〜4色で十分。彩度は60〜70%。コントラスト比4.5:1以上。これだけ守れば事故らない。