オンラインカラー変換ツール
Web デザインでは色の表記を頻繁に切り替えます:デザインは HEX、CSS では明度調整に HSL、コードでは RGB 値が必要、など。このカラー変換ツールは HEX・RGB・HSL をリアルタイムに相互変換し、プレビュー付きで、1 つを変えると他の 2 つが即更新されます。
使い方
- いずれかの欄に色(HEX・RGB・HSL)を入力します。
- 他の 2 形式とプレビューが即座に更新されます。
- 必要な形式をコピーして CSS やデザインツールに貼り付けます。
主な用途
- デザインの HEX を CSS で使いたい HSL に変換。
- HSL で同じ色相の明暗バリエーションを微調整。
- コード用の RGB 値を取得。
明るさの調整は HSL が直感的、透明度もお忘れなく
CSS とデザインツールを行き来していると、同じ色を HEX・RGB・HSL の間で変換したい場面がよくあります。カンプは HEX で渡されるのに CSS では rgba を使いたい、あるいは色相を少し調整するために HSL にしたい、といった具合です。実用的なコツを二つ。色を明るく／暗くしたいときは HSL が一番直感的です。色相 H と彩度 S はそのままに、L(明度)だけを動かせば、同系色の濃淡がきれいに得られ、HEX の数値を当てずっぽうにいじるよりずっと楽です。もう一つ、透明度にも注意を。HEX なら末尾に 2 桁の alpha を足して 8 桁に、rgba なら 0〜1 の値を加えます。形式によって書き方が違うので、変換時に落とさないようにしましょう。
グレーで色相を動かしても何も起きないのはなぜ?
このページの出力がそのまま答えです。白 #ffffff は 0, 0%, 100%、黒は 0, 0%, 0%、中間グレー #808080 は 0, 0%, 50% —— 3 つとも色相 0 ですが、この 0 は「赤」ではありません。彩度が 0% なので未定義であり、ゼロとして報告されているだけです。純赤の 0, 100%, 50% と比べてください。色相の数字は同じ、意味は別物です。彩度がゼロのままなら、どんな色相でも色は付きません。