メインコンテンツへ移動
ToolsByUs

HEXとRGBとHSLの違い

HEX、RGB、HSLは、同じ色域sRGBの同じ色を表す3つの表記法です。HEXは赤・緑・青のチャンネルをコンパクトな16進数に詰め込みます。RGBはその加法の量をそのまま述べます。HSLは人間の考え方に合わせて、色相・彩度・輝度として書き換えます。色そのものは決して変わらず、変わるのはどの編集が一番楽かだけです。

端末内で処理

HEXとRGBとHSLの違いとは

Webページのあらゆる色は、旅の終わりに3つの数値に行き着きます。赤・緑・青の光をどれだけ出すかという数値です。フォーマットの違いは、その数値の書き方とまとめ方だけです。#FF6600、rgb(255, 102, 0)、hsl(24, 100%, 50%)はすべて同じオレンジで、どちらの方向にも無劣化で変換できます。すべてが同じsRGBのチャンネルを指しているからです。

コピペ文化ではHEXが勝ちました。デザインツール、パレットサイト、スタイルガイドは、シリアル番号のように色を特定する6文字の文字列をやり取りします。RGBは画面と画像データのネイティブな言語です。HSLはCSSでは3つの中で最も新しく、色を手に取る理由——色相を回す、彩度を抑える、スケールを作る——について最も意見の強い表記です。どれが一番正しいということはなく、それぞれが違う編集を楽にしてくれます。

このガイドでは各表記、アルファ版、モダンなCSSのcolor()関数、そしてあらゆる美学的判断より優先されるアクセシビリティのチェックを順に見ていきます。途中でリンクされるツールは、すべてブラウザ内で完結します。

3つの表記が同一のものだと実感する最短ルートは、値が行き来するのを眺めることです。色をカラーコンバーターに貼り付けると、HEX、RGB、HSL、知覚的なオプションを含む全フォーマットが一斉に更新されます。

パレットを何か決めたら、前景と背景のペアをコントラストチェッカーに通しましょう。正確なWCAGの比率と、各レベルで合格するかどうかを報告してくれます。画面が弱いユーザーが代わりに発見してしまう前に。

1つの色域、3つの表記

sRGBはWebの既定の色空間です。典型的なディスプレイが示すスペクトルであり、スマートフォンから調整済みのスタジオモニターまで、すべてのブラウザが同じ数値に対して同じ色を意味するよう定義されています。各チャンネルは0から255まで動くため、16,777,216色（256の3乗）がかつてWebパレットの大きさとして引用されてきました。表記とは、その3つの数値——そして不透明度を制御する4番目の数値、アルファ——のためのユーザーインターフェースにすぎません。

3つの表記はすべて同じチャンネルに行き着くため、相互の変換は正確な算術であり、近似は一切ありません。#FF6600をhsl(24, 100%, 50%)と報告するツールは意見を述べているのではなく、CSS仕様が定めるのと同じ代数計算をしているのです。だからこそ、どのフォーマットで書いても描画には影響しません。関わるのは、その行を編集する人間だけです。

フォーマット書き方アルファ版使いやすい場面
HEX#FF6600 または #F60#FF6600AA（8桁）ツール間で値をそのままコピーするとき
RGBrgb(255, 102, 0)rgba(255, 102, 0, 0.67)チャンネルの光の量で考えるとき
HSLhsl(24, 100%, 50%)hsl(24 100% 50% / 0.67)色相を回すとき、明暗のスケールを作るとき
color()color(srgb 1 0.4 0)color(srgb 1 0.4 0 / 0.67)sRGB以外の色空間を明示的に指定するとき

HEX：コンパクトで移植性が高い、しかし不透明

6桁のHEXコードは、16進数で書いた3バイトです。FFは255、66は102、00はゼロ。この形式は最古のHTMLにまでさかのぼり、識別子としては無敵——短く、曖昧さがなく、引用符も不要——なので生き残っています。各チャンネルの2桁が同じ（FF、66、00）なら、CSSは3桁も受け付けます。#F60です。CSS Color 4以降は、2桁を追加するとアルファになります。#FF6600AAは同じオレンジの、不透明度約67%です。

HEXの弱点は組み合わせの操作です。#FF6600を見て「15%暗くしたらどう見えるか」「補色は何か」と問うと、頭の中で16進数をデコードする必要があります。目分量で#FF6600を暗くした結果生まれたのは、#E65C00のような当て推量の山です。HEXは色を保存するためのフォーマットであって、色について考えるためのフォーマットではありません。そここそが、HSLが発明されて埋めた隙間です。

RGB：加法モデルをありのまま述べる

画面は絵の具を反射しません。光を出します。RGBは加法モデルで、黒は全チャンネルがオフ、白は全チャンネルがオン、すべての色はその混合です。rgb(255, 102, 0)はそれをありのままに述べています。赤がフル、緑がいくらか、青はゼロ。物理と一致する表記であるため、描画された値のデバッグ、画像データの読み取り、光そのものの混合では自然な選択になります（RGBの2色を加えると明るくなります。絵の具を混ぜるのとは正反対です）。

アルファ形式のrgba()は、8桁のHEXバリアントより古くからあります。CSS Color 4は構文もモダナイズしました。rgb(255 102 0 / 0.67)——カンマの代わりにスペースとスラッシュ——は等価で、rgb()が4つの値を受け付けるようになったため、aは今では省略可能です。ブラウザは2023年頃から両方の書き方をサポートしています。

HSL：人間に読める色相環

HSLは同じチャンネルを、色相（色相環上の角度、0から360。赤が0、緑が120、青が240）、彩度（0%はグレー、100%は完全に鮮やか）、輝度（0%は黒、100%は白）として書き直します。その持ち味は、関係が読み取れることです。10%明るいホバー状態が必要ですか？hsl(24, 100%, 50%)はhsl(24, 100%, 60%)になります。動くのは1つの数字だけで、意図がdiffに現れます。5段階のブランドスケールが必要ですか？色相と彩度を固定し、輝度を動かします。HEXでは、これらの編集はどれも再計算になります。

正直な注意点：HSLの輝度は知覚的なものではありません。hsl(60, 100%, 50%)（黄）とhsl(240, 100%, 50%)（青）はどちらも輝度50%を名乗りますが、黄は燃えるように明るく、青はほぼ黒に見えます。だからHSLの輝度を基に作ったスケールは、目には不均一に映ります。CSS Color 4はまさにこれを直すためにoklch()を追加しました。輝度が人間の知覚に一致する円柱状の表記で、等しいステップは等しく見えます。均一なスケールには、oklchがモダンな答えです。このサイトのカラーツールは、その基盤である知覚空間OKLabでグラデーションを計算しています。

色相角度一般的な連想
赤0°アラート、エラー、食欲
黄60°警告、エネルギー
緑120°成功、安全、成長
シアン180°情報、落ち着き
青240°信頼、リンク、集中
マゼンタ300°アクセント、創造性

アルファとモダンなcolor()関数

上のどの表記も、アルファは同じやり方で運びます。0から1の不透明度の分数としてです。綴りが違うだけです。#RRGGBBAAは16進数で書き（AAは170、約3分の2の不透明）、rgba()とhsla()はカンマ区切りの分数を取り、モダンなスペース区切りの構文はスラッシュの後に書きます。結果はすべて同一です。8桁のHEX形式が単に最もコンパクトで、デザインツールが最も書き出す形式というだけです。

color()はより大きな変化です。色空間を明示的に名指します。color(srgb r g b)はおなじみの色域をそのまま綴ったもので、color(display-p3 ...)はモダンな画面のより広い色域を扱い、color(oklch ...)は知覚モデルを露出します。sRGBは依然として安全な既定値です。そこで書かれたコンテンツはどこでも予測どおりに描画されます。一方、display-p3の色は構文をサポートする環境でだけ届きます。2023年以降は、実質的にすべてのエバーグリーンブラウザがサポートしています。

  • #RRGGBBAA——16進数のアルファ。AA = 170 ≈ 不透明度67%。
  • rgba(255, 102, 0, 0.67)——旧来のカンマ構文。それでもどこでも使える。
  • rgb(255 102 0 / 0.67)——CSS Color 4の構文。aは今は省略可能。
  • color(display-p3 1 0.4 0 / 0.67)——より広い色域の色。空間を最初に名指しする。

コントラスト：好みに優先するチェック

ユーザーがテキストを読めなければ、表記の選択に意味はありません。WCAGのコントラストでは、AAレベルの通常テキストはテキストと背景の比率が4.5:1以上、大きなテキスト（目安は通常サイズの24 px以上、太字の19 px以上）は3:1以上、より厳しいAAAレベルは7:1が求められます。この比率は相対輝度から計算されます。色そのものの性質であり、どの表記で書いたかは無関係です。これも、どのフォーマットも同じ色であることの表れのひとつです。

実務のワークフローは機械的です。色は好きに選び、出荷前にペアを検証する。本文とその背景、入力欄の上のプレースホルダーテキスト、ブランドカラーの上の白いテキスト——どのペアにも数字が要ります。コントラストチェッカーなら即座に報告してくれます。納期に追われてアクセシブルでないパレットを後から作り直すより、ずっと安上がりです。

よくある質問

このサイトのカラーツールは、貼り付けた内容をアップロードしますか？

いいえ。変換もカラーピックもコントラストのチェックも、すべてブラウザのタブ内でJavaScriptとして動きます。アップロードの手順は存在しません。DevToolsで確認できます。Networkパネルを開いて何かを変換すると、リクエスト一覧が空のままでいるのが分かります。サイトのContent-Security-Policyも、ページスクリプトによる外部への接続を禁じています。

HEXとRGBが異なる色になることはありますか？

どちらもsRGBを指す限り、決してありません。#FF6600とrgb(255, 102, 0)はバイト単位で同じ3つのチャンネル値であり、表記間の変換は定義済みの算術です。違いが現れるのは、色空間を明示的に名指したときだけです。color(display-p3 ...)はsRGBが表現できない色に届きます。これは空間の性質であって、表記の性質ではありません。

CSSではどのフォーマットを使うべきですか？

識別子として保存・コピーされる値——ブランドのトークン、デザインシステムの変数——にはHEXを使います。値が派生していく場面、つまりホバー状態、淡色・濃色、色相を回すテーマにはHSLです。RGBは画像に近い仕事や、チャンネルの量が頭の中のモデルそのままである場面に向きます。コードベース内の一貫性が、どんな単一の正解よりも勝ります。

#RRGGBBAAとは何で、いつ使うべきですか？

最後の2桁がアルファである8桁のHEXコードです。00は完全に透明、FFは完全に不透明、AAは約67%。rgba(255, 102, 0, 0.67)のコンパクトな等価物であり、旧来のrgba()が使える場所ならどこでも使えます。デザインツールが8桁を渡してきたら、それを使いましょう。

HSLの輝度は、色の見えの明るさと同じですか？

いいえ。ここはパレットを作る人が噛まれる罠です。HSLの輝度はRGBチャンネルの数学的な再マッピングであり、知覚的なものではありません。同じ輝度50%でも、黄と青では明るさがまったく違って見えます。均一に見えるスケールには、CSS Color 4のoklch()を使ってください。輝度が人間の知覚に追従します。あるいは、このサイトのようにグラデーションを知覚空間で計算するツールを。

アクセシビリティのためには、どのコントラスト比が必要ですか？

WCAG AAは通常テキストに4.5:1、大きなテキスト（目安は通常サイズの24 px以上、太字の19 px以上）に3:1を求めます。AAAでは7:1と4.5:1に引き上がります。比率は相対輝度から来るので、表記は無関係です。プレースホルダーや無効状態を含め、テキストと背景のすべてのペアをチェックしてください。

ここで引用した規格はどこで読めますか？

ToolsByUsチーム · ツールの検証方法