カラーコードをBrowser内で変換・確認する
色を入力するとHEX・HEX8・RGB・HSL・HWB・OKLCHを同期し、透明度、配色、コントラストも確認できます。
カラーピッカー・カラーコード変換ツールを開く結論：#RRGGBBをRR・GG・BBへ分け、それぞれ00〜FFと0〜255で対応させる
#0063C5では00がRed=0、63がGreen=99、C5がBlue=197です。したがってrgb(0 99 197)と同じsRGB色を表します。
8桁HEXでは末尾2桁がAlphaです。CSSでは#AARRGGBBではなく#RRGGBBAAなので、Platformごとの並びを混同しません。
FF=255の計算過程を詳しく確認したい場合は進数変換ガイド・ツールも利用できます。
HEX Channelを正しく分解する
HEXの#を除き、6桁を先頭から2文字ずつ読みます。各2桁は16×上位Digit+下位Digitで10進数へ変換できます。
短縮HEXは先に各Nibbleを2回繰り返して6桁へ展開します。#f0aなら#ff00aaです。
| 確認項目 | 確認方法 | 判断 |
|---|---|---|
| 桁数 | 3・4・6・8桁 | 対応形式だけ処理 |
| Channel | RR / GG / BB | 順序を固定 |
| 範囲 | 00〜FF / 0〜255 | 範囲内 |
| Alpha | 末尾AA | RGBと分離 |
HEXをRGBへ変換する手順
- HEXをツールのHEX欄へ入力します。
- HEX8・RGB・HSLの同期結果を確認します。
- RGB欄のModern CSS Syntaxをコピーします。
- 元の色とPreviewが一致するか確認します。
#なしの入力も現行ツールは受け付けますが、CSSへ貼るHEXには#を付けます。
手計算で00・63・C5を10進数へ直す
#0063C5
00 = 0 × 16 + 0 = 0
63 = 6 × 16 + 3 = 99
C5 = 12 × 16 + 5 = 197
rgb(0 99 197)HEX・RGB・HSLは同じsRGB色を別の座標で表せる
| 表現 | 例 | 読み方 |
|---|---|---|
| HEX | #0063C5 | Red=00、Green=63、Blue=C5を16進数で表す |
| RGB | rgb(0 99 197) | Red・Green・Blueを0〜255の10進数で表す |
| HSL | hsl(209.8 100% 38.6%) | Hue・Saturation・Lightnessで同じsRGB色を表す |
正しく変換したHEX・RGB・HSLは基本的に同じsRGB色です。「変換すると別の色になる」のではなく用途に合う記法へ置き換えます。ただしHSL等の表示桁を丸めてから再変換すると、RGB Channelが1程度ずれる場合があります。内部値と表示値を区別します。
AlphaはRGBとは別の透明度Channelとして扱う
| Alpha | 8bit HEX | 意味 |
|---|---|---|
| 0% | 00 | 完全に透明 |
| 約50% | 80 | 128 ÷ 255 = 約50.2% |
| 100% | FF | 完全に不透明 |
CSSの8桁HEXは#RRGGBBAAで、Alphaは末尾です。#ff000080は赤のRGBに80のAlphaを付けた値で、#AARRGGBBではありません。50%を8bit整数へ変換すると127.5になるため、現行ツールはMath.roundで128、つまり80へ丸めます。
丸めは表示時に行い、変換途中で誤差を増やさない
- HEX Channelは00〜FF、RGB Channelは0〜255として対応させる
- HSLは内部のFloat値を保持し、画面表示時にHue・Saturation・Lightnessを丸める
- HEX→RGB→HEXは同一値、RGB→HSL→RGBは表示桁に応じた許容差を確認する
- OKLCHからsRGBのHEXへ変換するときは、色域外補正で同じ見た目を保証できない場合がある
同じCSS Color値でもDisplayのCalibration、Color Profile、明るさ、周囲光によって実際の見え方は変わります。数値が一致することと、すべての端末で完全に同じ見え方になることは分けて判断します。
現行カラーツールで入力・出力できる形式
| 項目 | 現行ツールの動作 |
|---|---|
| HEX | #RGB・#RGBA・#RRGGBB・#RRGGBBAAを入力可能。出力は大文字の6桁HEXと8桁HEX |
| RGB / HSL | 数値を入力し、Modern CSSのrgb(... / alpha)・hsl(... / alpha)形式へ変換 |
| HWB / OKLCH | 相互変換に対応。OKLCHからsRGB色域外へ出た場合は補正メッセージを表示 |
| Alpha | 0〜100%のSliderとHEX8・RGB・HSL・HWB・OKLCHを同期 |
| 配色・保存 | 補色・類似色・トライアド・Tint・Shade、一時パレット、CSS Custom Property出力 |
| Contrast | 透明な前景色を背景へAlpha CompositeしてからWCAG比率とAA・AAA結果を表示 |
| 非対応 | Named Color、LAB、LCH、Display P3、CMYK、画像からの色抽出、HEX短縮候補の自動出力 |
| 処理場所 | 入力色とパレットはBrowser内で処理し、DevelopToolsのServerへ送信・永続保存しない |
RGB入力は数値を抽出して0〜255へ、Alphaを0〜1へ補正する実装です。CSS全体の厳密なParserやCascade診断ではありません。Named ColorやcurrentColorを直接変換できるとは案内しません。
CSSへ反映するときの最終確認
- Property名、セミコロン、括弧、#、桁数を確認する
- DevToolsのComputed Styleで採用されたRuleと上書き元を確認する
- Alpha付き前景色は実際の背景へ合成してContrastを計算する
- 色だけで状態を伝えず、Text、Icon、Underline等も併用する
- PCとSmartphone、Light/Dark Theme、実際のFont Sizeで見え方を確認する
Color Converterは値の変換と比較に使う道具です。CSS Specificity、Cascade、!important、Pseudo Class、Browser Support、Design品質まで自動的に保証するものではありません。
仕様とアクセシビリティの一次資料
- W3C：CSS Color Module Level 4
- MDN：<hex-color>
- MDN：rgb()
- MDN：hsl()
- MDN：<named-color>
- MDN：oklch()
- W3C：WCAG 2.2 Contrast (Minimum)
CSS Color Level 4はHEX、rgb()/rgba()、hsl()/hsla()、HWB、Named Color、OKLCH、Alphaを定義しています。ContrastはWCAG 2.2の基準を参照し、通常文字は原則4.5:1以上、大きな文字は3:1以上をLevel AAの目安として確認します。
具体例：#0063C5をCSS rgb()へ変換する
Brand ColorをHEXからRGBへ変換し、透明度を付けられるModern Syntaxへ準備します。
不透明色はrgb(0 99 197)、40% Alphaならrgb(0 99 197 / 40%)として使えます。
- #0063C5入力
- RGB確認
- Preview比較
- CSSへCopy
Alphaを追加してもRGB Channel自体は0・99・197のままです。
よくある質問
- HEXとRGBへ変換すると色は変わりますか？
- 同じsRGB値を正しく変換した場合は表現方法が違うだけです。HSL等の表示桁を丸めて再変換した場合や、広色域からsRGBへ補正した場合は小さな差が出ることがあります。
- 入力したカラーコードはServerへ送信されますか？
- 現行のカラーピッカー・カラーコード変換ツールは入力、変換、配色、コントラスト計算をBrowser内で行い、DevelopToolsのServerへ送信しません。
- HEXの大文字と小文字で色は変わりますか？
- #ABCDEFと#abcdefは同じChannel値を表します。ProjectのStyle Ruleに合わせて表記を統一してください。