RGB⇔HEX変換 計算ツール｜CSSカラーコード・HSL・輝度・WCAGコントラスト比を一括算出
RGB（0-255）⇔HEX（16進6桁）のカラーコードを、HSL・HSV・輝度（Relative Luminance）・WCAGコントラスト比・アルファ（透明度）と併せて瞬時に相互変換。CSS Color Module Level 4対応の8桁HEX（#RRGGBBAA）や、背景色とのWCAG 2.2 AA/AAA判定まで算出し、Web制作・UIデザイン・アクセシビリティ設計・印刷DTP・ブランドカラー管理の実務に対応します。W3C・JIS X 8341（高齢者・障害者等配慮設計指針）・sRGB IEC 61966-2-1の公的規格を根拠に解説。
RGB⇔HEX変換 計算機
RGB⇔HEXの変換式
RGB → HEX
HEX = "#" + toHex2(R) + toHex2(G) + toHex2(B)
各RGB値（0〜255の10進整数）を2桁の16進数に変換し、順に連結します。255→FF、128→80、64→40、0→00。1桁の場合は前に0を補って2桁化します。
HEX → RGB
R = parseInt(HEX[1..2], 16)
G = parseInt(HEX[3..4], 16)
B = parseInt(HEX[5..6], 16)
HEXコードの1〜2、3〜4、5〜6桁目をそれぞれ2桁の16進数として10進に変換します。#FF8040なら R=255, G=128, B=64。
短縮HEX（3桁）
#F84 → #FF8844（各桁を2回繰り返す）
3桁HEXは各桁を2倍にした6桁HEXと等価です。#F84は#FF8844、#000は#000000、#FFFは#FFFFFFと同じ色。CSSでは省略記法として広く使われます。
8桁HEX（アルファ付き）
#RRGGBBAA（AA=00〜FF、0〜1のアルファを256段階で表現）
CSS Color Module Level 4で正式採用された8桁HEX。アルファ値0.5なら80、0.25なら40、1.0ならFF。旧来のrgba()と数値的に等価です。
HSL・HSVとの関係
RGBは加法混色のディスプレイ・カメラ座標で、色の直感的な操作には向きません。デザイン実務ではHSL（Hue-Saturation-Lightness）・HSV（Hue-Saturation-Value）変換を経由することで、色相・彩度・明度を独立して調整できます。
HSL変換式（要約）
L = (max + min) / 2
S = (max − min) / (1 − |2L − 1|)（L≠0,1のとき）
H = 60° × 色相計算（R,G,Bの最大成分で分岐）
ここでmax = max(R,G,B)/255、min = min(R,G,B)/255。CSS色相環では0°=赤、120°=緑、240°=青。彩度・明度はいずれも0〜100%で表現します。
HSV（HSB）
V = max
S = (max − min) / max（max≠0のとき）
HSVはPhotoshop・Illustratorのカラーピッカーで採用される表現。「明度」の定義がHSLと異なり、V=100%でも純色（例：赤255,0,0）を意味します。
WCAG輝度・コントラスト比
Web Content Accessibility Guidelines（WCAG 2.2）は、視覚障害者・高齢者を含む全ユーザーがWebコンテンツにアクセスできるよう、W3Cが定めた国際ガイドラインです。テキスト可読性の最重要指標がコントラスト比です。
相対輝度（Relative Luminance）
L = 0.2126 × Rlin + 0.7152 × Glin + 0.0722 × Blin
ここでRlin,Glin,Blinは sRGBのガンマ補正を逆変換した線形値（各成分について、値/255 が 0.03928以下ならその値/12.92、それ以外は((値/255+0.055)/1.055)^2.4）。人間の視覚特性上、緑成分（0.7152）の寄与が最も大きくなります。
コントラスト比
Contrast = (L1 + 0.05) / (L2 + 0.05) ※L1 > L2
2色間の輝度差から算出、白(#FFF)対黒(#000)は21:1で最大値。WCAG 2.2の判定基準は以下の通りです。
| 基準 | 通常テキスト | 大きなテキスト（18pt/太字14pt以上） |
|---|---|---|
| AA（最低ライン） | 4.5:1以上 | 3:1以上 |
| AAA（強化ライン） | 7:1以上 | 4.5:1以上 |
| 非テキストUI | 3:1以上 | — |
CSS Color Module Level 4
W3CのCSS Color Module Level 4では、従来の16進・rgb()・rgba()・hsl()・hsla()に加えて、以下の記法が正式採用されています。
- hex 8桁（#RRGGBBAA） ― アルファ付きHEX。#FF804080 = rgba(255,128,64,0.5)。
- rgb() 新記法 ― rgb(255 128 64 / 0.5) スペース区切り・スラッシュでアルファ。
- hsl() 新記法 ― hsl(20 100% 63% / 0.5)。
- hwb() ― Hue-Whiteness-Blackness。直感的なパステル調表現。
- lab() / lch() ― CIE Lab / LChで知覚的均等色空間。sRGBの色域を超える広色域表現。
- color() ― Display-P3・Rec.2020等の色空間を明示指定。
- color-mix() ― 2色を任意の比率で混合。動的なテーマ生成に有用。
2026年時点で主要ブラウザ（Chrome/Edge/Safari/Firefox）は上記記法をほぼサポート済み。ただし古いレガシー環境向けに従来記法（rgb(255,128,64)）を併記するのが安全です。詳細はW3C CSS Color Module Level 4を参照。
CSS Named Color（147色）
CSS標準では147色（一部集計では148〜149色）の名前付きカラーが定義されています。デザインで頻用する代表例です。
| 名前 | HEX | RGB |
|---|---|---|
| white | #FFFFFF | 255,255,255 |
| black | #000000 | 0,0,0 |
| red | #FF0000 | 255,0,0 |
| lime | #00FF00 | 0,255,0 |
| blue | #0000FF | 0,0,255 |
| yellow | #FFFF00 | 255,255,0 |
| cyan / aqua | #00FFFF | 0,255,255 |
| magenta / fuchsia | #FF00FF | 255,0,255 |
| silver | #C0C0C0 | 192,192,192 |
| gray | #808080 | 128,128,128 |
| maroon | #800000 | 128,0,0 |
| olive | #808000 | 128,128,0 |
| green | #008000 | 0,128,0 |
| navy | #000080 | 0,0,128 |
| teal | #008080 | 0,128,128 |
| orange | #FFA500 | 255,165,0 |
| tomato | #FF6347 | 255,99,71 |
| coral | #FF7F50 | 255,127,80 |
| gold | #FFD700 | 255,215,0 |
| violet | #EE82EE | 238,130,238 |
| indigo | #4B0082 | 75,0,130 |
実務での用途
Web制作・CSSコーディング
デザインカンプ（Figma・Sketch・Photoshop）のカラーをHEX/RGB形式でCSSに転記。デザイントークン（Tailwind等）に落とし込む際に相互変換が頻繁に発生します。
アクセシビリティ設計
WCAG 2.2 AA準拠のコントラスト比4.5:1以上を確保。特に高齢者向けサイト・行政サイトはJIS X 8341-3準拠で7:1（AAA）が推奨されます。本ツールで背景色との比を即確認可能。
ブランドカラー管理
コーポレートカラーをPantone・CMYK・RGB・HEXの複数記法で統一管理。ロゴガイドラインでは通常HEXとPantoneを併記します。
UIデザイン・Design System
Material Design・Fluent Design・Human Interfaceでは、HSLベースの色相環に沿ったカラーパレット（primary/secondary/tertiary/error等）を構築。HSL変換が有用。
DTP・印刷
RGB→CMYK変換で印刷向け色調整。sRGBとAdobe RGBの色域差、印刷紙質による発色差を考慮。プロファイル変換（ICC）はPhotoshopで実施が標準。
データ可視化
グラフ・ヒートマップの配色設計。ColorBrewer等の科学的配色パレットは色相・彩度・輝度が計算されており、色覚多様性（色弱）にも配慮されています。
よくある間違い・注意点
- コントラスト比を目視で判定 — 「見えるから大丈夫」は主観判断。WCAG 2.2は数値基準（AA=4.5:1、AAA=7:1）を明示しており、本ツールやWebAIM Contrast Checker等で客観的に検証すべき。
- アルファ（透明度）を含む色でWCAG判定 — アルファ付き色は背景色と合成後の実際の色でコントラスト判定する必要があります。単純にRGB値だけ見ると誤判定。
- sRGBとAdobe RGBの混同 — Web標準はsRGB。Adobe RGB・DCI-P3等の広色域プロファイルで作成した画像・カラーをそのままWeb掲載すると、閲覧環境で色が変わります。エクスポート時にsRGB変換必須。
- HEXとRGBの精度差 — RGBを0.0-1.0の実数で扱う場合、HEX(0-255の整数)への変換で四捨五入誤差が発生。CSSではrgb(255.5, ...)は無効。
- 3桁HEXの誤解 — #F84は「#0F0804」ではなく「#FF8844」。各桁を2回繰り返した6桁と等価。
- 暗い色同士の判定漏れ — 濃紺と黒（コントラスト比1.2:1程度）等、両方暗い色の組み合わせはWCAG AA不合格になりやすい。特にダークモード設計で注意。
- 色情報のみで意味を伝える — 「赤=エラー、緑=成功」だけでは色覚多様性（先天色覚異常は男性の約5%）に配慮不足。アイコンやテキストラベル併用が必須。
関連規格・アクセシビリティ
- W3C WCAG 2.2 ― Web Content Accessibility Guidelines 2.2（2023年勧告）。世界標準のWebアクセシビリティ基準。テキストコントラストの数値基準を規定。
- JIS X 8341-3:2016 ― 高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス−第3部：ウェブコンテンツ。日本国内でのアクセシビリティJIS規格でWCAG 2.0準拠。
- W3C CSS Color Module Level 4 ― HEX・rgb()・hsl()・lab()・lch()・color()等の色記法の公式仕様。
- sRGB IEC 61966-2-1 ― PCモニタ・Webの標準色空間。1996年にIEC規格化、2003年改訂。
- ITU-R BT.709 ― HDTV・sRGBの基礎となる色空間規格。輝度計算式の原典。
- ISO 9241-3/-5 ― 人間工学のディスプレイ設計ガイドライン。可読性・色使用の推奨。
- ADA準拠（米国） ― 米国障害者法。米連邦機関・大手企業サイトはWCAG準拠がADA準拠として求められる判例あり。
- EN 301 549（EU） ― EU公的機関のICTアクセシビリティ基準。WCAG 2.1 AAをベースにする。
参考資料・公的資料
- W3C WAI - WCAG 標準 ― Webアクセシビリティの国際標準。コントラスト・輝度基準の一次資料。
- W3C CSS Color Module Level 4 ― CSS色記法の公式仕様。8桁HEX・hwb・lab・lchの詳細。
- WebAIM Contrast Checker ― Web Accessibility In Mind（米国ユタ州立大学）が提供する公式相当のコントラストチェッカー。
- 日本産業標準調査会（JISC） ― JIS X 8341-3等のJIS規格の公式索引。
- ウェブアクセシビリティ基盤委員会（WAIC） ― 日本におけるWCAG翻訳・普及団体。JIS X 8341-3準拠の実装ガイド。
- MDN Web Docs CSS color ― Mozilla提供のCSS色仕様リファレンス。ブラウザサポート状況の確認。
- デジタル庁 サービス設計12箇条 ― 政府サイトのアクセシビリティ設計方針。行政デザインシステムの色使用ガイドあり。
- ColorBrewer 2.0（ペンシルベニア州立大学） ― データ可視化用の科学的配色パレット。色覚多様性対応配色の参考。
- W3C Understanding SC 1.4.3 Contrast (Minimum) ― コントラスト最低基準の詳細解説。
- Pantone Color Finder ― 印刷業界標準のPantone色見本の公式ツール。
よくある質問（FAQ）
RGBとHEXは同じ色ですか？
はい、表現方法が違うだけで同じ色です。RGB(255,128,64) と #FF8040 は等価。CSSではどちらでも同じ結果になります。HEXは6文字で短く書けるためコード内で好まれ、RGBは動的計算に向いています。
HSLとHSVはどちらを使うべき？
Web/CSSはHSLが標準。IllustratorやPhotoshop等のデザインツールはHSV(HSB)を採用しています。数値の意味が微妙に異なるため、変換時は注意。HSLの明度50%が「純色」に相当します。
コントラスト比はどれくらい必要ですか？
WCAG 2.2 AA準拠なら通常テキストで4.5:1以上、大きなテキスト（18pt/太字14pt以上）で3:1以上。AAA準拠なら通常7:1、大きなテキスト4.5:1。行政サイトはJIS X 8341-3で AA相当が推奨されます。
8桁HEX（#RRGGBBAA）はいつ使う？
アルファ（透明度）を1つの記法で表現したいとき。#FF804080 = 半透明のオレンジ。CSSでrgba()の代わりに使えます。古いブラウザ非対応の場合はrgba()フォールバック推奨。
Named Colorはコードで使えますか？
CSSでは`color: red;`のように名前で指定可能ですが、実務ではHEX/RGBを明示するほうが厳密性・保守性が高くなります。ブランドカラーは名前と数値の対応表を管理するのがベター。
sRGBとDisplay-P3の違いは？
sRGBは1996年に策定されたPCモニタ・Web標準色空間。Display-P3はAppleが2015年から採用した広色域規格で、鮮やかな赤・緑を表現可能。CSS Color Level 4のcolor(display-p3 R G B)で指定できます。
ダークモード用の色設計は？
単純に反転すると彩度・明度バランスが崩れます。Material Design・iOS HIGでは、ライトモードとダークモードで異なる色相・彩度を設計。コントラスト比は両モードで独立に検証してください。
色覚多様性への配慮は？
男性の約5%（P型/D型/T型色覚）が色の見え方が異なります。「赤=エラー、緑=成功」だけでなく、アイコン・テキストラベル併用が必須。ColorBrewerやAdobe Color Accessibilityで色弱シミュレーションが可能です。
RGBからCMYK変換はできますか？
単純な近似変換式はありますが、印刷向けには ICCプロファイル変換（PhotoshopのカラーマネジメントやAdobe Bridge）が必須。sRGBとCMYK（Japan Color 2001 Coated等）の色域差により厳密変換不可の色があります。
HEX 3桁と6桁の使い分けは？
3桁は#000, #FFF, #F0Fのように各成分が同じ16進1桁で表せるときのみ有効。それ以外は6桁必須。ミニファイCSSでは自動的に3桁化するツールがあります。
アルファ0.5を8桁HEXで書くと？
0.5 × 256 = 128 = 80（16進）なので、#RRGGBB80。0.25は40、0.75はBF、1.0はFF、0.0は00。
Web安全色は今も必要？
いいえ。256色256色時代の遺物で、現代の24bitカラー対応環境（デスクトップ・モバイル問わず99%以上）では不要。全ての16進色を安心して使えます。