HSL を HEX に変換
色相・彩度・輝度を設定すると、対応する6桁のHEXカラーコードをすぐにコピーできます。
ファイルはお使いのデバイスから外に出ません完全無料
#FF3D77
hsl 入力
結果 · HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
使い方: HSL を HEX に変換
- 1
色を入力する
カラーコードを入力するか、カラーピッカーで色を選びます。各フィールドには表示されている形式で入力できます。
- 2
変換結果を確認する
入力と同時に結果が更新され、色のライブプレビューも表示されます。
- 3
コードをコピーする
必要な値をワンクリックでコピーし、デザインや CSS、印刷設定に貼り付けます。
HSLをHEXに変換する理由
HSLは、カラーシステムを作る最も直感的な方法です。たとえば紫なら262°のように色相を固定し、主に輝度を変えるだけで色のスケール全体を作れます。背景には95％前後、ボタンやアクセントには58％、文字には30％といった具合です。デザイナーや開発者は、この方法で淡い色、濃い色、ダークテーマを作ります。
しかし、完成したスケールは通常HEXコードで納品する必要があります。スタイルガイド、デザイントークン、Figmaライブラリ、ブランドブック、多くのCMSでは#RRGGBBの値が求められます。HSLの値を入力してHEXの結果をコピーしましょう。たとえば、hsl(262, 83%, 58%)は#7C3BEDになります。同じ色のRGB、HSV、CMYKも表示されます。HEXは1チャンネルあたり256段階しか保存できないため、HSLのごくわずかな変更ではHEXコードが変わらないこともあります。
すべての処理はブラウザ内で完結します。画像がサーバーにアップロードされることはありません。