カラーコード変換 — HEX・RGB・HSLを行き来する
#6366f1 のようなHEX、rgb(99, 102, 241)、hsl(239, 84%, 67%) を相互に変換します。どれか一つを直せば残りが同時に変わり、色見本もその場で更新されます。
同じ色でも、道具によって書き方が違います。デザインソフトはHEX、CSSはどれでも通り、印刷はCMYK。値そのものは同じ色を指しているので、書き方を移し替えるだけの作業が意外と頻繁に発生します。
HEXの6桁は、赤・緑・青をそれぞれ00〜FF（0〜255）の2桁で並べたものです。#6366f1 なら赤63（99）、緑66（102）、青f1（241）。RGBと完全に同じ情報で、書き方が違うだけです。
三つの書き方
| 形式 | 例 | 向いている場面 |
|---|---|---|
| HEX | #6366f1 | デザインツール、HTML、共有するとき |
| RGB | rgb(99, 102, 241) | 画像処理、透明度を足すとき |
| HSL | hsl(239, 84%, 67%) | 明るさや鮮やかさを少しずつ調整するとき |
HSLが調整に向いている理由
HEXやRGBで「もう少し明るく」しようとすると、三つの数字を同時に動かすことになり、色味まで変わってしまいがちです。HSLは色相・彩度・明度が分かれているので、明度だけを上げれば色味を保ったまま明るくできます。
色相は0〜360の角度です。0が赤、120が緑、240が青。反対側の色（補色）は180を足した位置にあります。配色を決めるときは、この角度を等間隔に取ると散らかりません。
ボタンのホバー状態やリンクの訪問済みの色を作るときは、HSLで明度を5〜10%動かすのが手早い方法です。同じ色の濃淡を並べた一式を作りたい場合は、カラーパレット生成のほうが向いています。
変換で値がずれることがあります
HEXとRGBは同じ情報なので、行き来しても値は変わりません。HSLは計算で移し替えるため、小数を丸める過程でわずかにずれることがあります。HEX→HSL→HEXと往復したときに1だけ違う数字になるのはこのためで、見た目で違いが分かる差ではありません。
CSSは小数を含むHSLも受け付けるので、精度が気になる場面ではそのまま使えます。デザインの受け渡しにはHEXを使うのが無難です。
3桁のHEX（#abc）は6桁（#aabbcc）の省略形です。各桁を2回繰り返した色と同じで、このツールはどちらの書き方でも読み取ります。
色を選ぶときに
- •文字色と背景色の組み合わせは、コントラスト比を確認してください。本文なら4.5対1以上が目安です。専用のコントラストチェッカーがあります。
- •画面の色と印刷の色は一致しません。印刷物にする予定があるなら、早い段階で刷り見本を確認してください。
- •同じHEXでも、ディスプレイの設定によって見え方が変わります。重要な色は複数の画面で確認するのが確実です。
- •入力した値は保存されません。変換はすべてブラウザの中だけで行われます。
よくある質問
#記号は必要ですか？
どちらでも読み取ります。3桁と6桁の両方に対応しています。
透明度（アルファ）は扱えますか？
このツールは不透明な色を扱います。透明度が必要な場合はrgba()やhsla()の形に手で書き足してください。
CMYKに変換できますか？
できません。CMYKは使う紙とインクによって結果が変わるため、正確な変換には印刷側の設定が必要です。
変換した値がわずかに違うのはなぜですか？
HSLへの変換で小数を丸めるためです。見た目で分かる差にはなりません。