SnapToolbox
カラーコード変換ガイド：Web制作者向けHEX・RGB・HSL・HSB
Web デザインの色は複数のフォーマットで表現されており、それぞれに異なる強みがあります。デザイナーのFigma仕様書を実装するにしても、CSSで調和の取れた色のバリエーションを作成するにしても、カラーフォーマットを理解することは基本です。このガイドでは、主なフォーマットをすべて説明し、それぞれの使い分けを解説します。
4つの主要なカラーフォーマット
4つのフォーマットはすべて同じ色を表現しています。フォーマット間の選択は、読みやすさ、ツール互換性、操作のしやすさに関することです。
HEX（16進法）
HEXはWebデザインで最も一般的なフォーマットです。色を#で始まる6桁の16進数で符号化します。
- 形式：
#RRGGBBここで、RR、GG、BBは00～FF（10進法では0～255）の値 - 例：
#FF0000= 純赤、#000000= 黒、#FFFFFF= 白 - 短縮形：ペアが繰り返される場合
#RGB—#FF6600は#F60と書くことができます - アルファ付き：
#RRGGBBAA—#3D5C2E80は50%透明の森緑
最適な用途：デザインツールからコピー、ブランドカラーをハードコード、チームメンバーとカラー値を共有。
RGB（赤・緑・青）
RGBは各チャネルを0～255の3つの値として色を表現します。
- 形式：
rgb(赤, 緑, 青)またはrgba(赤, 緑, 青, アルファ) - 例：
rgb(255, 0, 0)= 純赤 - アルファ（不透明度）：
rgba(61, 92, 46, 0.5)= 50%透明の森緑
最適な用途：JavaScriptで動的に色を操作、透明度（アルファチャネル）、キャンバスやWebGLで作業。
HSL（色相・彩度・明度）
HSLはデザイナーと色のプログラム的な操作のために最も直感的なフォーマットです。
- 色相：色環上の0～360度（0=赤、120=緑、240=青）
- 彩度：0%=グレー、100%=完全に彩度がある
- 明度：0%=黒、50%=通常、100%=白
形式：hsl(97, 33%, 27%)
HSLが強力な理由：色のバリエーションを作成することは直感的です。色をより明るい版にするには、明度を上げるだけです。控えめな版にするには、彩度を下げます。これはHEXやRGBでは考えるのがはるかに難しいです。
最適な用途：CSSテーマ、プログラムでカラーパレットを生成、ダークモード実装。
HSB / HSV（色相・彩度・明度/値）
HSB（HSVとも呼ばれる）はHSLに似ていますが、明度の代わりに明度/値を使用します。重要な違い：HSLでは100%の明度は常に白。HSBでは、100%の明度で100%の彩度は純粋な色相です。
Adobe Photoshop、Illustrator、Sketchなどのデザインツールは、カラーピッカーのためにHSBを内部的に使用しています。Figmaはカラーピッカーの使用法のためのHSBですが、CSSエクスポート用にはHSLを使用します。
最適な用途：デザインソフトウェアのカラーピッカーで作業、視覚的に魅力的な彩度色を選択。
各フォーマットをいつ使うか
| フォーマット | 使用する場面 |
|---|---|
| HEX | Figma/Zeplinの仕様書からコピー、CSSの変数でブランドカラー定数 |
| RGB / RGBA | JavaScriptで色を操作、キャンバスで描画、透明度が必要 |
| HSL / HSLA | CSSテーマシステム、ティント/シェード色を生成、ダークモードトークン |
| HSB | デザインツールピッカー（Photoshop、Illustrator）に色を入力 |
プロのコツ：最新のCSS設計システムは、特に色トークンのためのHSL CSSカスタムプロパティをよく使用します。ホバー状態が簡単に作成できるため、明度値を調整するだけで済むからです：--btn-hover: hsl(var(--h) var(--s) calc(var(--l) - 10%));
カラーアクセシビリティ：コントラスト比
カラーフォーマット間の変換は、アクセシビリティにも役立ちます。WCAG 2.1では以下が必要です：
- 通常のテキストのコントラスト比4.5:1（AA準拠）
- 大きなテキスト（18pt以上または14pt太字）のコントラスト比3:1
- 強化（AAA）準拠のコントラスト比7:1
テキストと背景色を選択するときは、必ずコントラスト比を確認してください。コントラスト確認をサポートするツールは、あらゆる標準フォーマットでカラー値を必要とします。
色をすぐに変換 — 無料
SnapToolboxのカラーコード変換ツールを使用して、HEX・RGB・HSL・HSBをワンクリックで変換できます。カラーピッカーとリアルタイムプレビューを搭載。
カラーコード変換を開くまとめ
デザイン仕様書のコピーはHEXを使用。JavaScriptでアルファ透明度が必要な場合はRGBを使用。CSS テーミングシステムでカラーバリエーションをプログラムで生成する必要がある場合はHSLを使用。HSBは主にデザインツールピッカーで作業するときに便利です。信頼できるカラーコード変換ツールがあれば、デザイン環境から開発環境への移行時のフォーマット間の切り替え作業の摩擦を取り除けます。