カラーコード一覧と色見本帳

#ff8a3d——CSSの色指定に出てくるこの暗号のようなコードの読み方と、コピペで使える36色の色見本をまとめました。「悪くない色」を早く決めて、作るほうに時間を使ってください。

カラーコードの読み方

#ff8a3dは、前から2桁ずつ赤・緑・青の強さを表しています。00が最小、ffが最大です。

CSSでの色の書き方は、ほかにも3種類あります。

color: #ff8a3d;                  /* カラーコード（いちばん使う） */
color: rgb(255, 138, 61);        /* 赤・緑・青を0〜255で */
color: rgba(255, 138, 61, 0.5);  /* 最後の数字は不透明度（0で透明〜1でそのまま） */
color: hsl(24, 100%, 62%);       /* ほぼ同じ色を色相・鮮やかさ・明るさで */

HSLの3つの数字は、それぞれ範囲が決まっています。

• 色相（H）……0〜360。色を輪っかに並べたときの角度。0が赤、120が緑、240が青で、360で一周して赤に戻る
• 鮮やかさ（S）……0%〜100%。0%で灰色、100%でビビッド
• 明るさ（L）……0%〜100%。0%で黒、100%で白

HSLの便利なところは、HとSはそのままにLだけ動かせば「同じ色の濃い版・うすい版」が作れること。あとで出てくる「濃淡でそろえる」を、勘ではなく数字でできます。

3桁の省略形と、不透明度つきの4桁・8桁

同じ数字が2つ並ぶ色は、6桁書かなくても3桁に省略できます。#fffは#ffffff（白）、#333は#333333と同じ意味です。既存のコードで3桁の色を見かけたら、この省略形だと分かっていれば読めます。

すけ具合をカラーコードだけで表したいときは、末尾に2桁足す8桁表記も使えます。#ff8a3d80は「オレンジ・不透明度約50%（＝半分すける）」——rgba(255, 138, 61, 0.5)と同じ意味です。4桁は3桁＋1桁の省略形で、#f00cは#ff0000ccと同じ。つまり「3桁と6桁」「4桁と8桁」がそれぞれ省略形と正式な形のペアになっています。

実用カラー12色

ボタン・リンク・見出しなど「主役の色」に使える、はっきりした実用色です。

パステルカラー12色

やさしい・かわいい雰囲気の背景やアクセントに。文字を重ねるなら濃い色の文字と組み合わせてください。

くすみカラー6色

彩度を落とした「ニュアンスカラー」。おしゃれなカフェ風・大人っぽいサイトの主役です。

黒・グレー6段階

いちばん出番が多いのに、意外と迷うのが無彩色。文字・薄い文字・線・背景の定番はこの6つです。

色選びの実用ルール3つ

見本から選ぶとき、この3つを守るだけで「素人っぽさ」がかなり消えます。

• 本文の文字は真っ黒にしない——#000ではなく#333。白背景との強すぎるコントラストがやわらぎ、長文が読みやすくなります
• 使う色は3色まで——ベースの色（白系）・メインの色・アクセントの色。見本から「メイン1色＋アクセント1色」だけ選ぶ気持ちで
• 同じ色の濃淡でそろえる——ボタンは#ff8a3d、その背景は#ffe8d6のように、同系色のうすい版を組み合わせると必ずまとまります

まとめ

1. カラーコードは2桁ずつ赤・緑・青——00が最小、ffが最大。VSCodeのカラーピッカーで調整できる
2. 迷ったらこの見本帳からメイン1色＋アクセント1色、文字とグレーは定番6段階をそのまま使う
3. 本文は#333、色は3色まで、濃淡でそろえる——この3ルールで配色は破綻しない

色決めに10分悩んだら、この見本帳から30秒で選んで先へ進む——そのための1ページです。