颜色输入
选择或输入颜色
颜色有效。
网页设计工具
颜色选择器
通过原生选择器、HEX 或精确 RGB 控件选色；复制常用格式、探索配色体系、查看明暗阶，并选择易读文字颜色。
实时预览
颜色数值
复制颜色代码
HEX#16735F
RGBrgb(22, 115, 95)
HSLhsl(167.1, 67.9%, 26.9%)
HSVhsv(167.1, 80.9%, 45.1%)
CMYK 估算cmyk(80.9%, 0%, 17.4%, 54.9%)
CSS 变量--color: #16735F;
无障碍
文字对比度
所选颜色上的示例文字
白色文字5.48:1
黑色文字3.83:1
建议文字颜色使用白色文字。
相对亮度0.142
比率采用 WCAG 相对亮度。普通文字 AA 需要 4.5:1、AAA 需要 7:1，大号文字 AA 需要 3:1。
色彩和谐
生成配色
选择一种配色模式，然后点击任意色块即可将其设为新的基准色。
颜色阶
明色与暗色
明色
暗色
明色趋近白色，暗色趋近黑色，同时保留所选色相和饱和度。
颜色选择说明
HEXHEX 紧凑，适合 CSS、设计令牌和共享规范。
RGBRGB 可直接控制红、绿、蓝通道，适合浏览器和 Canvas 工作。
HSLHSL 将色相、饱和度和亮度分开，便于构建相关联的界面颜色。
WCAGWCAG 对比度可帮助为所选背景选择易读的黑色或白色前景文字。
常见问题
可以把它当作 HEX 颜色选择器吗？
可以。使用原生选择器或输入严格的三位或六位 HEX，然后复制 HEX、RGB、HSL、HSV、CMYK 估算或 CSS 变量。
屏幕取色功能支持所有浏览器吗？
不支持。按钮会在浏览器提供 EyeDropper API 时使用该功能；不支持或取消选择时会显示明确提示。
配色是如何生成的？
互补色、邻近色、三角色、分裂互补色、四角色和单色配色均在浏览器中根据所选颜色的 HSL 数值计算。
文字应达到多少对比度？
WCAG AA 要求普通文字达到 4.5:1、大号文字达到 3:1；普通文字 AAA 要求达到 7:1。