HEX・RGB・HSLとは|カラーコードの変換計算式とコントラスト比

Web制作やデザインの現場では、同じ色を「#1D4ED8」「rgb(29, 78, 216)」のように、複数の形式で表すことがあります。本記事では、代表的なカラーコードの形式と、相互変換の考え方、見落とされがちなコントラスト比について解説します。

HEX・RGB・HSLの違い

形式表記例特徴
HEX#1D4ED816進数2桁ずつで赤・緑・青を表す。CSSで最もよく使われる
RGBrgb(29, 78, 216)赤・緑・青をそれぞれ0〜255の数値で表す
HSLhsl(221, 76%, 48%)色相(Hue)・彩度(Saturation)・明度(Lightness)で表す。直感的に色を調整しやすい

HEXとRGBの変換

HEXは、RGBの各値(0〜255)を2桁の16進数に変換して並べたものです。たとえば赤が29の場合、16進数では「1D」になります。 

R: 29  → 1D
G: 78  → 4E
B: 216 → D8
→ #1D4ED8

3桁のHEX(例: #333)は、各桁を2回繰り返して6桁に展開してから計算します(#333 → #333333)。

HSLは「使う色味を保ったまま明るさだけ変える」ときに便利

RGBで明るさだけを変えようとすると、3つの数値すべてを計算し直す必要があります。一方HSLなら、色相(H)と彩度(S)をそのままに、明度(L)の数値だけを変えれば、同じ色味で明るさの違うバリエーションを作れます。配色のバリエーションを作る際に扱いやすい形式です。

見落とされがちなコントラスト比(WCAG基準)

色を選ぶ際、見た目の好みだけでなく、文字の読みやすさの基準も確認しておく必要があります。WCAG(Web Content Accessibility Guidelines)では、文字色と背景色の「コントラスト比」に基準を設けています。

コントラスト比基準
4.5以上AA基準(通常の文字サイズ)
3.0以上AA基準(大きな文字のみ)
7.0以上AAA基準(通常の文字サイズ)

コントラスト比は、2色の「相対輝度」という明るさの指標から計算されます。見た目が薄い色の組み合わせ(例: 白地に薄いグレーの文字)は、デザイン上はおしゃれに見えても、この基準を満たさず読みにくいことがよくあります。

まとめ

カラーコードはHEX・RGB・HSLの3形式が代表的で、用途に応じて使い分けると作業がしやすくなります。色を決める際は、見た目だけでなくコントラスト比も確認すると、読みやすいデザインに近づきます。

相互変換とコントラストチェックは、カラーコード変換ツールからまとめて確認できます。

戻る