HEX↔RGB↔HSL↔CMYK カラー変換｜sRGB・CSS Color Level 4・WCAGコントラスト・印刷CMYKまで一気に

HEX↔RGB↔HSLの変換式

HEX → RGB：#RRGGBB を各2桁に分割し、16進→10進変換
RGB → HEX：各値を16進2桁で連結（padStart 2, '0'）
RGB → HSL：max/min計算後、色相H・彩度S・明度L算出
輝度（Luminance）＝ 0.299R + 0.587G + 0.114B（ITU-R BT.601 / NTSC規格）
WCAG相対輝度 ＝ 0.2126R + 0.7152G + 0.0722B（sRGBガンマ補正後）
コントラスト比 ＝（L1 + 0.05）÷（L2 + 0.05）※L1が明るい方

HEX（Hexadecimal、16進表記）は#RRGGBB形式で赤緑青を各256階調（00-FF）、合計16,777,216色（True Color）を表現。RGBはこれを10進の0-255で示す等価な形式で、CSS Color Module Level 4以降はrgb(29 78 216)（カンマ省略）・rgb(29 78 216 / 0.5)（不透明度付き）の新記法も利用可能です。HSLは色相（0-360°）・彩度（0-100%）・明度（0-100%）の3軸で、「もう少し暗く・薄く」など人間の感覚に近い調整ができるため、CSS変数と組み合わせたテーマ設計で多用されます。

主要カラーモデルの用途

色空間の歴史とsRGB規格

Web上の色表記は1994年ネットスケープ社が16進表記「#RRGGBB」を採用したのが始まり。HTML 3.2（1996年W3C）で正式仕様化され、後にCSS Color Module Level 1（1996年）で色名（red、blueなど16色）とHEXが統一されました。CSS Color Level 3（2011年）でRGBA・HSL・HSLA、Level 4（2022年）でOKLCH・LAB・color()関数・HWBが追加され、より知覚均等な色調整が可能になっています。

sRGB色空間は1996年にIEC 61966-2-1で標準化されたWeb・OS・多くのデジタル機器の標準色空間。Windows・macOS・Android・iOS・ほぼすべてのWebブラウザがデフォルトでsRGBを想定します。より広色域のP3・Rec.2020・Adobe RGB（1998年）はプロ写真・映像向けで、CSS Color 4のcolor(display-p3 1 0 0)記法でWebでも指定可能に。

CMYK（Cyan・Magenta・Yellow・Key/Black）は印刷の4色分解プロセスで、19世紀のオフセット印刷技術に由来。RGB（加法混色・光の三原色）とCMYK（減法混色・インクの三原色）は本質的にガンマット（色域）が違い、鮮やかな青紫・蛍光色はCMYKで再現不可のケースが多くあります。DTPではICCプロファイルを用いてsRGB→Japan Color 2001 Coated等の印刷色空間に変換するのが標準です。

カラーフォーマット一覧

Webデザイン標準色

マテリアルデザイン・iOS・Bootstrap・Tailwindでよく使われる基本色。ボタン・リンク・アクセントの初期値としてすぐ使えます。

主要ブランドカラー

主要ブランドの公式ガイドラインに準拠したブランドカラー。SNSシェアボタン・ロゴ実装で正確な指定が必要です。

WCAGコントラスト早見表

WCAG 2.2アクセシビリティガイドラインでは、本文はコントラスト比4.5:1以上（AA）、大文字（18pt以上）は3:1、AAAレベルは7:1が要求されます。以下は文字色×背景色の合否早見です。

目安として「明度の差が50%以上」でAA合格することが多く、明るい背景に淡色文字（グレー・パステル）は要注意。デザインシステム設計時は色ペアごとにWebAIM Contrast Checkerで実測するのが確実です。

現場別のカラー運用

印刷CMYKと画面RGBの差

RGB（sRGB色空間）は約100%色域カバー、CMYKは約70%程度で表現可能な色域が狭いため、鮮やかな青紫・蛍光色・ネオンカラーは印刷で再現不可のケースが多いです。

印刷校正時のポイント：①モニターキャリブレーション（sRGB表示調整）、②Adobe RGBの制作物はsRGB変換してから確認、③紙媒体は必ず色校（本紙校正）でチェック、④蛍光色・金銀は特色（Pantone）で追加刷りが実務対応です。

よくある間違い・注意点

• HEX 3桁と6桁の混同 — #F00と#FF0000は同じ純赤ですが、#F1Aのような不規則な3桁は#FF11AAと展開されます。細かい色調整には必ず6桁を使用し、CSS変数管理でも6桁で統一するのが実務標準です。
• RGB→CMYK直接変換で入稿 — Photoshopの「モード変換」でRGB→CMYKにすると色がくすみます。ICCプロファイル（Japan Color 2001 Coated等）を指定して変換し、Illustratorではオブジェクト単位で色分解を確認。校正刷りなしで納品すると「青が紫に、緑がくすむ」クレームの原因になります。
• WCAGコントラスト比の判定ミス — 「見た目でOK」ではなく実測でAA 4.5:1以上が要件。特に薄いグレー本文（#888など）、パステル背景の白抜き文字は3.0:1で不合格のケース多発。デザインシステム設計時はWebAIM Contrast Checkerで数値確認を。
• rgb()の記法変更を知らない — CSS Color Level 4でスペース区切り（rgb(29 78 216)）・アルファ付き（rgb(29 78 216 / 0.5)）が追加。旧来のカンマ区切りrgba(29,78,216,0.5)と混在すると保守で混乱するため、プロジェクト内で記法を統一。
• 色相環（Hue）の起点の誤解 — HSLの色相Hは0°=赤、60°=黄、120°=緑、180°=シアン、240°=青、300°=マゼンタ、360°=赤に戻る。「色相を-30すれば橙」など算術で色をずらす際、360°の剰余（modulo）を忘れると意図しない色に。
• 色の数値を目分量で決める — Figma上で「もう少し暗く」と目分量指定すると、HSL明度Lを段階的に-5%で系統立てないと、他のUIパーツと比較して不揃いに。Tailwind CSSの50-950（11段階）のような系統立てたトーン設計が保守性を上げます。
• ダークモード対応の色反転ミス — 単純に「白背景→黒背景・黒文字→白文字」の反転ではプライマリブルーが眩しすぎる・彩度が強すぎるケース多数。ダークモードでは明度L 60→L 45への調整、彩度Sを10-20%下げるのが視認性の基本です。
• 色覚多様性への配慮不足 — 男性の約8%（日本）が赤緑色覚異常。赤字グラフ・緑字ボタンの対比だけで情報伝達すると、識別不能。形・位置・パターン・下線を併用し、Sim Daltonism等のシミュレーターで確認するのがユニバーサルデザインの実務です。
• Adobe RGB制作物をsRGBで公開 — Adobe RGB（1998）はsRGBより広色域で、そのままWebアップロードすると色が変わる問題。写真編集後は「Web用に保存」でsRGB変換＋sRGBプロファイル埋込を必ず実施。プリント用データはAdobe RGBのまま入稿します。
• Pantone色をHEX/RGBで代用 — Pantone（PMS）は特色インクで刷る単色ブランドカラーで、HEX/RGB近似値では正確に再現できません。ブランドロゴのTシャツ・パッケージ・カタログはPantone指定が必須で、Web用に近似HEXを別途明示するのがブランドガイドの標準運用です。

参考文献・公的資料（発リンク）

カラーコード・色空間・アクセシビリティの一次資料は以下でご確認ください。

• W3C CSS Color Module Level 4 ― HEX/RGB/HSL/OKLCH/color()記法の公式仕様書。
• W3C WCAG 2.2 アクセシビリティ規格 ― コントラスト比4.5:1（AA）・7:1（AAA）の要件定義。
• WebAIM Contrast Checker ― カラーペアのWCAG判定ツール（現場デファクト）。
• ISO/IEC 61966-2-1 sRGB色空間標準 ― Web・OSの標準色空間規定。
• IEC 国際電気標準会議 ― sRGB・BT.601等の映像色空間規格発行元。
• 日本産業標準調査会（JISC） ― JIS Z 8781（測色）・JIS Z 8721（色の表示方法）等日本規格。
• International Color Consortium（ICC） ― ICCプロファイル規格の策定団体（DTP・映像業界標準）。
• Google Material Design 3 Color ― マテリアルデザインの色システム仕様書。
• Apple Human Interface Guidelines Color ― iOS/macOS標準色ガイド。
• Pantone Matching System ― ブランドカラー・特色の国際標準体系。

よくある質問（FAQ）

関連計算ツール