HSL→Hex 色変換 オンライン
`hsl()` / `hsla()` またはカンマ区切りの色相・彩度・明度を、`#RRGGBB` しか受けないツール向けの hex に。ライブスウォッチ付きで、誤記が本番に出る前に気づきます。
スタイルは HSL、デザイン仕様は hex — この橋で手計算を省きます。
透明な hsla はアルファが重要なとき 8 桁 hex に；相手がアルファ hex を読めないなら opacity を分けてください。
変換の手順
- HSL/HSLA を貼り付け
- スウォッチを確認
- hex をコピー
役立つとき
- CSS 変数は HSL、納品は hex が要る。
- テーマトークンから素早く hex スウォッチ。
- 引き渡し前にチャンネル誤りを捕まえる。
シナリオ
- Tailwind 任意 HSL → ベンダー向け hex
- ドキュメント表を hex で統一
ヒント
- 彩度と明度は通常パーセント。
- 色相は `deg` 付きでも素の数字でも可。
- 不正構文はエラー — 有効な CSS に直してください。
例
| 入力 | 出力 | 備考 |
|---|---|---|
| hsl(9 100% 60%) | #FF5733 付近 | 現代の空白区切り構文 |
| hsla(..., 0.5) | 8 桁 hex | アルファ付き |
HSL→Hex FAQ
- `hsl(a b c / d)` は対応？
- よくある現代形式は可能な範囲で解析；だめならカンマ構文に戻してください。
- スポイトと少し違う？
- hex への丸め — UI 用途では通常無視できる差です。