HSL 颜色选择器
颜色
基于滑块的 HSL 选择器 — 多数 CSS 设计师习惯的色彩模型。每条滑轨可视化滑块所变化的轴 — 可以直观看到当前色相下饱和度 0 的样子，或亮度如何在黑色、当前色和白色之间过渡。输出格式：HEX（可选 8 位带 alpha）、`rgb()` / `rgba()`、`hsl()` / `hsla()` 以及 Tailwind 任意值包装。
—
预览
色相200°
饱和度75%
亮度50%
Alpha100%
输出
- HEX#209FDF
- RGBrgb(32, 159, 223)
- HSLhsl(200, 75%, 50%)
- Tailwind[color:#209fdf]
使用方法
- 拖动滑块。大预览面板反映当前颜色；alpha 低于 100% 时透出棋盘格。
- 点 Random 获取灵感 — 选择合理的饱和度和亮度，不是纯霓虹色。
- 把需要的输出格式复制到你的 CSS 或 Tailwind 实用类。
常见问题
- 为什么用 HSL 而不是 RGB？
- HSL 贴合设计师的思维方式：色相（什么颜色）、饱和度（多鲜艳）、亮度（多明亮）。只调一个轴 — "同色稍暗" — 只需移动一个滑块。在 RGB 里同样变化要动三个通道。
- 8 位 HEX 是什么？
- 当 alpha 降到 100% 以下，HEX 输出扩展为 `#RRGGBBAA`。最后两位十六进制编码 alpha 通道（00 = 透明，FF = 不透明）。现代浏览器和设计工具都支持。
- 为什么饱和度最高的点在亮度 50 而不是 100？
- HSL 中亮度 0% 是纯黑，100% 是纯白 — 两者都消灭饱和度。任何色相最饱和的渲染位于亮度 50%。