カラーコードとは？HEX・RGB・HSLで色を指定する基礎

カラーコードとは

カラーコードとは、色を数値や記号で正確に表すための表記方法です。Webでは「赤っぽい色」のような曖昧な指定ではなく、誰が見ても同じ色になるよう、コードで色を指定します。

画面の色は基本的に光の三原色である赤（Red）・緑（Green）・青（Blue）の組み合わせで作られます。これらをどれだけ混ぜるかを数値で表すのがカラーコードの考え方です。

代表的な書き方にはHEX（16進数）、RGB、HSLの3つがあり、同じ色でも異なる形式で表現できます。それぞれに向いた場面があります。

HEX（16進数）

HEXは、シャープ記号に続けて6桁の英数字で色を表す形式です。たとえば白は#ffffff、黒は#000000です。最初の2桁が赤、次の2桁が緑、最後の2桁が青の強さを表します。

各2桁は16進数で00からffまでの値をとり、00が最も弱く、ffが最も強い状態です。Webの色指定で最もよく見かける形式で、簡潔に書けるのが利点です。

同じ色を2文字ずつ繰り返す場合は、3桁に短縮して書けることもあります。たとえば#ffffffは#fffと書けます。

実務ではどこで関係する？

カラーコードは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

カラーコードについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

RGBとHSL

RGBは、赤・緑・青の強さをそれぞれ0から255の数値で指定する形式です。rgb(255, 255, 255)なら白を表します。HEXと同じ色を表しますが、数値が直感的に読み取りやすいのが特徴です。

HSLは、色相（Hue）・彩度（Saturation）・明度（Lightness）の3つで色を表す形式です。色相は色味、彩度は鮮やかさ、明度は明るさを示します。「同じ色味のまま少し明るくしたい」といった調整がしやすいのが利点です。

どの形式でも表せる色は同じですが、HEXは簡潔さ、RGBは分かりやすさ、HSLは調整のしやすさという違いがあります。目的に応じて使い分けるとよいでしょう。

透明度の指定と使い分けの手順

色には透明度（不透明度）を加えることもできます。RGBにアルファ値を加えたrgba()や、HSLにアルファを加えたhsla()を使うと、半透明の色を作れます。HEXでも末尾に2桁を加えて透明度を表せる場合があります。

実際に色を選んで指定するときは、次のような流れで進めると迷いにくくなります。

1. 使いたい色をカラーピッカーなどで選ぶ
2. その色のカラーコードを確認する（HEXやRGBで表示されることが多い）
3. 用途に合わせて形式を選ぶ（簡潔ならHEX、調整重視ならHSL）
4. 半透明にしたい場合はrgba()やhsla()でアルファ値を加える
5. 実際の画面で見え方を確認し、必要なら微調整する

まとめと確認の場面

カラーコードは、色を正確に伝えるための共通言語です。HEX・RGB・HSLの違いを理解しておけば、場面に応じて最適な書き方を選べます。透明度を扱えることも覚えておくと表現の幅が広がります。

配色を決めたHTMLを関係者と共有して、実際の画面での色味を確認したいときは、ギガサイト便が便利です。HTMLやZIPをドロップするだけで共有URLが発行でき、複数の配色案を同じURLのまま差し替えながら見比べてもらえます。