ホームページやWebサイトを作成するとき、文字や背景、ボタンなどに色を付けるにはCSSカラーコード（色コード・カラーコード）を使用します。
Webサイト制作を始めると、「#FFFFFF」や「rgb(255, 255, 255)」、「red」のような英数字や記号を目にする機会が増えます。一見すると難しそうに見えますが、これらは色コード（カラーコード）と呼ばれ、コンピューターやブラウザに「この色を表示してください」と伝えるための共通言語です。
CSSやHTMLで色を指定する方法には、主にHEX（16進数）、RGB、カラーネームの3種類があります。それぞれ同じ色を表現できますが、記述方法や特徴、用途が異なります。
「HEXとRGBの違いは？」
「カラーネームだけでも色は指定できる？」
「初心者はどの色コードを覚えればいいの？」
このような疑問を持つ方も多いでしょう。
実際のホームページ制作では、デザインツールやカラーピッカーから取得した色コードをCSSに記述して使用する場面がほとんどです。そのため、色コードの基本を理解しておくと、HTML・CSSの学習だけでなく、Webデザインやサイト制作もスムーズに進められます。
ここでは、CSSカラーコードとは何かをはじめ、カラーネーム・HEX・RGBの意味や種類、違い、それぞれの特徴や使い分けを、ホームページ制作初心者にも分かりやすく解説します。
ホームページを飾る「カラーコード」とは？
カラーコードとは、ホームページ上で表示する色をコンピューターへ伝えるための記述方法です。
Webの世界で色を表現する方法は1つではありません。最もよく使われる指定方法には、「カラーネーム」「HEX（ヘックス）」「RGB（アールジービー）」の3種類があり、さらに最近Web制作の現場で注目されている「HSL（エイチエスエル）」という指定方法もあります。
同じ赤色でもカラーコードが異なります。
「真っ赤」を例にして、それぞれのカラーコードの違いを見てみます。
| HEX | コードの具体例 | 特徴・いつ使うか |
|---|---|---|
| カラーネーム | red | 英語名。約140色しかなく実務向きではない。 |
| HEX | #FF0000 | 16進数。Web制作で最も一般的。 |
| RGB | rgb(255, 0, 0) | 光の三原色。透明度を調整したいときに便利。 |
| HSL | hsl(0, 100%, 50%) | 色相・彩度・輝度で指定。直感的に色を調整できる。 |
どの方法を使っても画面には同じ「赤」が表示されますが、実務では特徴に合わせて使い分けます。
「4つもあるの！？」と驚くかもしれませんが、ホームページ制作の現場でメインで使うのは「HEX」と「RGB」の2つだけです。
新顔の「HSL」は、「色相（Color）・彩度（鮮やかさ）・輝度（明るさ）」のパーセンテージで指定する方法で、直感的に色を明るくしたり暗くしたり調整できるため、最近使う人が増えています。
しかし、初心者のうちは「そういう指定方法もあるんだな」と頭の片隅に置いておくだけで全く問題ありません。
まずは基本であり、最もよく使う「カラーネーム」「HEX」「RGB」の3つの意味を紹介します。
色コードが使われる場所
カラーコードはホームページのさまざまなデザインに使用されます。
例えば、次のような場面です。
・文字色
・背景色
・ボーダー（枠線）
・ボタン
・アイコン
・見出し
・メニュー
・リンクカラー
CSSでは、このような色を自由に指定できるため、ホームページ全体のデザインを統一できます。
※実際の色の付け方については、CSSの色指定方法を解説した記事を確認してください。
種類①：カラーネーム（英語表記）〜最も手軽な名前指定〜
カラーネームとは、red（赤）、blue（青）、black（黒）のように、色の英語名をそのままコードに書く指定方法です。
例えば、
・red
・blue
・green
・black
・white
・gold
・tomato
・skyblue
などがあります。
CSSでは次のように指定できます。
color: red;
数値を覚える必要がなく、見たままの名前で指定できるため、初心者でも扱いやすい方法です。
ただし、使用できる色は約140色しかなく、あらかじめ決められた名前に限られます。デザイナーが指定する「絶妙なニュアンスの色」の表現はできません。
細かな色の違いを表現したい場合は、HEXやRGBを使用するのが一般的です。
使用できる一覧は「CSS色コード・カラーコード一覧」の記事を確認してください。
種類②：HEX（ヘックス・16進数）〜Web制作の王道・一番人気〜
HEXは、16進数で色を表現するカラーコードです。
#（シャープ）の後に6桁の英数字（0〜9、A〜F）を続ける方法で、「ヘックス」や「16進数コード」と呼ばれ、Web制作で最も頻繁に使われます。
例えば、
・#FFFFFF = 白
・#000000 = 黒
・#FF0000 = 赤
・#00FF00 = 緑
・#0000FF = 青
などがHEXカラーコードです。
「#」の後ろに6桁の英数字が並び、それぞれ赤（Red）、緑（Green）、青（Blue）の色の強さを16進数で表しています。
ホームページ制作では最も利用されている色指定方法であり、多くのデザインツールやカラーピッカーでもHEX形式が採用されています。
実務では #FFFFFF を #FFF、#000000 を #000 のように「3桁」に省略して書くことがよくあります。
「2桁ずつ同じ英数字が連続するときは1文字に縮めていい」というルールがあるためです。
他人のコードを見たときにびっくりしないよう、覚えておきましょう。
詳しい色一覧は、HEXカラーコード一覧を紹介した、「CSS色コード・カラーコード一覧！ホームページHTMLをコピペで色装飾」の記事を確認してください。
種類③：RGB（アールジービー）〜透明度も操れる万能指定〜
RGBは、コンピュータの画面が色を表現する仕組み（光の三原色：Red（赤）、Green（緑）、Blue（青））そのままで指定する方法で、Red・Green・Blueの3つの光の組み合わせで色を表現します。
RGBでは、それぞれの色を0〜255の10進数の数値で指定します。
例えば、
rgb(255,255,255) = 白
rgb(0,0,0) = 黒
rgb(255,0,0) = 赤
rgb(0,255,0) = 緑
rgb(0,0,255) = 青
となります。
最大の強み「RGBA」で透明度を指定
RGBの最大のメリットは、色の後ろに「透明度（不透明度）」をプラスできる点です。通常の rgb() の後ろに a をつけて rgba() と書き、4つ目の数字に「0（完全に透明）〜1（完全に不透明）」の数値を指定します。
・rgba(0, 0, 0, 0.5) ＝ 黒色の透明度を50%（半分透けている状態）にする
おしゃれなホームページでよく見かける「背景が少し透けて後ろの画像が見えるデザイン」は、すべてこのRGB（RGBA）を使って作られています。
どれを使えばいい？カラーネーム・HEX・RGBの違いと使い分け
3つの特徴が分かったところで、初心者が迷わないための「使い分けの黄金ルール」をまとめました。
1．基本は「HEX」を使う！
初心者が自分のホームページ作りでHEXをメインに使うべき理由は、「ネット上の情報や便利ツールが、すべてHEXを中心に作られているから」です。
・ネットで「おしゃれな配色」や「おすすめのカラー」を検索したとき、紹介されているコードの9割以上が #ffffff のようなHEX形式です。
・カラーピッカーなどの便利ツールも、最初にパッと表示されるのはHEXコードです。
つまり、HEXを使っておくのが「一番調べやすく、迷わない」ため、普段のホームページ作りはすべてHEXを使って進めるのがベストです。
2．背景を透けさせたいときだけ「RGB（RGBA）」を使う！
「要素の後ろを透けさせたい」「少し透明な黒にしたい」という場面でのみ、透明度が扱えるRGB（RGBA）に切り替えます。
3．カラーネームは練習用！
本番用のホームページでは使用を控えましょう。
わざわざ難しい英数字のコードを使うのには、ホームページ制作において非常に大きなメリットがあるからです。
・デザインを統一できる：「このサイトのメインカラーは #3182ce（鮮やかな青）」と決めておけば、サイト全体のボタンやリンクの色を完全に統一できます。
・同じ色を正確に再現できる：人間の「明るい赤」という言葉は曖昧ですが、#FF0000 と指定すれば、世界中のどのパソコンで見ても寸分違わぬ「同じ赤」を再現できます。
・Web制作で標準的な指定方法：世界中のプロのエンジニアやデザイナーがこの方法で色をやり取りしているため、覚えておけば実務でそのまま役立ちます。
色コードの調べ方
「こんな色を使いたい！」と思ったとき、コードを自力で計算する必要はありません。以下の方法を使えば、一瞬で調べることができます。
・カラーピッカー
インターネット上で「カラーピッカー」と検索すると、画面上で直感的に色を選んでHEXやRGBを出力してくれるツールがたくさん見つかります。
当サイトでも、初心者向けに直感的に使える[カラーピッカーツール]を用意していますので、ぜひお気に入りの色を探してみてください。
・デザインツール
プロが使う「Figma」や「Adobe Photoshop」「Illustrator」などのデザインツールには、必ず色コードを表示する欄があります。デザイナーから引き継いだデザインデータから、コードをそのままコピーしてコーディングを行います。
よくある質問（FAQ）
Q. カラーネームだけでもホームページは作れる？
A. 技術的には作れますが、おすすめしません。
表現できる色が140色しかないため、思い通りのデザインに仕上げることができません。早い段階でHEXでの指定に慣れておくのがベストです。
Q. 色コードはHTMLとCSSのどちらに書く？
A. 原則として「CSS」に書きます。
HTMLは文章の構造を作るもの、CSSは見た目を飾るものです。具体的な色コードを使った文字色や背景色の装飾方法は、別記事で詳しく解説しています。
Q. HEXとRGBは相互変換できる？
A. 簡単に変換できます！
仕組みが違うだけで中身は同じ「色」を指しているため、ネット上の変換ツールや、Googleの検索窓に色コードを入れるだけで、もう一方のコードへ一瞬で変換してくれます。
