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%。
相关工具
颜色格式转换器
在 HEX、RGB、HSL、HSV、OKLCH 与 CSS 变量之间互转任何颜色。
颜色 0 0
随机颜色生成器
以 HEX、RGB 或 HSL 批量生成随机颜色 —— 选择数量，一键复制任意值，并即时重新生成以获取设计灵感。
随机 0 0
波长转颜色（nm → sRGB）
把光的波长（380–780 nm，可见光）转换为近似的 sRGB 颜色，附可点击的彩虹渐变条，以及来自真实太阳光谱的 Fraunhofer 吸收线参考表。
颜色 0 0
CMYK ↔ RGB 颜色转换器（印刷色空间）
在屏幕用 RGB/hex 与印刷用 CMYK 百分比之间相互转换，支持 Simple、GCR（灰成分替换）和 UCR（底色去除）三种黑版生成策略，提供分色通道预览和总墨量读数。
颜色 0 0
Tailwind 调色板
完整 Tailwind CSS 默认调色板 — 22 色相 × 11 色阶（50 至 950）— 点击复制为 Tailwind 类、HEX 或 rgb()。
颜色 0 0
颜色亮度对比 (HSL vs Lab L* vs WCAG vs HSP)
对一种或两种颜色并行比较 HSL 亮度、HSV 值、WCAG 相对亮度(LRV)、CIE Lab L*(感知亮度)、Rec. 709 Luma、HSP 感知亮度与朴素 (R+G+B)/3 共七种亮度指标,通过差值揭示为何「更亮」的颜色反而显得更暗。
颜色 0 0