HEX・RGB・HSL・HSV・CMYKとは
カラーコードは、同じ色を別の座標系で書き表したものです。ディスプレイは赤・緑・青の光の強さを混ぜて色を作るので、画面用の表記はすべてRGBの3つの値が出発点です。どの表記を使うかは、何をしたいかで決まります。
- RGB:赤・緑・青を0〜255の整数で表します。1チャンネル8ビットなので256の3乗=16,777,216色です。CSSでは
rgb(201 169 97)やrgb(201, 169, 97)のように書きます。 - HEX:RGBの3つの値を2桁の16進数にして並べたものです。
#C9A961はC9(201)・A9(169)・61(97)の意味で、RGBと情報量は同じです。#FA0のような3桁表記は各桁を2回繰り返し、#FFAA00と解釈されます。 - HSL:色相(0〜360度)・彩度(%)・明度(%)で表します。色相環の角度と「鮮やかさ・明るさ」で考えられるので、人が調整しやすい表記です。色相を保ったまま明度だけ変えると、同じ色の明るい版・暗い版が作れます。
- HSV(HSB):色相・彩度・明度(Value、最も強いチャンネルの値)で表します。PhotoshopやFigmaの色選択は多くがHSBです。HSLでは L=50% が最も鮮やかな色ですが、HSVでは S=100%・V=100% が最も鮮やかです。HSLとHSVのSは同じ名前でも別の値なので注意してください。
- CMYK:シアン・マゼンタ・イエロー・ブラックのインク量で表す印刷用の表記です。光を足すRGBと違い、インクが光を吸収する減法混色なので、原理が異なります。
変換の計算式
R・G・Bを255で割って0〜1にした値をr・g・b、その最大値と最小値をmax・min、d=max−minとします。
- RGB→HSL:L=(max+min)/2。d=0なら灰色なのでH=0、S=0。それ以外はS=d/(1−|2L−1|)。Hは、最大がrなら60°×((g−b)/d を6で割った余り)、最大がgなら60°×((b−r)/d+2)、最大がbなら60°×((r−g)/d+4)で、負なら360を足します。
- RGB→HSV:V=max、S=d/max(maxが0なら0)。HはHSLと同じ式です。
- HSL→RGB:C=(1−|2L−1|)×S、X=C×(1−|(H/60 を2で割った余り)−1|)、m=L−C/2。Hが属する60°の区間に応じて(C,X,0)、(X,C,0)、(0,C,X)、(0,X,C)、(X,0,C)、(C,0,X)のいずれかを選び、mを足して255倍し、四捨五入します。
- RGB→CMYK(単純式):K=1−max、C=(1−r−K)/(1−K)、M=(1−g−K)/(1−K)、Y=(1−b−K)/(1−K)。K=1(黒)のときはC=M=Y=0とします。
計算例
例1:ゴールド #C9A961 RGBは(201, 169, 97)。max=201/255=0.788、min=97/255=0.380、d=0.408なので、L=(0.788+0.380)/2≒58%、S=0.408/(1−|2×0.584−1|)≒49%、最大がRなのでH=60×((169−97)/104)≒42°。HSLは約(42°, 49%, 58%)、HSVはS≒52%・V≒79%、単純式のCMYKは(0%, 16%, 52%, 21%)です。白との対比は約2.25:1で白地の本文色には不足、黒とは約9.33:1で十分です。
例2:朱色寄りの赤 #FF5733 RGB(255, 87, 51)ではmax=1、min=0.2、d=0.8なので L=60%、S=100%、H=60×((87−51)/204)≒10.6°(表示は11°)。HSLは約(11°, 100%, 60%)、HSVは(11°, 80%, 100%)、CMYKは(0%, 66%, 80%, 0%)。白との対比は約3.15:1で、大きな文字の基準3:1は超えますが、本文の4.5:1には届きません。
例3:純粋な青 #0000FF HSLは(240°, 100%, 50%)、HSVは(240°, 100%, 100%)、CMYKは(100%, 100%, 0%, 0%)。白との対比は約8.59:1です。同じ「100%」でもHSLとHSVで意味が違うことが分かる例です。
基本色の参考表
下の表は、ページ生成時に上の式で計算した値です。各行のHEXを入力欄に入れて、結果を見比べられます。
| 色 | HEX | RGB | HSL |
|---|---|---|---|
| 黒 | #000000 | 0, 0, 0 | 0°, 0%, 0% |
| 白 | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
| 赤 | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| 緑(ライム) | #00FF00 | 0, 255, 0 | 120°, 100%, 50% |
| 青 | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| 黄 | #FFFF00 | 255, 255, 0 | 60°, 100%, 50% |
| シアン | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
| マゼンタ | #FF00FF | 255, 0, 255 | 300°, 100%, 50% |
| グレー50% | #808080 | 128, 128, 128 | 0°, 0%, 50% |
| オレンジ | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
| ゴールド(初期値) | #C9A961 | 201, 169, 97 | 42°, 49%, 58% |
CMYKの値が「近似」である理由
画面のRGBは機器が出せる光の範囲(色域)が決まっており、印刷のCMYKはインクや紙、印刷方式で再現できる範囲がまったく違います。上の式は2つの体系を単純な計算でつないだだけで、実際のインクの色は反映していません。 同じCMYKの数値でも、コート紙と非コート紙では見え方が変わり、印刷所のICCプロファイル(FOGRA系・SWOP系など)を使うと数値自体も変わります。蛍光に近い鮮やかな緑・橙・青はCMYKで再現できず、印刷するとくすみます。 ここで表示するCMYKはおおよその目安です。印刷物を作るときは、デザインソフトで印刷所が指定するプロファイルに変換し、色が重要なら色見本や校正刷りで確認してください。
コントラスト比の計算
Webアクセシビリティ指針(WCAG)は、文字色と背景色の明るさの差を「コントラスト比」で評価します。まず各チャンネルを線形化します。sRGB値v(0〜1)が0.04045以下ならv/12.92、それより大きければ((v+0.055)/1.055)の2.4乗です。 相対輝度は L=0.2126R+0.7152G+0.0722B で、比は(明るいほうのL+0.05)/(暗いほうのL+0.05)です。 WCAG 2.xでは、AAレベルで通常の本文は4.5:1以上、大きな文字(およそ24px以上、または太字18.7px以上)は3:1以上が目安で、AAAレベルはそれぞれ7:1と4.5:1です。 このツールは選んだ色を白または黒と組み合わせたときの比だけを素早く示します。任意の2色を比べるには色コントラストチェッカーを使ってください。
透明度をHEXで書く
CSSは #RRGGBBAA 形式の8桁HEXに対応し、末尾2桁が不透明度です。不透明度p%は round(p/100×255) を16進数にした値です。たとえば50%は127.5を四捨五入して128、16進で80となり、#C9A96180 は上のゴールドの約50%の不透明度です。rgb(201 169 97 / 50%) と書くこともでき、こちらのほうが読みやすいです。
| 不透明度 | アルファHEX | 10進数 |
|---|---|---|
| 100% | FF | 255 |
| 90% | E6 | 230 |
| 80% | CC | 204 |
| 70% | B3 | 179 |
| 60% | 99 | 153 |
| 50% | 80 | 128 |
| 40% | 66 | 102 |
| 30% | 4D | 77 |
| 20% | 33 | 51 |
| 10% | 1A | 26 |
| 5% | 0D | 13 |
| 0% | 00 | 0 |
この変換ツールは3桁・6桁のHEXのみ対応です。8桁の値は先頭の6桁を入力してください。
パレットの作り方
トーンパレットは、選んだ色の色相と彩度を保ち、明度だけを90・75・60・45・30・15%に変えて作ります。補色は色相に180°を足し、類似色は±30°(−30°は+330°として表示)で計算します。 HSLによる機械的な計算なので、人が感じる明るさを均等に分けるわけではありません。たとえば黄色系は同じLでも青系よりずっと明るく見えます。パレットは出発点として使い、実際のUIでは対比を確認しながら調整してください。もっと多様な組み合わせは配色パレット生成機、名前のあるCSSの色を探すならWeb色名一覧が便利です。
よくある間違いと注意点
- HSLを経由すると値が少しずれます。H・S・Lを整数に丸めるため、HEX→HSL→HEXで±1〜2ほど変わることがあります。正確な値はHEXかRGBを基準に保管してください。
- 画面の色と印刷の色は同じではありません。モニターの明るさ・色温度・プロファイルで同じHEXも違って見えます。
- HSLのSとHSVのSは別の値です。デザインツールのHSBをCSSの
hsl()にそのまま入れると別の色になります。 - 灰色では色相に意味がありません。R=G=Bのときは色相が0と表示されますが、実際は未定義で、彩度0なので変えても結果は変わりません。
- HEXは大文字小文字を区別しません。
#c9a961と#C9A961は同じ色です。
結果の活用方法
- デザインツールで選んだ色のHEXを入力し、CSS用の rgb()/hsl() 表記をコピーする。
- ブランドカラーをHSLにして明度だけを変え、ホバー・無効状態・背景のトーンを作る。
- 文字色の候補が白・黒に対して4.5:1を超えるか確認し、足りなければ明度を調整する。
- 印刷が必要ならCMYKの近似値を出発点にし、印刷所のプロファイルで再変換する。
16進数の表記そのものに興味があれば進法変換ツール、長さや重さなどの単位は単位変換ツール、グラデーションのコードはCSSグラデーション生成機が役立ちます。
よくある質問
パレットの色や結果のチップをクリックするとどうなりますか?
パレットの色をクリックするとHEXコードがクリップボードにコピーされます。RGB・HSL・HSV・CMYKのチップを押すと、その表記がコピーされます。
デザインツールにそのまま貼り付けられますか?
HEXコードはFigma・Photoshop・CSSなど多くのツールで使えます。ただしツール側のカラーマネジメント設定(sRGB、Display P3など)が違うと、画面での見え方が少し変わることがあります。
HEXを3桁で入力してもよいですか?
はい。#FA0 は各桁を2回繰り返した #FFAA00 と解釈されます。アルファ付き8桁HEXは対応していないので、先頭6桁を入力してください。
CMYKの値で印刷すると画面と同じ色になりますか?
同じにはなりません。ここのCMYKは数学的な近似で、実際の印刷色はインク・紙・プロファイルで変わります。印刷所のプロファイルで変換し、校正で確認してください。
HSLでL=50%が最も鮮やかなのはなぜですか?
HSLの明度は最大チャンネルと最小チャンネルの平均なので、1つが最大で別が0のとき(255, 0, 0など)L=50%になります。Lを上げると白、下げると黒が混ざり、鮮やかさが落ちます。
関連ツール
- 色コントラストチェッカー - 任意の2色で文字の読みやすさを確認
- 配色パレット生成機 - 色の組み合わせを作る
- Web色名一覧 - 名前から色を探す
- CSSグラデーション生成機 - 色からグラデーションのコードを作る