HEX:#3B82F6
RGB:rgb(59, 130, 246)
RGBA:rgba(59, 130, 246, 1)
HSL:hsl(217, 91%, 60%)
HSLA:hsla(217, 91%, 60%, 1)
手动输入
#
常用颜色
渐变预览
可读性检查(WCAG)
白色文字
对比度:3.68:1
✗ AA|✗ AAA
黑色文字
对比度:5.71:1
✓ AA|✗ AAA
如何使用
选取颜色
使用取色器或拖拽色盘选取目标颜色。
查看色值
查看 HEX/RGB/HSL 转换结果和对比度评分。
复制色值
一键复制所需格式的色值到代码中使用。
关于 颜色选择器
颜色选择器不是只给设计师用的工具,前端开发、品牌运营、产品经理在日常工作中都会频繁遇到“颜色不统一”的问题。比如活动页按钮颜色和品牌主色不一致、设计稿标注是 RGB 但代码要写 HEX、UI 组件暗黑模式下对比度不达标。这个工具把 HEX、RGB、HSL 互转、取色、对比度检查放到一个页面里,适合在设计与开发协作中快速对齐颜色规范。
对 AI 辅助设计场景也很有帮助:你用大模型生成配色建议后,可以在这里验证可读性与无障碍对比,再落地到实际界面。相比在多个软件间来回切换,浏览器色彩工具路径更短、反馈更快,特别适合需要高频试色和主题迭代的智能办公团队。
关键词:颜色选择器在线取色器免费配色工具浏览器颜色转换AI 辅助设计AI + 配色智能办公设计工具HEX RGB HSL 转换对比度检查配色教程配色技巧Coolors 替代Adobe Color 替代前端 UI 调色设计使用场景在线 AI 工具
常见问题
Q:HEX、RGB、HSL 应该用哪个?▼
A:前端样式常用 HEX/RGB,设计调色与明暗控制常用 HSL,可按场景选择。
Q:对比度检查有什么用?▼
A:可帮助判断文本与背景是否易读,满足可访问性和视觉规范要求。
Q:适合做品牌色管理吗?▼
A:适合,可快速建立主色、辅色和状态色并输出统一格式给设计与开发。
Q:随机配色能用于实际项目吗?▼
A:可作为灵感起点,建议再结合品牌调性与可读性规则做二次筛选。
Q:和 AI 设计工具怎么配合?▼
A:先让 AI 给出色板,再在本工具校验转换与对比度,最后落地到页面代码。
你可能还需要
配色完成后可生成对应风格图片