Webの色の基礎｜HEX・RGB・HSLの意味と変換、配色とコントラストの考え方

「指定した色がイメージと違う」「文字が薄くて読みにくい」——Webサイトを作っていると、色まわりでつまずく場面は少なくありません。色を自在に扱うには、まず色がどう数値で表されているかを理解するのが近道です。本記事では、HEX・RGB・HSLという代表的な表記の意味と関係、不透明度、そして読みやすさを守るコントラストの考え方までを、はじめての方に向けて整理します。

Webの色を理解する意味

画面に表示される色は、最終的にすべて数値で指定されています。同じ「赤」でも、コードでは #FF0000 や rgb(255, 0, 0) といった形で表され、わずかな数値の違いが見た目の差になります。色の仕組みを知っておくと、次のようなことがスムーズになります。

• 意図した色を正確に再現できる：デザインカンプとコードの色を一致させられる。
• 微調整がしやすい：「もう少し明るく」「少しくすませたい」を数値で表現できる。
• 読みやすさを担保できる：背景と文字のコントラストを意識した配色ができる。

色の表記にはいくつかの方式がありますが、Webで日常的に使うのは主にRGB（およびその16進表記であるHEX）とHSLの2系統です。どちらも同じ色を別の角度から表しているだけなので、相互に変換できます。

RGBとHEX：光の三原色で色を作る

RGBは、赤（Red）・緑（Green）・青（Blue）という光の三原色を混ぜて色を作る方式です。それぞれの成分を 0〜255 の256段階で指定し、3つを組み合わせて色を表します。3色がすべて0なら黒、すべて255なら白になります。光を足し合わせるほど明るくなるため、これを加法混色と呼びます。

HEX（16進カラーコード）は、このRGBの値を16進数で書き直したものです。#RRGGBB の形で、頭から2桁ずつ赤・緑・青に対応します。たとえば赤の255は16進数で FF なので、純粋な赤は #FF0000 となります。10進数で 0〜255 が、16進数では 00〜FF に対応していると覚えるとよいでしょう。

HEXには、各色が同じ2桁の繰り返しのときに使える3桁の短縮表記もあります。#FFFFFF は #FFF、#3366CC は短縮できませんが #336 のような形で書けるものもあります。HEXとRGBは見た目が違うだけでまったく同じ色を指しているため、用途に応じて使い分けて問題ありません。

手作業で16進数とRGBを変換するのは骨が折れます。カラーコード変換を使えば、HEX・RGB・HSLのいずれかを入力するだけで他の表記へ瞬時に変換できます。すべてブラウザ内で処理されるため、手軽に色の値を確認しながら作業を進められます。

HSL：人間の感覚に近い色の表し方

RGBはコンピュータにとって扱いやすい一方、「もう少し鮮やかに」「少し暗く」といった感覚的な調整には向きません。そこで便利なのがHSLです。HSLは色を次の3要素で表します。

• H（Hue／色相）：色の種類を0〜360度の角度で表す。0度が赤、120度が緑、240度が青で、円環状につながっています。
• S（Saturation／彩度）：色の鮮やかさを0〜100%で表す。0%で灰色、100%で最も鮮やか。
• L（Lightness／明度）：色の明るさを0〜100%で表す。0%で黒、100%で白、50%が標準的な明るさ。

HSLの利点は、色味を保ったまま明るさや鮮やかさだけを変えられることです。たとえばボタンのホバー色を作るとき、HSLなら色相と彩度はそのままに明度だけを少し下げるといった調整が直感的にできます。同系色のバリエーションを作るのにも適しています。

hsl(0, 100%, 50%) → 純粋な赤。Lを30%に下げれば暗い赤、Sを下げればくすんだ赤になる。

RGB／HEXとHSLは相互に変換できるので、「色を決めるときはHSLで考え、コードにはHEXで書く」といった使い分けも有効です。表記間の変換はカラーコード変換でまとめて確認できます。

不透明度（アルファ）と色の重なり

色には、RGBやHSLに加えて不透明度（アルファ値）を指定できます。アルファは0（完全に透明）〜1（完全に不透明）の範囲で表し、rgba(0, 0, 0, 0.5) のように書きます。HSLでも hsla() として同様に指定できます。

HEXでもアルファを表せます。#RRGGBBAA の形で末尾2桁が不透明度に対応し、#000000FF が不透明な黒、#00000080 が約50%の半透明の黒です。

アルファが役立つ場面は多くあります。

• オーバーレイ：画像の上に半透明の黒を重ねて、その上の白文字を読みやすくする。
• 影やハイライト：背景色になじむ自然な影を表現する。
• 重なりの表現：要素どうしの重なりを柔らかく見せる。

注意したいのは、半透明の色は背景によって見え方が変わる点です。白背景の上と黒背景の上では、同じ半透明色でもまったく違う印象になります。とくに文字色に透明度を使う場合は、後述するコントラストが背景しだいで不足しがちなので注意しましょう。

コントラスト比とアクセシブルな配色

色選びで見落とされがちなのが読みやすさ（アクセシビリティ）です。背景色と文字色の明るさの差が小さいと、視力の弱い方や明るい屋外などで文字が読めなくなります。これを定量的に評価する指標がコントラスト比です。

コントラスト比は1:1（差がない）〜21:1（黒と白）の範囲で表されます。Webアクセシビリティの国際的なガイドラインであるWCAGは、次の基準を示しています。

多くのサイトではまずAAの4.5:1を目安にするとよいでしょう。薄いグレーの文字や、彩度の高い背景に同系色の文字を載せる配色は、見た目はおしゃれでもコントラスト不足になりがちです。

自分の配色が基準を満たしているかは、目視だけでは判断できません。コントラストチェッカーに背景色と文字色を入力すれば、コントラスト比とWCAGの合否がその場で分かります。設計の早い段階で確認しておくと、後からの大きな手戻りを防げます。

配色の作り方の基本

色の仕組みが分かったら、次は複数の色をどう組み合わせるかです。配色には定番の考え方があり、HSLの色相環をベースにすると理解しやすくなります。

1. 同系色（類似色）：色相環で隣り合う色をまとめる。まとまりがあり落ち着いた印象になります。
2. 補色：色相環で正反対（約180度）の色を組み合わせる。互いを引き立て、メリハリが出ます。
3. トライアド：色相環を3等分した位置（約120度ずつ）の3色。バランスよく華やかです。

実務でまとまりのある配色を作るコツは、使う色相を絞ることです。よくある構成は、ベースカラー（背景や余白）・メインカラー（サイトの基調）・アクセントカラー（ボタンや強調）の3色程度に役割を分ける方法です。各色は明度や彩度を変えたバリエーションを用意すると、統一感を保ちながら表現の幅が広がります。

ゼロから配色を考えるのが難しいときは、カラーパレット生成が役立ちます。基準となる色から調和のとれた配色案を自動で作れるので、たたき台として活用し、そこからコントラストチェッカーで読みやすさを確かめる、という流れがおすすめです。

色は、RGB・HEX・HSLという数値で表され、それぞれが同じ色を別の角度から記述しています。まずは表記の意味と変換を押さえ、不透明度で重なりを、コントラスト比で読みやすさをコントロールしましょう。仕組みを理解したうえでツールを併用すれば、見た目も使いやすさも両立した配色に近づけます。