颜色选择器
#6366F1
颜色 picker
Hex value
Presets
颜色 formats
HEX#6366F1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)
HSVhsv(239, 59%, 95%)
CSS--color-primary: #6366f1;
TWbg-[#6366f1]
Channels
RGB
r99
g102
b241
HSL
h239°
s84%
l67%
Tints
Shades
Harmonies & contrast
Complementary
Triadic
Analogous
WCAG contrast
Aa
on White
4.47:1 · AA Large
Aa
on Black
4.70:1 · AA
使用方法
- 选择或粘贴颜色。
- 复制 HEX、RGB、HSL 等常用格式。
- 把颜色放回真实 UI 中检查对比度和语义。
常见问题
颜色选择器适合取样吗？
适合快速选择和复制色值，但最终应在设计系统中命名。
HEX 和 RGB 有什么区别？
它们常表示同一 sRGB 颜色，只是写法不同。
选色后要检查什么？
检查对比度、语义用途和与现有 palette 的一致性。
简介
颜色选择器 是一个在线工具，用于在浏览器中快速选择颜色并复制常用色值。它适合设计系统、CSS、主题、可访问性检查和 UI 交付。
什么时候使用
当你需要快速准备、检查或复制颜色或 CSS 输出时，可以使用“颜色选择器”。它能减少手工计算和重复操作，并让结果更容易放入真实工作流。
核心能力
- 在浏览器中快速处理输入，适合临时任务和日常检查。
- 输出清晰，便于复制、下载、记录或继续调试。
- 帮助在发布、测试或提交前发现格式、兼容性或隐私相关问题。
使用建议
- 使用接近真实场景的样例，不要只测试最简单输入。
- 涉及 secret、客户数据、设备隐私或生产配置时，优先使用脱敏内容。
- 对关键结果，在目标系统、设备或浏览器中再验证一次。
颜色结果进入生产前，建议同时检查视觉效果和可访问性。