颜色面板
HEX/RGB/HSL/HSV 实时互转、WCAG 对比度检查、互补/类似/三角配色板
HEX#3b82f6
RGB
HSL
HSV
WCAG 对比度检查
前景
背景
3.68: 1
❌ AA 普通
✅ AA 大字
❌ AAA 普通
❌ AAA 大字
The quick brown fox 你好世界 123
AaBb 大字示例
配色板
常见问题
HEX 的 3 位和 6 位写法有什么区别？
3 位
#RGB 是简写，每个字符重复一次展开为 6 位 #RRGGBB（如 #3B8 = #33BB88）；6 位为标准写法，每两位表示一个通道。本工具两种写法都支持，大小写不敏感。HSL 和 HSV 有什么区别？
两者都是基于色相（H）的直观色彩模型，区别在第三维：HSL 的 L 是「亮度」，100% 为纯白；HSV 的 V 是「明度」，100% 为纯色（饱和度足时最鲜艳）。设计师软件（PS、Figma）多用 HSV，CSS 的
hsl() 函数用的是 HSL。WCAG 对比度是怎么算的？AA 和 AAA 有什么区别？
先把颜色经 gamma 校正线性化得到「相对亮度」，对比度 = (较亮色 + 0.05) / (较暗色 + 0.05)，范围 1–21（黑白为 21:1）。达标阈值：AA 普通文字 ≥ 4.5、大字 ≥ 3.0；AAA 更严，普通 ≥ 7.0、大字 ≥ 4.5。「大字」指 ≥ 18pt 或 ≥ 14pt 加粗。
配色板的几种和谐配色是什么原理？
都基于色相轮旋转：互补色 = 对角 180°（最强对比）；类似色 = ±30°（柔和协调）；三角配色 = 120° 三等分（活泼均衡）；分裂互补 = 互补色两侧 ±150°/210°（对比中带协调）。点击任一色块可将其设为当前色继续调整。