颜色选择器
在线颜色选择工具，HEX、RGB、HSL 格式互转，生成配色方案
选取颜色
#2563eb
输入颜色
最近使用
暂无记录
颜色格式
HEX#2563eb
RGBrgb(37, 99, 235)
HSLhsl(217, 91%, 53%)
配色方案
互补色
类似色
三等分色
分裂互补色
明暗变化
浅色调
深色调
什么是颜色选择器？
颜色选择器是前端开发和UI设计中常用的工具，帮助您精确选取颜色并在不同格式之间转换。HEX 使用十六进制表示，RGB 基于红绿蓝三原色，HSL 基于色相、饱和度、亮度，各有适用场景。
使用方法
- 点击颜色选择器选取颜色，或在输入框中输入颜色值
- 查看 HEX、RGB、HSL 三种格式的转换结果
- 点击格式旁的复制按钮复制颜色值
- 参考配色方案获取互补色、类似色等搭配建议
- 查看明暗变化获取同色系的深浅变体
常见用途
- CSS 开发：快速获取 HEX/RGB/HSL 颜色值用于样式代码
- UI 设计：选取品牌主色并生成完整配色方案
- 无障碍检测：确保文字与背景色有足够对比度
- 颜色转换：在不同颜色格式之间快速转换
常见问题 (FAQ)
Q: HEX、RGB、HSL 有什么区别？
A: HEX 使用十六进制（如 #2563eb），常见于 CSS；RGB 用红绿蓝分量（如 rgb(37,99,235)），适合编程处理；HSL 用色相/饱和度/亮度（如 hsl(217,91%,53%)），更直观易懂。
Q: 什么是互补色？
A: 互补色是色轮上相对的两种颜色，如红与绿、蓝与橙。互补色搭配对比强烈，常用于需要突出显示的场景。
Q: 如何选择好的配色方案？
A: 类似色搭配和谐自然，适合大部分场景；互补色对比强烈，适合强调元素；三等分色丰富多彩，适合活泼风格。建议主色占 60%，辅色 30%，强调色 10%。
Q: 颜色数据会上传到服务器吗？
A: 不会。所有颜色计算都在浏览器本地完成，不会上传任何数据。