ホームページやWebサイトを作るとき、文字や背景、ボタンなどに色を付けるために使われるのが**色コード（カラーコード）**です。
Webサイトで表示される色は、実はすべてディスプレイの「光の三原色」である**RGB（赤・緑・青）**をもとに作られています。そして、そのRGBの数値をわかりやすく記述するために、色コードという形で指定しています。
普段何気なく見ているホームページの色も、CSSやHTMLに色コードとして記述されており、その情報をもとにブラウザが正確に同じ色を再現しています。
色コードには主に**HEX（16進数）・RGB・色名（カラーネーム）**の3種類があり、すべて同じ色を表現できますが、それぞれ書き方や特徴、使いやすさが異なります。特にHEXはRGBの数値を16進数で表したもので、Web制作ではよく使われる表記方法の一つです。
また、「#FFAA55」や「rgb(255, 255, 255)」、「blue」のように、初心者には一見すると意味が分かりにくい表記も多く、どれを使えばよいのか迷うことも少なくありません。
ここでは、ホームページ制作における色コードの基本として、色コードとは何か、HEX･RGB･色名のカラーコードの種類ごとの違い、そして初心者にとって分かりやすい選び方までを整理して解説します。
Contents
色コードとは？
色コード（カラーコード）とは、ホームページで表示する色をパソコンやブラウザへ正確に伝えるための情報です。
人間には「赤」や「青」といった色の名前で伝わりますが、コンピューターは色を言葉で理解することはできません。そのため、英数字や記号を組み合わせた色コードを使用して、「どの色を表示するのか」を指定します。
例えば、次の3つはすべて赤色を表す色コードです。
RGB：rgb(255, 0, 0)
HEX：#FF0000
色名（カラーネーム）：red
表記方法は異なりますが、いずれもブラウザに「赤色を表示してください」と指示している点は共通しています。
ホームページ制作では、これらの色コードをホームページの骨組みを作る「HTML」や、見た目を飾る「CSS」の中で使用し、文字や背景、ボタン、枠線など、さまざまな要素の色を指定します。
現在はCSSで色を指定する方法が一般的であり、本記事ではCSSで使用される代表的な色コードについて解説します。
HTML・CSSで色コードを使う具体例
ホームページでは、文字や背景、ボタンなど、さまざまな要素に色コードが使用されています。
例えば、CSSでは次のように色を指定できます。
/* 文字色 */
color: #FF0000;
/* 背景色 */
background-color: rgb(255, 255, 255);
/* 枠線の色 */
border-color: red;
このように、文字色・背景色・枠線などを色コードで指定することで、ホームページ全体のデザインを統一できます。
下記のサンプルコードでは、HTMLの<p>タグ内の（段落）に対して、CSSでcolor: #0000FF;を指定しています。#0000FFが色コードで、この指定によって段落の文字が青色で表示されます。
color: #0000FF;
}
なお、HTMLでも色を指定する属性は存在しましたが、現在のホームページ制作ではCSSで色を指定する方法が標準です。そのため、本記事ではHTML・CSSで使用される色コードとして解説しています。
なぜホームページには「色コード」が必要なのか？
そもそも、ホームページ制作ではなぜ「赤」「青」といった言葉ではなく、わざわざ#FF0000のような英数字の**色コード（カラーコード）**を使うのでしょうか。その理由は大きく分けて3つあります。
Webサイトの色はユーザーの印象（UI/UX）に大きく影響する
Webサイトの色は、ユーザーが受ける印象に大きく影響します。
例えば同じ内容のサイトでも、青系は「信頼感」、赤系は「注意や強調」、緑系は「安心感」といったように、色によって伝わる印象が変わります。
そのため、適切な色コードを使って色をコントロールすることは、見やすく使いやすいWebサイト（UI/UX）を作るうえで重要です。
色はブランドイメージの統一にも重要
ホームページでは、色はブランドイメージを伝える役割も持っています。
企業やサービスでは「ブランドカラー」が決まっていることが多く、その色を一貫して使用することで、ユーザーに覚えてもらいやすくなり、信頼感や統一感のあるデザインになります。
もし色の指定が曖昧だと、ページごとに色味が変わってしまい、ブランドイメージが崩れてしまう可能性があります。
色コードを使うことでデザインの再現性が高まる
色コードを使う大きなメリットは、デザインの再現性です。
例えば「赤」といっても人によって認識が異なりますが、#FF0000のように色コードで指定すれば、どのブラウザやデバイスでも世界中で同じ色を表示できます。
色コードを統一することで、デザイナーと開発者の間でも色のズレが起きにくくなり、
・ロゴ
・ボタン
・見出し
・リンク
など意図した通りのデザインを正確に再現することができます。
色コードの種類
ホームページ制作で使用される色コードには、いくつかの指定方法があります。どの方法も最終的には同じ色を表現できますが、書き方や特徴、用途が異なるため、それぞれの違いを理解しておくことが大切です。
CSSでは主に次の4種類の色指定方法が利用できます。
RGB
RGBは、**Red（赤）・Green（緑）・Blue（青）**の3つの光の強さを組み合わせて色を表現する方法です。
例えば、
rgb(255, 0, 0)
は赤色を表します。
それぞれ0～255の数値で指定するため、色の仕組みを理解しやすく、CSSでもよく利用されています。
HEX（ヘックス）
HEX（ヘックス）は、「#」に続けて6桁の16進数で色を表現する方法です。
例えば、
#FF0000 は赤色、
#FFFFFF は白色、
#000000 は黒色
を表します。
Web制作で最も広く使われている色コードで、多くのデザインツールやカラーピッカーでもHEX形式が標準として採用されています。
色名（カラーネーム）
色名（カラーネーム）は、色を英語名で指定する方法です。
例えば、red、blue、green、black、whiteなど、CSSであらかじめ定義されている色名をそのまま使用できます。
書き方が分かりやすいため初心者でも扱いやすい一方、指定できる色は決められた名称に限られます。
HSL（色相・彩度・明度）
HSLは、**色相（Hue）・彩度（Saturation）・明度（Lightness）**の3つの要素で色を指定する方法です。
色の明るさや鮮やかさを直感的に調整できるため、Webデザインやテーマカラーの管理などで利用されることがあります。
💡 HSLは初心者の方はスルーでOK！
CSSではこの「HSL」も使えますが、色を感覚的に微調整する中級者〜上級者向けの少し難しい書き方です。
ホームページ制作を始めたばかりの方は、まずRGB・HEX・色名の3種類を理解することをおすすめします。
HSLは「そんな書き方もあるんだな」という概念だけ頭の片隅に置いておけば問題ありません。
そのため、この記事では、基本となる上の3種類（RGB・HEX・色名）を詳しく解説していきます。
HSV / HSB（エイチエスブイ / エイチエスビー）
HSV（またはHSB）は、色相（Hue）・彩度（Saturation）・明度（Value または Brightness）の3つの要素で色を指定する方法です。
HSVとHSBは呼び方が異なるだけで、まったく同じ仕組みを指しています。
HSLと名前は似ていますが、HTMLやCSSのコードとして直接Webサイトに記述することは基本的にはありません。
主にFigmaやPhotoshopなどのデザインツールで、直感的に色を調整・選定する際に利用されます。ツール上でこの形式を使って色を決め、最終的に「HEX（16進数）」に変換したコードをWeb制作に利用するのが一般的な流れです。
💡 「HSV / HSB」は覚えなくてOK！
デザインツール（Figmaなど）の画面で見かける「HSV」や「HSB」という言葉もありますが、これはWebのコードとしては一切使いません。そのため、ホームページ制作の学習において、この形式を覚える必要は一生ありません。
💡 WEBコードに使わないのに、なぜHSV/HSBは重要？
HSV（Hue=色相、Saturation=彩度、Value=明度）およびHSB（B=Brightness）は、人間の感覚に最も近い直感的な調整ができるためです。
・直感的な色変更ができる：
「この赤色を、ベースは変えずに少し暗くしたい」「パステル調にしたい」というとき、RGBやHEXでは3つの数値を複雑に変える必要があります。しかし、HSV/HSBなら「明度（V/B）」や「彩度（S）」の数値を下げるだけで簡単に調整できます。
・デザインツールでの連携：
Figma、Adobe Photoshop、Illustrator などのカラーピッカーは、基本的にHSV/HSBの仕組みを採用しています。
RGBとは？
RGB（アールジービー）とは、テレビやパソコンの画面が色をつくる仕組み「光の三原色」をそのまま使って色を指定する方法です。人間が頭の中でイメージする色の感覚に一番近い指定方法です。
Red（赤）、Green（緑）、Blue（青）の頭文字を取って「RGB」と呼ばれており、ホームページ制作において「すべての色の土台」となる最も重要な考え方です。
ディスプレイは「光」を使って色を作っているため、赤・緑・青の3色の光の色の強さを、それぞれ0～255の10進数の数値で指定し、その組み合わせによって約1,677万色（256×256×256）の色を再現しています。
数値を見ただけで「少し暗くしよう」「少し鮮やかにしよう」という調整が直感的に行えます。
例えば、代表的なRGBカラーコードは次のとおりです。
| 色 | RGBカラーコード |
|---|---|
| 黒 | rgb(0, 0, 0) |
| 白 | rgb(255, 255, 255) |
| 赤 | rgb(255, 0, 0) |
| 緑 | rgb(0, 255, 0) |
| 青 | rgb(0, 0, 255) |
rgb(255, 0, 0); では、赤（Red）を255、緑（Green）と青（Blue）を0に指定しているため、赤色が表示されます。
CSSでは、次のように記述します。
color: rgb(255, 0, 0);
このように、RGBはWeb上の色を作るための**基本となる仕組み（ベース）**で、次に紹介するHEXはこのRGBを別の形式で表したものです。
RGBが使われる場面
ホームページ制作では、通常はHEXがよく使われますが、RGBが使われる場面もあります。
例えば、透明度を指定できるRGBAへ変更しやすいことから、背景色やオーバーレイなど透明効果を加えたい場合に利用されることがあります。
また、JavaScriptで色を動的に変更する場合や、CSSの一部機能ではRGB形式が使われることもあります。
初心者の方は、まずHEXカラーコードを覚え、その後RGBも理解しておくと、ホームページ制作で色コードを扱う際の理解がより深まるでしょう。
HEX（ヘックス）とは？
HEX（ヘックス）とは、16進数を使って色を表現する色コードです。CSSで最も広く利用されている色指定方法で、多くのホームページやWebサイトで採用されています。
書き方は、「#」に続けて6桁の英数字を記述します。
#RRGGBB
「RR」は赤（Red）、「GG」は緑（Green）、「BB」は青（Blue）の強さを表しており、それぞれ00～FFの16進数で指定します。
「英数字が混ざっていて難しそう」と感じるかもしれませんが、ただの「16個で1周する数え方」であり、「Fに近づくほど色が濃く（強く）なる」だけです。
色コードの #FF0000（赤）でいうと、最初の2桁「FF」は赤の強さを表しています。
00が「ゼロ（全く色がない状態）」で、FFが「MAX（これ以上ないくらい限界まで強い状態）」という意味になります。
例えば、代表的なHEXカラーコードには次のようなものがあります。
| 色 | HEXカラーコード |
|---|---|
| 黒 | #000000 |
| 白 | #FFFFFF |
| 赤 | #FF0000 |
| 緑 | #00FF00 |
| 青 | #0000FF |
なぜHEXが最もよく使われるの？
ホームページ制作では、HEXが最も一般的な色コードです。
その理由は、多くのWebデザインツールやカラーピッカーがHEX形式を標準として採用しているためです。Web制作の現場でも広く使われており、サンプルコードやテンプレートもHEXで記述されているケースが多く見られます。
そのため、ホームページ制作を学ぶ際は、まずHEXカラーコードを理解しておくと、多くの場面で役立ちます。
HEXのCSSでの書き方
HEXカラーコードは、CSSでは次のように使用します。
color: #0000FF;
}
この例では、HTMLの見出し（<h1>）の文字色を青色に指定しています。
3桁のHEXカラーコードとは？
HEXカラーコードには、6桁のほかに3桁で省略して記述できる場合があります。
例えば、
#FFFFFF → #FFF
#000000 → #000
#FF0000 → #F00
のように、それぞれの値が同じ数字で並んでいる場合は、省略形を使用できます。
ただし、省略できるのは**「FF」「00」「CC」のように各2桁が同じ値の場合だけ**です。すべてのHEXカラーコードを3桁に短縮できるわけではありません。
なお、大文字の #FFFFFF と小文字の #ffffffは、ブラウザの認識としては完全に同じです。どちらを使ってもエラーにはなりません。
コードの美しさを保つために、同じプロジェクト内（チーム内）ではルールを統一した方がいいでしょう。
私たちが普段の生活で使っているのは「10進数」です。これは、0からスタートして9までいくと、次は桁が上がって10になりますよね。つまり、「10集まると1桁上がる数え方」です。
一方、コンピュータの世界でよく使われる「16進数」は、「16集まると1桁上がる数え方」をします。
「でも、9の次の数字なんてないよ？」と思いますよね。そこで16進数では、9の代わりにアルファベットの「A～F」を数字として使います。
10進数（いつもの数え方）：0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
16進数（カラーコード）：0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
つまり、16進数の世界では「F」が一番大きい数字（10進数でいう9のような存在）になります。
RGBとの関係
結論から言うと、「HEXの中身はまったくRGB（赤・緑・青の量）と同じで、ただ書き方（数字の数え方）を変えただけ」です。
RGBの「0〜255」という3桁の数字を3つ並べると、コードが長く（例：rgb(255, 255, 255)）なってしまうので、この数値を特別な数え方（16進数）を使って、「2桁の英数字」にギュッと凝縮して短く書き換えたのがHEX（#FFFFFF）です。
つまり、RGBで表される色を別の形式で記述した表現方法で、いわば「同じ色を違う書き方で表した親戚のような存在」です。そのため、指定できる色の種類や数（約1,677万色）はRGBと同じです。
例えば、赤色は次のように表現できます。
RGB：rgb(255, 0, 0)
HEX：#FF0000（RGBの255を「FF」、0を「00」と言い換えただけ）
どちらもブラウザには同じ赤色として表示されます。
このように、パソコンの画面が色を表現するベースには常に「RGB」があり、それを私たちが扱いやすいように短くラベリングしたものが「HEX」である、という関係性を知っておくと、色コードへの理解がグッと深まります。
HEXとRGBの違い
| 項目 | HEX | RGB |
|---|---|---|
| 書き方 | #FF0000 | rgb(255,0,0) |
| 読みやすさ | △ （慣れると短く扱いやすいが、最初は暗号のように見えるやや見慣れない表記） | 〇 （10進数で直感的にわかり、仕組みを理解しやすい） |
| 利用度 | ◎ | 〇 |
| 透明度の指定 | △ （8桁表記（#RRGGBBAA）で透明度も指定できるが、あまり一般的ではない） | ◎ （RGBA形式を使うことで透明度を直感的に指定できる） |
色名（カラーネーム）とは？
色名（カラーネーム）とは、その名の通り red（赤）や blue（青）、black（黒）のように、色の英語名をそのままコードに書き込む方法です。
color: red;
background-color: blue;
このように、英単語をそのまま記述するだけで色を指定できるため、初心者でも直感的に理解しやすいのが特徴です。
color: red; /* 文字を赤色にする */
}div {
background-color: yellow; /* 背景を黄色にする */
}
色名で指定できる主な色
CSSでは、基本的な色だけでなく多くのカラーネームが用意されています。
・red
・blue
・green
・black
・white
・gray
これらはブラウザ側であらかじめ定義されているため、特別な計算や数値指定をしなくても色を表示できます。
色名（カラーネーム）は本番のホームページ制作では使われない
色コードを覚えなくても、redと書くだけで同じ色を指定できますので、一見すると一番簡単で便利に思えますが、実際のホームページ制作（実務の現場）で色名（カラーネーム）が使われることはほぼありません。
理由は主に3つあります。
・ブランドカラーやデザインを正確に再現できない
実務のWeb制作では、企業の「ブランドカラー」や、デザイナーが作成したデザインに合わせた「寸分狂わぬ細かい色指定」が求められます。しかし、色名（カラーネーム）ではあらかじめ用意された大まかな色しか選べないため、企業のイメージカラーを正しく表現したり、こだわりのデザインを忠実に構築したりすることができません。
・表現できる色が少なすぎる
ブラウザが認識できる色名は約140色しかありません。「もう少しだけ明るい水色にしたい」「大人っぽい落ち着いたベージュにしたい」といった、細かいこだわりを表現することが不可能です。
・色の名前を覚えるのが大変
定番の red や blue は分かりますが、少し凝った色にしようとすると tomato（トマトのような赤）や dodgerblue（鮮やかな青）など、特殊な色の名前をいちいち検索して調べなければならず、かえって効率が悪くなってしまいます。
これらのことから、色名はあくまで「コーディングの練習中に、とりあえずパッと色が変わるかテストしたいとき」だけの補助的な機能として理解しておくのがベストです。
どの色コードを使えばいい？初心者の選び方・使い分けの基準
基本は「HEX」を使い、特定の場面で「RGB」を呼び出すという使い分けが一番スマートです。
基本はHEXを使えばOK
普段のホームページ制作では、文字の色も背景の色も、すべて「HEX（#〜）」を使って書き進めれば間違いありません。なぜなら、HEXはWeb制作の世界における絶対的な標準（スタンダード）だからです。
インターネットで「おしゃれな配色パターン」を検索したときに出てくるコードのほとんどがHEX形式ですし、カラーピッカーツールでも一番目立つ場所に表示されます。
さらに、プロが使うデザインツールでもHEXが標準で採用されているため、コピペしてそのまま使いやすいという圧倒的なメリットがあります。
一番調べやすく、一番周りの人も使っているため、普段はHEXだけをメインの武器にしてください。
RGBは調整したいときに使う
デザインを細かく「調整」したい場面が来たら「RGB」の出番です。
RGBは、私たちが普段使い慣れている「0〜255の数字」で色を指定するため、「赤みをもう少しだけ強くしたいから、最初の数値を20上げてみよう」といった直感的な微調整に向いています。
さらに、RGBの書き方を少し進化させると、色を「半透明」に透けさせることができる応用技（RGBA）が使えるようになります。ホームページの背景をうっすら透けさせておしゃれにしたいと思ったタイミングが、RGBに切り替える最大のサインです。
色名は学習用として
red（赤）や blue（青）といった色名は、あくまで「学習用・テスト用」として割り切ってください。
英単語を入力するだけでパッと色が変わるため、本で勉強しているときや、「コードが正しく動いているか、とりあえず一瞬で確認したい！」という時の補助としては非常に便利です。
ただし、本番のホームページ制作ではほとんど使えませんので、「学習のときだけの便利なショートカット機能」として使っていくのがベストです。