カラーコードの概要・基礎知識
Webやアプリのデザインで使われる「カラーコード」は、色をコンピュータが扱える数値として表現するための記法です。CSSで指定するHEX（16進数）、JavaScriptや画像処理ライブラリで馴染みのあるRGB、デザイナーが色相・明度を直感的に操作するHSLなど、複数の表記方法が用途別に併存しています。本ツールはHEX・RGB・HSLの3形式を相互変換し、ピッカーで色を選ぶだけで全形式のコードを取得できます。さらに白背景・暗背景でのコントラスト比を即時計算するため、アクセシビリティ要件（WCAG）の確認まで一気通貫で行えます。すべての変換はブラウザ上で完結し、選択した色情報が外部に送信されることはありません。
各形式の構造と変換ロジック
| 形式 | 例 | 構造 | 主な用途 |
|---|---|---|---|
| HEX | #2563eb | R/G/Bを各2桁の16進数で表記（00〜FF） | CSS、HTMLメール、デザインツール全般 |
| RGB | rgb(37, 99, 235) | R/G/Bを各0〜255の10進数で指定 | JavaScript操作、Canvas、画像処理 |
| HSL | hsl(221, 82%, 53%) | 色相0〜360°・彩度0〜100%・明度0〜100% | テーマカラー設計、ブランドカラーの派生色作成 |
| RGBA / HSLA | rgba(37,99,235,0.5) | 末尾にα（透明度0〜1）を追加 | オーバーレイ、半透明UI |
使い方の流れ
- 左側のプレビューブロックをクリックして、ネイティブのカラーピッカーから色を選びます。タッチデバイスでも同じ操作で動作します。
- HEXコードを直接入力する場合は、6桁の16進数を入力してください。先頭の#は自動で扱います。
- RGB欄のR/G/Bを個別に変更すると、HEX/HSLが連動して即座に更新されます。微調整に便利です。
- HSL欄のH（色相）・S（彩度）・L（明度）を変更すれば、色のトーンを保ったままバリエーションを作れます。
- 下部の「コントラスト比」セクションで、白背景・暗背景それぞれにテキストを置いた場合の読みやすさを確認できます。
こんな場面で使う
- Webサイト・アプリのテーマ設計：ブランドカラーをHEXで決めた後、HSLで明度を調整して背景色やホバー色を派生させられます。
- デザインツールとコードの橋渡し：FigmaやAdobe XDで決めた色をCSSに転記する際、形式違いによるミスを防ぎます。
- アクセシビリティチェック：本ツールのコントラスト比表示で、WCAG 2.1のAA基準（通常テキスト4.5:1以上、大きなテキスト3:1以上）を満たしているか即座に確認できます。
- ダークモード対応：ライト用カラーをHSLに変換し、明度Lを下げるだけでダークテーマ用のバリエーションを生成できます。
- マーケティング素材の色統一：バナーのHEXコードをRGBに変換し、PowerPointやKeynoteの色設定に正確に貼り付けられます。
使う前に知っておきたい注意点
- HEX⇄RGBは整数同士の完全可逆変換ですが、HSL変換は浮動小数点演算を経るため、往復するとごく僅かな誤差が出ることがあります。最終出力はHEXまたはRGBで管理することを推奨します。
- 本ツールはsRGB色空間を前提にしています。Display P3など広色域のカラーマネジメントが必要なケースでは、別途対応する変換ツールをご利用ください。
- 透明度（α）を含む色の表現はRGBA / HSLAになります。本ツールは不透明色のみを扱うため、α値が必要な場合は出力されたコードに自分で
, 0.5などを追記してください。 - WCAGの読みやすさ基準は「コントラスト比」の数字だけで判断せず、実際の閲覧環境（モニタ・スマホ・屋外光）でも目視確認することが推奨されています。
- 同じHEXコードでも、ブラウザ・OS・モニタのプロファイルによって僅かに表示色が異なります。ブランド遵守が厳格な現場では、印刷用CMYKやPantone指定もあわせて管理してください。
用語の補足
- WCAG（Web Content Accessibility Guidelines）：W3Cが定めるWebアクセシビリティの国際基準。コントラスト比はAAレベルで4.5:1以上が要求されます。
- 色相（Hue）：HSLの「H」に対応する0〜360°の値で、0/360が赤、120が緑、240が青を表します。
- 相対輝度（Relative Luminance）：コントラスト比計算の基礎となる値。RGBチャンネルをガンマ補正後に重み付け加算した数値で、人間の視覚特性を反映しています。
