HEX・RGB・HSLはどう使い分ける？WEBカラー形式の違い

WEB制作では、同じ色がHEX、RGB、HSLという違う形式で示されることがあります。どれを使えばよいか迷ったら、色を「共有する」「数値を確認する」「色合いや濃淡を調整する」のどの作業をしているかで選びましょう。3形式は優劣を決めるものではなく、同じ色を別の方法で書ける選択肢です。ここでは1つの青を3形式で比較し、検索結果カードの配色に使う流れを説明します。

HEXは共有、RGBは成分の確認、HSLは調整の考え方に便利

HEXは16進数（0〜9とA〜Fで数値を表す方法）を使った色コードで、例えば青 ■#0066CC のように「#」から始めて書きます。制作資料から色をコピーして使いたいときや、同じ色を正確に受け渡したいときに扱いやすい形式です。RGBはRed（赤）・Green（緑）・Blue（青）の頭文字です。CSSではrgb(0 102 204)と書き、赤0・緑102・青204の各成分を直接確認できます。

HSLはHue（色相）・Saturation（彩度）・Lightness（明度）の略です。CSSのhsl(210 100% 40%)では、色相を210度、彩度を100%、明度を40%に指定します。青 ■#0066CC、rgb(0 102 204)、hsl(210 100% 40%)は、この例ではすべて同じ色です。どの形式を使ったかによって、この青自体の見え方が変わるわけではありません。

色相や明度を変えながら候補を探すときは、HSLで考えると調整の意図を説明しやすくなります。ただしHSLの明度は、文字の読みやすさを判断するコントラスト比や、人が感じる明るさと同じ尺度ではありません。最終的には背景との組み合わせで確認する必要があります。

検索結果カードを作りながら3形式を使い分ける例

資料検索ページのカードを想定します。画面の外側は薄い青灰色 ■#F8FAFC、カード背景は白 ■#FFFFFF、見出しと本文は濃い青灰色 ■#1F2937、補足の更新日時はグレー ■#475569です。カードの枠は青灰色 ■#64748B、操作ボタンには青 ■#0066CCと白文字 ■#FFFFFFを合わせます。絞り込み中であることを示すラベルには淡い青 ■#99CCFFと濃い文字 ■#1F2937を使い、色だけで状態を表さず「絞り込み適用中」と書きます。

この例では、デザイン資料に載せる青はHEXの ■#0066CC として管理し、ボタンのCSSには同じ色のrgb(0 102 204)を使います。ラベルの淡い青は、元のhsl(210 100% 40%)から明度だけを80%にしたhsl(210 100% 80%)で指定できます。この淡い青は ■#99CCFF に対応します。3形式を全部使うことが目的ではなく、それぞれの作業で分かりやすい形式を選ぶ例です。

HTML（WEBページの内容と構造を書く言語）とCSS（背景色や文字色など見た目を指定するルール）の例です。以下は表示例であり、ボタンを押した後に検索条件を変更する機能は含みません。

<div class="result-surface">
  <section class="result-card" aria-labelledby="result-title">
    <h3 id="result-title">検索結果の条件</h3>
    <p class="result-note">対象期間：今週</p>
    <p><span class="result-chip">絞り込み適用中</span></p>
    <button type="button">条件を変更する</button>
  </section>
</div>

.result-surface {
  padding: 24px;
  background-color: rgb(248 250 252);
}
.result-card {
  padding: 24px;
  background-color: rgb(255 255 255);
  color: rgb(31 41 55);
  border: 2px solid rgb(100 116 139);
  border-radius: 12px;
}
.result-card h3 { margin-top: 0; }
.result-note { color: rgb(71 85 105); }
.result-chip {
  display: inline-block;
  padding: 4px 10px;
  background-color: hsl(210 100% 80%);
  color: rgb(31 41 55);
  border-radius: 6px;
}
.result-card button {
  display: block;
  margin-top: 16px;
  padding: 12px 18px;
  background-color: rgb(0 102 204);
  color: rgb(255 255 255);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.result-card button:focus-visible {
  outline: 3px solid rgb(15 23 42);
  outline-offset: 3px;
}

色と背景のコントラスト比（相対的な明るさの差）を計算すると、白いカードに対する本文の濃い色は約14.68:1、補足のグレーは約7.58:1です。ボタンの青と白文字は約5.57:1、淡い青ラベルと濃い文字は約8.69:1です。カードの枠は白と約4.76:1、外側の淡い青灰色と約4.55:1になります。キーボードで選択したときの濃紺 ■#0F172A の枠は白背景に対し約17.85:1です。

形式を統一するより、用途・透明度・コントラストを確かめる

共同制作では、色の指定書をHEXで統一し、CSSでは必要に応じてRGBやHSLへ書き換える方法も使えます。ただし、同じ役割の色を複数の値で管理しないよう注意しましょう。例えばCSS変数（複数の場所で再利用する名前付きの値）に基本色をまとめれば、修正箇所を減らせます。3形式を無理に混ぜる必要はありません。

RGBとHSLではrgb(0 102 204 / 30%)やhsl(210 100% 40% / 30%)のように透明度を追加できます。HEXにも8桁で透明度を表す方法があります。半透明の色は背後の背景と混ざるため、合成後の実際の色を確認します。

HSLで青の明度を80%に上げた淡い青 ■#99CCFF に白文字 ■#FFFFFF を載せると、コントラスト比は約1.69:1しかありません。明度の数値を上げたからといって、どの文字色でも読みやすくなるわけではありません。WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）では、通常サイズの文字に原則4.5:1以上、意味を伝える操作部品の境界などには隣接色と原則3:1以上のコントラストが求められます。数字が基準を満たしても画面全体の使いやすさが保証されるわけではありません。

HueRollは色のHEX・RGB・HSL値を表示し、3桁・6桁のHEX入力やカラーピッカーで色を調整できます。一方、RGB・HSL形式を直接入力する機能はありません。コントラストの確認は選択色と白・黒に限られ、任意の2色やWCAGの自動合否判定には対応していません。色の書き方を決めた後は、完成画面の文字・背景・操作部品の組み合わせを別途確かめましょう。