颜色选择器 - 在线取色与HEX RGB HSL颜色格式转换
什么是颜色选择器？
颜色选择器是一款在线取色工具，支持HEX、RGB、HSL、HSV等颜色格式的互相转换，提供色板选取、渐变生成、对比度检测和配色方案推荐。适用于UI设计、前端开发、品牌配色等场景。
设计师给了一个HEX色值，你需要转成RGB用在Canvas里；品牌色是HSL格式，你需要转成CSS变量。颜色选择器不仅帮你选色，更帮你在不同格式之间无缝切换。
颜色格式详解
- HEX：十六进制表示法，如#FF5733，最常用的网页颜色格式
- RGB：红绿蓝三通道值，如rgb(255,87,51)，直观理解颜色组成
- HSL：色相/饱和度/亮度，如hsl(11,100%,60%)，最符合人类直觉
- HSV/HSB：色相/饱和度/明度，图形软件中常用的颜色模型
- RGBA/HSLA：带透明度通道的扩展格式，支持半透明效果
HSL是最适合调色的格式：调整色相改变颜色，调整饱和度改变鲜艳度，调整亮度改变明暗。
核心功能
格式互转
HEX/RGB/HSL/HSV等格式一键转换，修改任一格式其他自动同步
配色方案
自动生成互补色、类似色、三角色等配色方案
对比度检测
检测前景色与背景色的对比度，确保符合WCAG无障碍标准
使用步骤
- 通过色板点击或输入色值选择颜色
- 调整HSL滑块微调色相、饱和度和亮度
- 查看所有格式的实时转换结果
- 点击配色方案标签查看推荐搭配色
- 点击复制按钮获取所需格式的颜色值
典型应用场景
- UI设计：为界面元素选取合适的颜色，生成配色方案
- 前端开发：将设计稿的颜色值转为CSS可用的格式
- 品牌配色：围绕品牌主色生成完整的色彩体系
- 无障碍检测：确保文字与背景色的对比度满足WCAG标准
- 渐变制作：选取渐变的起止颜色，生成CSS渐变代码
技术实现
颜色转换基于色彩空间数学模型。RGB到HSL的转换通过计算颜色分量的最大值、最小值和差值来推导色相、饱和度和亮度。对比度计算遵循WCAG 2.1标准的相对亮度公式。AA级要求普通文本对比度不低于4.5:1，大号文本不低于3:1。
常见问题
HEX和RGB有什么区别？
本质相同，只是表示方式不同。HEX用十六进制（#FF5733），RGB用十进制（rgb(255,87,51)）。HEX更紧凑，CSS中更常用；RGB更直观，编程中更常用。
HSL和RGB哪个更适合调色？
HSL更适合。在HSL中，每个维度都有明确的视觉含义：调整色相就是改变颜色本身，调整饱和度就是改变鲜艳度，调整亮度就是改变明暗。
对比度4.5:1是什么意思？
对比度是前景色与背景色亮度的比值。4.5:1表示较亮颜色的亮度是较暗颜色的4.5倍。这是WCAG AA级对普通文本的最低要求。
配色方案有哪些类型？
常见类型：互补色（色轮对面）、类似色（相邻色）、三角色（等距三色）、分裂互补色（互补色两侧）。
3位HEX和6位HEX有什么区别？
3位HEX是6位的简写形式，当每两位相同时可缩写。如#FFFFFF可缩写为#FFF，两者在CSS中完全等价。
支持P3广色域颜色吗？
当前版本主要支持sRGB色彩空间。Display P3广色域颜色需要使用color()函数，后续版本会考虑支持。