カラーフォーマット解説：HEX、RGB、HSL
簡単な回答
HEX (#RRGGBB) および RGB (チャネルごとに 0 ～ 55) は、赤、緑、青の強度を直接エンコードします。 HSL (色相 0—60°、彩度/明度 0—00%) は人間の知覚に一致する方法で色をエンコードし、パレットと色合いの構築を容易にします。カラー コンバーターを使用して 3 つすべての間で変換します。
導入
Web カラーは、HEX (基数 16 の赤、緑、青)、RGB (チャネルごとに 10 進数の 0 ～ 55)、および HSL (色相、彩度、明度) の 3 つの主要な形式で指定されます。 3 つはすべて同じ sRGB カラー スペースを記述しますが、異なる軸を公開します。HEX と RGB はハードウェア指向 (直接チャネル値) ですが、HSL は人間指向 (直感的な色相、彩度、明度) です。最新の CSS は、HEX8、rgba()、および hsla() を介してアルファもサポートします。
ステップバイステップ
-
HEX 表記を理解する
HEX は、各チャネルを 2 桁の 16 進数 #RRGGBB として書き込みます。 00 はオフ、FF (255) は最大強度です。 #FF0000 は純粋な赤、#00FF00 は純粋な緑、#0000FF は純粋な青、#FFFFFF 白、#000000 黒です。 4 桁の短縮表現 #RGB は #RRGGBB に展開され、#RRGGBBAA はアルファを追加します (例: #FF573380 は 50% アルファです)。
-
RGB 表記を理解する
RGB はチャネルごとに 10 進数の 0 ～ 55 を使用します。rgb(255, 87, 51) は #FF5733 と同じです。 rgba() 関数は 0—アルファを追加します。rgba(255, 87, 51, 0.5) は 50% 不透明です。 RGB は HEX と同等です。これは基数 16 ではなく単なる 10 進数です。
-
HSL 表記を理解する
HSL は、色相 (カラー ホイールの 0 ～ 60°: 0= 赤、120= 緑、240= 青)、彩度 (0% = グレー、100% = フルカラー)、明度 (0% = 黒、50% = 標準、100% = 白) を使用します。 hsl(11、100%、60%)は鮮やかなオレンジ色です。 HSL を使用すると、同じ色相のティント (明度を上げる) とシェード (明度を下げる) を作成することが簡単になります。
-
形式間の変換
HEX→RGB: 各ペアをbase-16として解析します。 RGB→HEX: 各チャネルを 2 桁の進数 16 に変換します。 RGB→HSL: 正規化されたチャネルの最大/最小を計算します。明度 = (最大 + 最小)/2、彩度は明度に依存します。色相は支配的なチャネルの角度です。カラー コンバーターを使用すると、これらすべてを瞬時に行うことができます。
-
タスクに適した形式を選択する
デザイントークンとアセットをコンパクトにするために HEX を使用します。チャネルを補間またはアニメーション化する必要がある場合は、RGB/rgba() を使用します。パレット、シェード、またはテーマのバリエーションを生成する場合は、HSL/HSLA を使用します。明度を 10% 調整することは、RGB デルタについて推論するよりもはるかに簡単です。
例
3 つのフォーマットすべてでピュアレッド
入力: #FF0000
出力: rgb(255, 0, 0) = hsl(0, 100%, 50%)
鮮やかなオレンジ
入力: #FF5733
出力: rgb(255, 87, 51) = hsl(11, 100%, 60%)
白と黒
入力: #FFFFFF と #000000
出力: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
1 つの HSL 色相から 5 段階のシェードを構築する
入力: hsl(210, 70%, 50%) — 明度を変更します 30/40/50/60/70%
出力: #1A4D7F、#2E6BA3、#4389C7、#6FA8DC、#9EC5E8 - 一貫した青色のパレット
よくある問題
- 3 桁と 6 桁の混合 HEX: #F00 と #FF0000 は同じ色ですが、一部のパーサーは 1 つの形式しか受け入れません。予期せぬ事態を避けるために、コード内で 6 桁に正規化してください。
- HSL 明度 50% は「半分の明るさ」ではないことを忘れてください。彩度 100% では、明度 50% が純粋な色相です。 50% を超えると白に近づき、50% 未満では黒に近づきます。 「50% グレー」は hsl(0, 0%, 50%) です。
- アルファ チャネルの混乱: #RRGGBBAA (HEX8) は最新のブラウザではサポートされていますが、古いブラウザではサポートされていません。 rgba()/hsla() はより幅広いサポートを備えています。ターゲット環境を常にテストしてください。
- カラースペースの不一致: HEX、RGB、および HSL はすべて sRGB を表します。 P3 または Lab/OKLCH (最新のディスプレイで使用されている) との間で変換する場合、単純なチャネル コピーでは間違った色が生成されます。適切なカラー ライブラリを使用してください。
ヒント
- パレットをデザインするときは、HSL を使用します。色相を 1 つ選択し、明度 (例: 30/50/70%) と彩度 (例: 60/80/100%) を変更して、一貫した色合いと色合いを生成します。
- アクセシビリティのために、背景に対するコントラスト比を確認してください。WCAG AA では通常のテキストの場合 4.5:1、AAA 7:1 が必要です。カラー コンバーターを使用して、相対的な輝度とコントラストを計算します。
- 知覚的に均一な補間を実現するには、最新の CSS color-mix() または oklch() を使用してください。RGB 補間は、補色を混合するときに濁ったグレーを通過する可能性があります。
- グラデーションを生成するときは、最初にエンドポイントを同じ形式に変換します。単一のグラデーション宣言に HEX と HSL を混在させると、予期しない中間点が生成される可能性があります。