HEX を HSL に変換
HEXカラーコードを色相・彩度・輝度に変換して、明るい色や暗い色のバリエーションを簡単に作れます。
ファイルはお使いのデバイスから外に出ません完全無料
#FF3D72
hex 入力
結果 · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
使い方: HEX を HSL に変換
- 1
色を入力する
カラーコードを入力するか、カラーピッカーで色を選びます。各フィールドには表示されている形式で入力できます。
- 2
変換結果を確認する
入力と同時に結果が更新され、色のライブプレビューも表示されます。
- 3
コードをコピーする
必要な値をワンクリックでコピーし、デザインや CSS、印刷設定に貼り付けます。
HEXとHSLの色
HEXは、CSSやデザインツールで色を書くときの表記で、#の後に赤・緑・青を表す16進数の2桁が3組続きます。HSLは同じ色を人の考え方に近い形で表すもので、色相はカラーホイール上の0〜360°の角度、彩度と輝度はパーセントで表します。
HSLへの変換は、1つの色のバリエーションが必要なときに便利です。色相を保ったまま輝度を変えれば、ホバー時の色、背景、枠線用の明るい色や暗い色が得られます。ブラウザはどちらの表記も理解でき、たとえばhsl(342, 100%, 62%)のように書けます。3桁または6桁のコードを#の有無にかかわらず貼り付けて、hsl()の結果をコピーしましょう。RGB、HSV、CMYKも表示されます。
すべての処理はブラウザ内で完結します。画像がサーバーにアップロードされることはありません。