ホームページの色コードとは？HEX・RGB(A)・HSL(A)のカラーコードの違いと使い方を解説

ホームページやWebデザインでは、文字色や背景色、ボタンの色などを「色コード」で指定します。

例えば、白は「#FFFFFF」、黒は「#000000」といったように、色を数字や英字の組み合わせで表現します。

しかし、
・色コードとは何？
・HEXとRGBは何が違う？
・どれを使えばいい？
・ホームページ制作ではどう指定するの？
と疑問に感じる方も多いでしょう。

ここでは、ホームページ制作で使われる色コードの仕組みからHEX・RGB・RGBA・HSL・HSLAのカラーコードの種類の違い、使い方、実務での使い分け方までわかりやすく解説します。

色コードとは？なぜホームページには「色コード」が必要なのか？

色コードとは、色を数値や文字列で表現する仕組みです。

人間は「赤」「青」「緑」といった言葉で色を認識しますが、コンピュータは言葉だけでは正確な色を理解できません。
そのため、色を数値化した「色コード」を利用して、世界中のブラウザや端末で同じ色を表示できるようにしています。

人間のとコンピュータののズレを防ぐ
例えば「赤」と聞いても、人によって思い浮かべる色は異なります。

・真っ赤
・少し暗い赤
・オレンジに近い赤
など、人によってイメージが変わります。

しかし「#FF0000」と指定すれば、誰が見ても同じ赤として表示されます。

Webサイトのデザインシステム（一貫性）を保つため
企業サイトやECサイトでは、ページごとに色が変わるとブランドイメージが崩れてしまいます。

色コードを統一することで、
・ロゴ
・ボタン
・見出し
・リンク
などのデザインを一貫して管理できます。

なぜRGBなのか？Webと印刷物の違い
Webは 光（ディスプレイ） で色を表現するため、RGB（赤・緑・青）を基準とした色空間 を使います。

一方、チラシやパンフレットなどの印刷物は、インクの三原色であるCMYK（Cyan・Magenta・Yellow・Key plate）を使います。

Webと印刷物では色の根本的な仕組みが異なるため、ホームページ制作では必ずWeb用のルール（RGBベース）に従う必要があります。

ホームページでよく使う色コードの種類と特徴

Web制作の現場で使われる、主要な3つの形式とその特徴を解説します。

① HEX（16進数カラーコード）

・書き方例：#FF0000（赤）、#333333（濃いグレー）

・特徴：Web制作で最も一般的な形式です。シャープ（#）の後に、16進数（0?9、A?F）の英数字を6桁続けて書きます。2桁ずつが左から「赤・緑・青（R・G・B）」の強さを表しています。

・メリット：文字数が短く、CSSにコピペしやすいため、全体のコードがすっきりします。

【補足】3桁・6桁・8桁の違い
・#FFF（省略形）：#FFFFFF のように、2桁ずつの値が同じ場合に3桁に縮めた書き方。
・#FFFFFF（通常）：最も標準的な6桁の書き方。
・#FFFFFFFF（透明度つき）：末尾にさらに2桁足して、透明度（不透明度）まで表現した8桁の書き方。

② RGB / RGBA

・書き方例：rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)（不透明度50%の赤）

・特徴：光の三原色（赤・緑・青）の量を、それぞれ「0から255」の10進数の数値でダイレクトに表す方法です。

・メリット：末尾に「A（アルファチャンネル）」を付け足すことで、背景や文字をかんたんに半透明（透かし）にできるのが最大の強みです。

③ HSL / HSLA

・書き方例：hsl(0, 100%, 50%)

・特徴：人間が頭の中でイメージする色の感覚に一番近い指定方法です。以下の3つの要素を使って色を組み立てます。数値を見ただけで「少し暗くしよう」「少し鮮やかにしよう」という調整が直感的に行えます。

HSLを構成する3つの要素

・H（Hue：色相）：0〜360の度数（角度）で「色味」を表します。色相環（カラーサークル）をイメージしたもので、0は赤、120は緑、240は青、360で一周してまた赤に戻ります。

・S（Saturation：彩度）：0%〜100%で「色の鮮やかさ」を表します。0%は完全にくすんだ灰色（モノトーン）になり、100%は最もビビッドで鮮やかな色になります。

・L（Lightness：輝度/明度）：0%〜100%で「色の明るさ」を表します。0%は真っ黒、100%は真っ白になり、50%がその色が一番きれいに見える本来の明るさです。

【「HSL」具体例】

HEX（#ffffffなど）やRGBの場合、色をちょっと明るくしたり暗くしたりしたい時、すべての数値をバラバラに変える必要があり、人間の頭では計算できません。
しかし、HSLなら「1つの数字」を変えるだけで、直感的に色をコントロールできます。

例1：明るさ（L）だけを変えて「ボタンのホバー（マウスホバー）色」を作る
ホームページのボタンによく使われる「きれいな青」をベースに、最後の数値（明るさ：L）だけを動かして、マウスを乗せたとき（ホバー時）の少し暗い青を作ります。

上記HSLコードのHTML、CSSでの記載例

例2：彩度（S）だけを変えて「無効化（クリックできない）ボタン」を作る
真ん中の数値（彩度：S）を動かすと、色の「鮮やかさ」が変わります。これを利用して、入力フォームの未入力時などでよく使う「今はクリックできません」という無効化ボタン（グレーアウト）を一瞬で作ります。

❓ なぜ「グレー」にすると、みんなが無効だと分かるの？
「グレーにするだけで、本当にユーザーはクリックできないって気付いてくれるの？」と疑問と思いますが、インターネットの世界において「グレーアウト（灰色にする＝機能がオフの状態）」は世界共通の約束事（暗黙のルール）になっています。
これには人間の心理と、これまでのWebの歴史が関係しています。

1．色が持つ「生命感」が消えるから
カラフルな色は「アクティブ（動いている）」という印象を人間に与えますが、モノトーン（灰色）になると「活動が止まっている」「命が通っていない」という印象に様変わりします。そのため、直感的に「今は使えないんだな」と伝わります。

2．すべてのパソコンやスマホがそう作られているから
WindowsやMac、iPhone、Androidなどの設定画面を思い浮かべてみてください。変更できない項目や、選択できないボタンはすべて自動的に「薄いグレー」で表示されます。ネットユーザーは日常的にこれを見ているため、無意識のうちに「グレー＝押せない」という学習ができています。

【注意】グレーにするだけでは「片手落ち」！
ただし、ホームページ制作の実務では、色をHSLで「S: 0%（グレー）」にするだけでなく、HTMLやCSS側でも「本当にクリックできない設定」をセットで行うのが鉄則です。
画面の「色」が見えにくい人や、音声読み上げソフトを使っている人にも「無効であること」を正しく伝える必要があるからです。

具体的には、ボタンのコードに以下のような設定を組み合わせます。
・HTMLに disabled をつける：要素を完全に無効化し、クリックしても反応しないようにする。

・CSSで cursor: not-allowed; をつける：マウスを乗せたときに、矢印が「禁止マーク（🚫）」に変わるようにする。

色の変更（デザイン）と、正しいコード（仕組み）を組み合わせることで、初めて「誰にとっても使いやすい親切なホームページ」が完成します。

例3：色相（H）だけを変えて「信号機（赤・黄・緑）」を作る
色の鮮やかさ（S）と明るさ（L）は完全に同じに固定したまま、最初の数値（色相：H）だけをガラッと変えて、トーン（雰囲気）が綺麗に揃った3色のバリエーションを作ります。

※：「0＝赤を表す角度」とは、「360度くるくる回る、色の切り替えダイヤル」だとイメージしてください。丸い円を1周すると「360度」。これと全く同じです。
ダイヤルを動かさない（0度） ➔ 赤少し右に回す（60度） ➔ 黄さらに右に回す（120度） ➔ 緑下に回す（240度） ➔ 青ぐるっと1周して元の位置（360度）に戻る ➔ また最初の 赤 になる。「角度」という難しい言葉を使っていますが、中身はただの「色を選ぶための0〜360までの番号」です。

なぜ人気なのか？
モダンなWeb制作では、CSS変数（カラートークン）と組み合わせてHSLがよく使われます。
「色相（H）だけを変えて、明るさと鮮やかさはそのまま保った別パターンのテーマカラーを作る」といった作業が、数値を1箇所いじるだけで自動化できるため注目を集めています。

HEXとRGBの違い

どれを使えばいい？使い分けの基準

実際にHTMLやCSSを書く際、どの色コードを選ぶべきかの明確なルール（正解）は以下の通りです。

1．基本は「HEX（16進数）」で一貫して統一する
FigmaやAdobe XDなどのデザインツールから一番コピペしやすく、世界中の現場で実務のスタンダードとなっているため、迷ったらHEXを選びましょう。

2．「透明度（透かし）」を入れたいときだけ「RGBA」に変える
背景をじんわり透けさせたいときや、ボタンにマウスを乗せた（ホバーした）瞬間に少しだけ色を薄くしたいときなどは、RGBAを使うとスマートに実装できます。

3．チーム開発では「HSL」の採用も検討する
1つのベース色から「薄い色」や「濃い色」のバリエーションをシステム的に量産したい場合は、HSLを使うと効率的です。

HTML・CSSで色コードを指定する方法

ホームページを作る際の色コードの書き方、指定方法を解説します。

【重要】HTMLタグで色を指定するのは「完全非推奨」！

大前提として、HTMLのタグを使って色を指定する方法は、現在のWeb制作では完全に「非推奨（やってはいけない古い書き方）」となっています。

昔のHTMLでは <font color="#ff0000">テキスト</font>のようにHTML側に直接色を書く時代もありましたが、現在は「HTMLは文章の構造を作るもの」「CSSは見た目を整えるもの」という役割分担が厳格に決まっています。

そのため、色コードを指定するときは、必ずCSS（スタイルシート）を使って記述しましょう。

⭕ HTMLとCSSを組み合わせた正しい書き方（3つの基本）

ホームページで色を塗る場所は、主に「文字」「背景」「枠線」の3つです。

下記は、HTMLのタグの中に直接詰め込むのではなく、HTMLの<head&rt;タグの中に作った<style&rt;タグの部屋にまとめて記述するか、外部のCSSファイル（style.cssなど）に分けて書くのが、プロの現場の正しいルールです。

HTMLでベースを作り、CSSで色コードを指定する具体的なコード例を紹介します。

① <p></p>タグ内の文字色を指定する（color）

文章を表す <p> タグの中の文字色を変えるときは、CSSの color プロパティを使います。

HTMLコード

CSSコード

② 背景色を指定する（background-color）

サイト全体の背景に色を塗るときは、ページ全体を包む <body> タグに対して background-color を使います。
HTMLコード

CSSコード

③ class=”box”（box要素）の枠線の色を指定する（border）

特定の枠に目印をつけた class=”box” に対して線を引くときは、CSSの border プロパティを使い、「太さ」「線の種類」「色コード」をセットで指定します。
HTMLコード

CSSコード

アクセシビリティ（WCAG）と色コードの関係

ホームページ制作では、視覚に特性がある人や、太陽光の下で画面を見る人など、誰もが文字をストレスなく読めること（アクセシビリティ）が求められます。
そこで重要になるのが、背景色と文字色の間の「コントラスト比（明暗の差）」です。

WCAGのコントラスト比とは？

Webアクセシビリティの国際基準「WCAG」では、背景色と文字色の間の「コントラスト比（明暗の差）」に明確な目標数値が定められています。

・通常の文字：コントラスト比 4.5:1 以上が必要
・大きい文字（見出しなど）：コントラスト比 3:1 以上が必要

例えば、白い背景（#FFFFFF）に薄いグレー（#CCCCCC）の文字を載せると、コントラスト比が足りず不合格となり、多くの人にとって読みにくいサイトになってしまいます。

コントラスト比って自分で計算できるの？

結論から言うと、自力で計算するのは絶対に無理です。
コントラスト比の計算には、「色の相対輝度」という、光の波長や複雑な数式を使った高度な計算が必要になります。「#333333 と #ffffff の差だから……」と、色コードの引き算でパッと出せるような簡単なものではありません。

このように「計算の難易度が非常に高い」という大きな壁があるからこそ、実務では一瞬で自動計算してくれる『チェックツール』を使うのが大前提となっています。

色コードの組み合わせチェックツール

自分で計算する必要は一切ありません。以下の無料ツールに、使いたい2つの色コード（背景色と文字色）を入力するだけで、一瞬で合格・不合格を教えてくれます。

① Contrast Checker（Webサイト）
Contrast Checkerは、もっとも手軽なブラウザ上のツールです。
「Foreground（文字色）」と「Background（背景色）」の2箇所に色コードを貼り付けるだけで、基準（WCAG）をクリアしているかを「PASS（合格）」「FAIL（不不合格）」で分かりやすく表示してくれます。

② Chrome DevTools（検証ツール）
ホームページのコードを書いたあと、Google Chromeブラウザの「検証画面（F12ボタン）」を開いてCSSの色コードを確認すると、自動的に現在のコントラスト比が表示されます。基準を満たしていない場合はアラートマークが出るため、コーディングしながらその場で修正するのに非常に便利です。

ホームページの色コードを扱うときの注意点

・英字の大文字・小文字はどっちでもいい
#ffffff と大文字の #FFFFFF は、ブラウザの認識としては完全に同じです。どちらを使ってもエラーにはなりません。
ただし、コードの美しさを保つために、同じプロジェクト内（チーム内）ではルールを統一した方がいいでしょう。

・3桁に省略できるコードを知っておく
同じ文字が連続する場合は3桁に縮めて書くことができます。
・#ffffff ➔ #fff
・#000000 ➔ #000
・#ff0000 ➔ #f00

コードの記述量を減らし、ファイルの容量をわずかに軽量化できるため、実務でもよく使われます。

ホームページ制作でおすすめの色の決め方（黄金比率）

ホームページ全体のカラーバランスを綺麗に整えるためには、使う色の数を絞り、以下の「3つの役割と比率」を意識するのが鉄則です。

・ベースカラー（70%）：背景など、最も広い面積を占める色。主に白や薄いグレー。
・メインカラー（25%）：サイトの印象を決めるブランドカラー。企業のロゴ色など。
・アクセントカラー（5%）：お問い合わせボタンなど、一番目立たせたい場所に使う色。メインカラーの反対色（補色）などが選ばれます。

3色以内にまとめる
色を増やしすぎると統一感が失われます。全体を3色以内にまとめることで、初心者でもプロっぽく洗練されたホームページを作ることができます。
使いやすい3色のカラーセット例
・ベースカラー（70%）：#F7F6F0
・メインカラー（25%）：#1C1E21
・アクセントカラー（5%）：#9E441B