颜色选择器与转换器

关于此工具

DevCove 颜色选择器与转换器帮助前端与设计开发者在浏览器内完成 HEX、RGB、HSL 互转，无需离开页面。选择前景色、粘贴 CSS 颜色字符串、编辑通道数值，并复制可直接用于样式的 CSS 片段。还可设置背景色，查看简化版 WCAG 对比度比值与 AA / AAA 提示。若浏览器支持 EyeDropper API，可从屏幕任意位置取色。

如何使用

在编写主题、组件样式或做无障碍检查时，可使用本工具：

1. 用原生颜色选择器选前景色，或粘贴 HEX / RGB / HSL 字符串。
2. 编辑 HEX、RGB 或 HSL 通道，数值会实时同步。
3. 设置背景色，查看简化版 WCAG 对比度比值与 AA / AAA 提示。
4. 复制单个格式，或使用「复制全部格式」便于设计交接。
5. 若浏览器支持 EyeDropper API，可用取色器从屏幕采样。
6. 可加载 DevCove 蓝、石板黑、成功绿等预设快速起步。

功能特点

面向日常 CSS 与 UI 工作，而非完整设计系统管理：

• HEX、RGB、HSL 字段实时同步。
• 前景与背景预览，含示例文字。
• 简化版 WCAG 对比度比值与 AA / AAA / 大字号提示。
• 复制 HEX、RGB、HSL 或打包的全部格式。
• 支持粘贴 #hex、rgb()、rgba()、hsl()、hsla() 字符串。
• 常用品牌色与语义色预设。
• 浏览器支持时可用 EyeDropper 取色。
• 100% 客户端转换，不上传颜色数据。
• 与 HTML Entity、URL 编码、正则测试器等前端工具互补。

常见问题