🎨
カラーコード変換
HEX ⇄ RGB ⇄ HSL とプレビュー
⚡ 登録不要・無料
カラーコード（#4f6ef7 / rgb() / hsl()）を入れると、HEX・RGB・HSLに変換し、色を大きくプレビューします。ピッカーからの選択にも対応。すべて端末内で処理します。
使い方（3ステップ）
1
色を入れるHEX・rgb()・hsl() のいずれか、またはピッカーで選択。
HSLを併記している訳
HEXとRGBだけでも色は表せます。それでもHSLを常に出しているのは、色を「調整する」段になると、この形式でないと手が出せないからです。
ボタンのホバー時に少し暗くしたい。HEXでやろうとすると、2桁の数字を3つ、勘で下げることになります。たいてい色味がずれて濁る。HSLなら明度（L）の数字を1つ下げるだけで、色相はそのままです。
だからこの画面は「変換する道具」であると同時に、いま使っている色のH・S・Lがいくつなのかを知るための道具でもあります。ブランドカラーのLを10刻みで振れば、それだけで統一感のあるパレットになります。
コントラストの判定はしていません。薄いグレーの文字は画面上では上品に見えますが、明るい場所や視力の条件によっては読めなくなります。本文の色を決めるときは、背景との明度差が十分にあるか別途確認してください。装飾として薄くしてよいのは補足情報だけです。
この画面で分からないこと
- 配色として成立しているか：変換は正確でも、その色の組み合わせが読みやすいかは別の判断です。
- 色の見え方の個人差：色だけで情報を伝えると、伝わらない人がいます。アイコンや文言を併記してください。
- 印刷したときの色：画面の発色と印刷物の色は一致しません。
配色の考え方は別記事に
よくある質問
3桁のHEX（#abc）に対応していますか？
はい。3桁・6桁のHEX、rgb()、hsl() を認識します。
透明度（アルファ）は？
現在はRGB/HSLの色相・彩度・明度に対応しています。アルファは今後の対応予定です。
データは送信されますか？
いいえ。すべて端末内で計算します。
コラム
ほかの開発ツール