デザインツールでは「R148 G113 B44」と出ているのに、CSSには「#94712c」と書いてある。
同じ色でも、書き方が違うと同じ色かどうか分からなくなります。
この記事では、カラーコードをHEX・RGB・HSL・CMYKのあいだで変換する方法と、それぞれの読み方、場面ごとの使い分けを紹介します。
この記事で使うカラーコード変換は、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。
無料で、会員登録なしで使えます。
掲載例の再確認日：2026年10月2日
この記事で分かること
- 同じ色を5つの形式で書くとどうなるか
- カラーコードを変換する手順
- HEX・RGB・HSL・HSV・CMYKの読み方
- HSLで書き写すと色が少しずれる理由
- 透明度の書き方と、ホバー色の決め方
答え｜同じ色を5つの形式で書くとこうなる
このサイトのメインカラー（見出しやリンクに使っている色）を、ツールで変換した結果です。
| 形式 | 書き方 | 主に使う場所 |
|---|---|---|
| HEX | #94712c | CSS・WordPressのテーマの設定 |
| RGB | rgb(148, 113, 44) | CSS・画像編集ソフト |
| HSL | hsl(40, 54%, 38%) | CSS |
| HSV（HSB） | hsv(40, 70%, 58%) | PhotoshopやFigmaなどの色の選択画面 |
| CMYK（目安） | C0 M24 Y70 K42 | 印刷物 |
この記事ではCSSで広く使われるHEX・RGB・HSLを扱います。CSSにはほかにもlab()、lch()、oklab()、oklch()、color()などの色指定があります。
ここで示すhsv(…)やC0 M24 Y70 K42という表記は、そのままCSSの色値には使えません。CMYKは印刷用プロファイルを指定した変換と区別します。
HEX・RGB・HSLから各形式に変換する
- カラーコード変換を開く
- 入力欄にカラーコードを入れる（HEX・rgb()・rgba()・hsl()・hsla()・色の名前のどれでもよい）
- 各形式の表記が一覧で出るので、使う形式の「コピー」を押す
入力と同時に変換されます。
左の「色を選ぶ」の欄をクリックして、色を選んで変換することもできます。
HEX・RGB・HSL・HSV・CMYKに加えて、透明度を付けたときの書き方の見本として、不透明度50%の8桁HEXとrgba()も並びます。
下には、明るさだけを変えた8色と、CSSの変数として貼れる書き方も出ます。
「tomato」のような色の名前を入れても変換でき、試すと #ff6347 と出ました。
それぞれの形式の読み方
HEX｜16進数で2桁ずつ
「#94712c」は、2桁ずつ区切って「94」「71」「2c」と読みます。
順に赤・緑・青の強さを、00〜ffの16進数で表しています。
「94」は 9×16＋4＝148 なので、RGBで書くと赤は148です。
同じように「71」は113、「2c」は44になり、rgb(148, 113, 44) と同じ色だと分かります。
「#fff」のような3桁は、「#ffffff」を短く書いたものです。
RGB｜赤・緑・青を0〜255で
RGBは、赤・緑・青の光の強さを0〜255の数で表します。
3つとも255で白、3つとも0で黒です。
HSLとHSV｜色相・鮮やかさ・明るさで
HSLとHSVは、どちらも「色相・彩度・明るさ」の3つで色を表します。
1つ目の色相は、赤を0として色の輪を一周360度で表した角度です。
このサイトのメインカラーは40度で、オレンジと黄色のあいだの位置にあります。
| HSLのL（明度・lightness） | HSVのV（明度） | |
|---|---|---|
| 100%にすると | 白になる | その色がいちばん明るい状態 |
| いちばん鮮やかなのは | 50%のとき | 100%のとき |
| 0%にすると | 黒になる | 黒になる |
| 使われる場所 | CSS | PhotoshopなどのデザインツールのHSB |
数字が似ていても、3つ目の意味が違うので、HSVの値をそのままCSSのhsl()に書くと別の色になります。
デザインツールから色を持ってくるときは、HEXかRGBで受け取るのが確実です。
HSLで書き写すと色が少しずれる
ツールが出すHSLは、整数に丸めた値です。
そこで、表示された hsl(40, 54%, 38%) を入力し直して、元の色に戻るかを2026年9月28日に確かめました。
| 入力 | HEXに戻した結果 |
|---|---|
| #94712c（元の色） | #94712c |
| hsl(40, 54%, 38%)（丸めた値） | #95722d |
赤・緑・青がそれぞれ1ずつずれて、元の色には戻りませんでした。
目で見て分かる差ではありませんが、ブランドの色のように正確さが要る場面では困ります。
色を記録したり受け渡したりするときは、HEXかRGBを使うのが安全です。
CMYKは目安として使う
CMYKは、印刷に使うシアン・マゼンタ・イエロー・黒のインクの割合です。
ツールの値は簡単な計算で出した目安で、実際の印刷の色は、用紙やインク、カラープロファイルによって変わります。
画面の色（RGB）には、印刷では出せない範囲があり、特に鮮やかな青や緑はくすんで刷り上がります。
名刺やチラシのデータを作るときは、IllustratorやPhotoshopのカラー設定で変換してください。
透明度の書き方
CSSで半透明の色を使うときは、主に3つの書き方があります。
| 書き方 | 例（不透明度50%） |
|---|---|
| rgba() | rgba(148, 113, 44, 0.5) |
| 8桁のHEX | #94712c80 |
| hsla() | hsla(40, 54%, 38%, 0.5) |
8桁のHEXは、最後の2桁が透明度です。
「80」は16進数で128なので、128÷255でおよそ50%になります。
主要なブラウザーはどちらの書き方にも対応しています。
「rgb(148 113 44 / 50%)」のように、スラッシュの後ろに透明度を書く新しい書き方もあります。
透明度のある色をツールで変換する
ツールは、4桁・8桁のHEX、rgba()、スラッシュを使ったrgb()、hsla()から透明度を読み取ります。
rgba(148, 113, 44, 0.3) を入れた結果です。
8桁のHEXは #94712c4d、HSLAは hsla(40, 54%, 38%, 0.3) になり、0.3の透明度がそのまま引き継がれました。
透明度を外した6桁のHEXとrgb()も、「透明度なし」と書き添えて並びます。
HSVとCMYKには透明度の表し方が無いので、「透明度なし」として色だけを出します。
色の見本は市松模様の上に表示されるので、どれくらい透けるかを目で確かめられます。
8桁のHEXの #94712c80 を入れると、不透明度は50.2%と出ました。
「80」は128で、128÷255が50.2%になるためです。
ちょうど50%にしたいときは、rgba()で0.5と書きます。
ホバー色は明るさだけを動かす
ボタンにマウスを重ねたときの色（ホバー色）は、色相と彩度はそのままに、明るさだけを10〜15%ほど動かすと自然です。
ツールの下に出る8色のバリエーションは、この考え方で作られています。
実は、このサイトのテーマ（SWELL）も同じような方法で色を作っています。
ページのCSSを見ると、メインカラーから自動で作られた色が2つありました。
| SWELLの変数 | 値 | メインカラーとの関係 |
|---|---|---|
| –color_main | #94712c（148, 113, 44） | 設定した色 |
| –color_main_dark | rgba(111, 85, 33, 1) | 赤・緑・青をそれぞれ0.75倍 |
| –color_main_thin | rgba(185, 141, 55, 0.05) | それぞれ1.25倍にして、不透明度5% |
濃いほうの rgb(111, 85, 33) をツールでHSLに直すと、hsl(40, 54%, 28%) でした。
メインカラーの hsl(40, 54%, 38%) と比べると、色相と彩度は同じで、HSLの明度が10ポイント下がっています。相対輝度や知覚上の明るさとは別の量です。
明るさだけを動かすと、同じ色の仲間に見えるのはこのためです。
文字色と背景色の組み合わせを決めたら、読みやすさも確かめてください。
コントラストはカラーコントラスト判定で測れます。
サイト全体の文字色をまとめて調べる方法は「サイトの文字色のコントラストを調べる方法」で解説しています。
ツールを使わずに変換する｜Chromeの開発者ツール
Chromeの開発者ツールでも、形式の切り替えができます。
- ページを右クリックして「検証」を開く
- 「Styles」の欄で、色の値の左にある小さな四角を探す
- Shiftキーを押しながら四角をクリックする
クリックするたびに、HEX・RGB・HSLなどの表記が順に切り替わります。
1色だけならこれで足ります。
CMYKやHSV、明るさ違いの色が欲しいときは、ツールのほうが早く済みます。
ツールの限界
- CMYKは簡単な計算による目安で、カラープロファイルは考えない
- HSL・HSVの値は整数に丸めて表示する
- HSVとCMYKには透明度を付けられず、色だけを出す
- 一度に変換できるのは1色だけ
よくある質問
Q. 入力した色はどこかに送られますか？
送られません。
計算はすべてブラウザーの中で行われます。
Q. WordPressのテーマの色設定にはどの形式を使えばよいですか？
多くのテーマのカラー設定は、HEXで入力する作りになっています。
デザインツールからRGBで受け取った色は、ツールでHEXに直してから入れます。
Q. 大文字の#94712Cと小文字の#94712cは違いますか？
同じ色です。
HEXの大文字と小文字は区別されません。
まとめ
- HEX・RGB・HSLはCSSの代表的な形式。この記事のHSV・CMYK表記はそのままCSSへ貼らない
- HEXは2桁ずつ区切った16進数で、「94」は148を表す
- HSLは丸めた値なので、書き写すと元の色から少しずれる
- CMYKは目安なので、印刷のデータはデザインソフトで変換する
- ホバー色は、色相と彩度はそのままに明るさだけを動かす
ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。
ツールの一覧はWEBツール箱にあります。
入力エラーと透明度なしの出力を確認する
入力例を選んで変換結果を比較できます。#94712cはrgb(148, 113, 44)、丸めたhsl(40, 54%, 38%)は#95722dになりました。rgba(148, 113, 44, 0.3)は#94712c4d、#94712c80は不透明度50.2%です。tomatoは#ff6347になります。
解釈できない文字を入力するとエラーが出て、直前の変換結果は消えます。値をコピーする前に入力欄と結果が対応していることを確かめ、半透明を残す場合は8桁HEX・RGBA・HSLAを選びます。6桁HEXやRGBの「透明度なし」を選ぶと、半透明にはなりません。
入力欄が受け付けるのは、この記事で挙げたHEX・RGB・HSLと色名です。CMYKの「C0 M24 Y70 K42」を入力しても変換できません。ツールのCMYKとHSVは出力用の目安として使い、印刷用のCMYKからRGBへ戻す場合はプロファイルを指定できる画像編集ソフトで変換します。
4桁HEXの#abcdは#aabbccddへ展開され、不透明度は約86.7%です。rgb(148 113 44 / 50%)は#94712c80になります。丸めたhsla(40, 54%, 38%, 0.3)は#95722d4dとなるため、透明度は引き継いでもRGBの値は元の#94712cと一致しません。
