颜色工具
颜色选择器在线工具
在线选择颜色并实时查看 HEX、RGB、HSL 和 CSS 写法，适合设计协作、前端开发、主题配色和页面视觉调试。
实时取色
支持原生色板、HEX 手动输入和浏览器吸管取色，选中后会立即同步输出多种颜色格式和 CSS 代码。
快速操作
支持 3 位和 6 位十六进制颜色，可通过色板选择、手动输入或预设色快速切换。
如果浏览器支持 EyeDropper API，可以直接从屏幕上的图片、设计稿或网页区域拾取颜色。
实时预览
当前选中色
适合用来预览按钮、标签、卡片强调色和标题高亮等常见界面场景。
- HEX
- #FF6347
- RGB
- 255, 99, 71
- HSL
- 9, 100%, 64%
- CSS 文字色
- color: #FF6347;
- CSS 背景色
- background-color: #FF6347;
适合哪些场景
颜色选择器适合做快速取色、主题配色确认和前端样式落地。
- 从设计稿或网页截图里取一个近似色，再立刻拿到 HEX、RGB 和 HSL。
- 给按钮、标签、卡片强调色选择更合适的品牌或活动色。
- 在做主题色扩展时，先选定主色，再继续用其他转换工具做规则化处理。
为什么要同时看多种格式
同一个颜色在不同工作流里通常对应不同表达形式，只看 HEX 往往不够。
- HEX 适合前端样式和设计规范引用。
- RGB 更适合阴影、透明度和图像处理相关场景。
- HSL 更适合做明度、饱和度和同色系层级扩展。
常用参考色
下面这组常见颜色可以帮助你快速开始配色选择，也方便对照 HSL 表达。
颜色名HEXHSL备注
珊瑚橘#FF7F5016, 100%, 66%活跃、醒目，适合按钮强调色。
番茄红#FF63479, 100%, 64%常见于营销页 CTA 和状态提示。
海盐蓝#1E88E5208, 79%, 51%适合信息类和 SaaS 风格页面。
森林绿#2E7D32123, 46%, 34%常用于成功反馈与自然主题。
芥末黄#D4A01743, 80%, 46%适合点缀和强调，不适合作大面积正文背景。
葡萄灰#6D6875263, 6%, 43%适合中性色辅助块和信息面板。
象牙白#F7F3EA42, 45%, 94%适合作为大面积背景，降低刺眼感。
墨夜蓝#1F2937215, 28%, 17%适合作为正文、标题和深色背景。
使用建议
如果你在做正式页面配色，不要只看单一色值，还要看它与正文、背景和交互状态的配合效果。
- 先用颜色选择器确定主色，再用对比度检测确认可读性。
- 如果要做 hover 或禁用态，可以继续配合 HSL 转换工具微调明度和饱和度。
- 最终交付前，建议把常用颜色沉淀成统一色板，减少后续页面漂移。
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。