HSL to HEX
どの色形式も同じものを別の言語で表しています。HEX はスタイルシート、RGB は画面とコード、HSL はパレット構築、CMYK は印刷向けです。必要な変換を選び、正確な値・ライブプレビュー・計算式を確認してください。
この色のすべての形式
同じ色を HEX・RGB・HSL・CMYK で表記。どの値もコピーできます。
HSL → HEX 変換
HSL の値はまず sRGB の三つ組（赤・緑・青、0–255）に正規化され、その後 HEX として符号化されます。どちらも同じ画素を表すため、見える色は変わりません。
1
入力を読み取る
HSL の値をチャンネル（16 進数の対、数値、百分率）に分解します。
2
sRGB に正規化
各チャンネルを 0–255 に拡大し、丸めの累積を防ぎます。
3
HEX に符号化
結果を HEX 表記で出力し、スタイルシートやデザインツールに貼り付けます。
計算式
hsl(9, 100%, 60%) → sRGB rgb(255,87,51) → HEX #FF5733
計算例
hsl(9, 100%, 60%) = #FF5733 = #FF5733
チャンネルは整数に丸めます。戻すときは同じツールを使うと誤差を抑えられます。
HSL → HEX 対応表
同じ式で換算した代表値。
| 入力（HSL） | 結果（HEX） | |
|---|---|---|
hsl(11, 100%, 60%) | #FF5733 | |
hsl(243, 75%, 59%) | #4F46E5 | |
hsl(145, 63%, 49%) | #2ECC71 | |
hsl(204, 70%, 53%) | #3498DB | |
hsl(6, 78%, 57%) | #E74C3C | |
hsl(172, 75%, 39%) | #19AE99 | |
hsl(283, 39%, 53%) | #9B59B6 | |
hsl(37, 90%, 51%) | #F39C12 | |
hsl(210, 29%, 29%) | #34495E | |
hsl(340, 82%, 52%) | #E91F63 | |
hsl(0, 0%, 0%) | #000000 | |
hsl(0, 0%, 100%) | #FFFFFF |
すべての変換
よくある質問
HSL を HEX にすると色は変わりますか？
いいえ。どちらも同じ sRGB の色を表し、表記だけが変わります。
他の変換ツールと HEX の値が違うのはなぜですか？
丸めの違いです。ツールによって丸める段階や白点が異なります。当サイトは CSS Color 4 と D65 に従います。
HEX の値をそのまま CSS に書けますか？
はい。HEX は CSS 標準または広く対応された表記で、スタイルシートや canvas、デザインツールで使えます。
印刷にはどの形式を使いますか？
印刷は CMYK、画面は RGB/HEX を使います。CMYK は近似のため、最終データは印刷プロファイルで変換してください。