首页 › 前端工具 › 颜色选择器
CS

颜色选择器

HSL 色轮选色、滑块微调,生成互补色、类似色、三角色配色方案

选择方式HSL 色轮 + 色相/饱和度/亮度滑块
配色方案互补色 / 类似色 / 三角色
输出格式HEX / RGB / HSL
交互点击色轮选色,点击配色复制
色相 H 200°
饱和度 S 60%
亮度 L 50%
HEX #4d94b3
RGB rgb(77, 148, 179)
HSL hsl(200, 60%, 50%)
配色方案
互补色
类似色
三角色
当前色相200°
饱和度60%
亮度50%
配色方案3 种

颜色选择器说明

综合颜色选择器集成了 HSL 色轮选择、滑块微调和配色方案生成三大功能。

色轮选择:点击左侧圆形色轮可选择色相和饱和度,色轮中心为白色(低饱和度),边缘为高饱和度。亮度通过下方滑块调节。

滑块调节:提供色相(H,0-360°)、饱和度(S,0-100%)、亮度(L,0-100%)三个滑块,可精确调节颜色。

配色方案:基于当前颜色自动生成三种配色方案——互补色(色相相差 180°)、类似色(色相相差 30°)、三角色(色相相差 120°)。

复制功能:点击任意颜色值或配色方案中的色块,即可复制对应的 HEX 值。

前端工具