Hex→HSL 色変換 オンライン
`#RGB`、`#RRGGBB`、`#RRGGBBAA` を CSS の `hsl()` / `hsla()` に変換し、ライブスウォッチ付き。デザイナーがピッカーから hex をコピーし、スタイルで明度や彩度を hex 計算なしで動かしたいときに。
HSL は色相・彩度・明度を分け、「少し暗く」は hex の桁いじりより簡単なことが多いです。
アルファ付き 8 桁 hex は hsla；不透明は hsl。
デザインアプリとのわずかな差は色空間の違い — プレビュースウォッチを信頼してください。
変換の手順
- hex を入力
- HSL 出力とスウォッチを確認
- CSS にコピー
HSL の便利さ
- CSS 変数で明暗バリエーションを作る。
- デザイン引き渡しの hex とコードを揃える。
- 即時プレビューで試行錯誤を減らす。
シナリオ
- ブランド hex → hsl カスタムプロパティ
- 明度シフトでボタン hover
- 8 桁 hex のアルファを確認
ヒント
- 入力の `#` は任意。
- 短い `#abc` は `#aabbcc` に展開。
- アルファの要否で hsl と hsla をコピー。
例
| 入力 | 出力 | 備考 |
|---|---|---|
| #FF5733 | hsl(...) | 不透明 |
| #FF573380 | hsla(...) | 半透明 |
Hex→HSL FAQ
- RGB 変換との関係は？
- サイトには hex↔RGB もあります。知覚的な明暗調整には HSL がしばしば向きます。
- Figma と一致しない？
- 丸めと色域が違います — 対象ブラウザで判断してください。