sRGB 色の三つの記述
6桁の HEX カラーは、赤・緑・青のチャネル値を2桁ずつの16進数にまとめます。このツールでの RGB は、同じ3つのチャネルを 0～255 の10進数で書きます。HSL は同じ sRGB 色を色相・彩度・明度の座標で表し直します。色の系統を考えるときに便利ですが、ここでの明度はモデルのパラメーターであり、人が感じる明るさの直接的な尺度ではありません。HEX と RGB はチャネル値の表記違いで、HSL への変換には計算が必要です。一貫して変換すれば3つとも対応する表示色を指定できます。MultiVerto のこれらのツールは不透明な色と表示された入力形式を扱い、CSS のあらゆる色構文に対応するものではありません。
青系の色を換算する
#336699 を例にします。2桁ずつに分けると16進数で 33、66、99 で、10進数では 51、102、153 です。したがって HEX→RGB ツールは rgb(51, 102, 153) を表示します。この RGB 値を HSL にすると、ツールの丸めた表示では hsl(210, 50%, 40%) です。色相 210 度は青の領域にあり、彩度 50% と明度 40% はこの色の HSL 座標を表します。下に #336699 を入力し、その RGB 結果をリンク先の RGB→HSL ツールに貼り付けてください。HSL→RGB と RGB→HEX で逆向きにも変換できます。この例の単純な値は元の6桁の色に戻ります。
- HEX #336699 → 16 進数の組 33 66 99
- RGB：rgb(51, 102, 153)
- HSL：hsl(210, 50%, 40%)
往復変換と丸めを確認する
HEX の各2桁は整数のチャネル値を正確に示します。任意の RGB 値を HSL で表すには、短い画面表示より多くの小数桁が必要な場合があります。MultiVerto は表示する HSL 成分を小数点以下2桁に丸め、逆変換では RGB チャネルを整数に丸めます。多くの入力では往復しても見た目は近いままですが、チャネル値が1だけ変わることもあります。デザインシステムで機械的に正確な色が必要なら、元の HEX または RGB の値を残してください。3桁の HEX の省略形は各桁を繰り返して展開するため、#369 は #336699 になります。3つの10進数という意味ではありません。この例の変換ツールはアルファ透明度を受け付けないため、半透明の色には別の手順が必要です。
変換はアクセシビリティテストではありません
同じ数値の色でも、背景や表示装置が違えば見え方は変わります。HSL の明度だけでは、白または黒の文字がコントラストの要件を満たすか判断できません。コントラストは前景と背景の二色、およびアクセシビリティの計算式によって決まり、一色の HSL の割合だけでは決まらないためです。文字色として使うなら、実際の前景色と背景色の組を該当する WCAG の基準で検査してください。ホバー時、フォーカス時、無効状態に現れる別の色も確認します。変換ツールは CSS、デザイントークン、API 応答で表記を保つ助けにはなりますが、利用しやすい配色を自動選択しません。一つの変換結果だけから読みやすさを推測しないでください。
色のトークンを管理する手順
基準となる色のトークンを一つ選び、たとえば #336699 をどこで使用しているか記録します。インターフェースが各チャンネルの数値を求めるなら RGB に変換し、色相や彩度を意図的に調整するなら HSL に変換します。HSL を編集した後は新しい値を RGB または HEX に戻し、元のトークンを黙って上書きせず、別のトークンとして結果を保存してください。実際のレイアウトで色見本を比べ、隣り合う実際の色を使ってコントラストを検査します。出力先が明示的に対応していない限り、透明度を表すアルファ値や広色域の CSS カラーは、この単純な三チャンネルの比較に含めません。元のトークンと検査済みの派生値を残す方が、関係のない色文字列を手作業で写し続けるより保守しやすくなります。