页面展示的颜色格式
颜色选择器会让同一个颜色在网页和设计常用格式之间保持同步。
- HEX: #RRGGBB
- RGB: rgb(red, green, blue)
- HSL: hsl(hue, saturation, lightness)
颜色工具
颜色选择器工具
选择颜色、用 HSL 微调、实时预览，并复制 HEX、RGB、HSL 或 CSS 颜色值，适合设计交付和前端开发。
颜色控制
颜色预览
#FF0000
HEX
rgb(255, 0, 0)
RGB
hsl(0, 100%, 50%)
HSL
color: #FF0000;
CSS
颜色调色板
暖色
冷色
中性色
高饱和色
如何使用颜色选择器工具
1
根据当前 UI 状态、品牌说明或截图，调整色相、饱和度和亮度，直到颜色看起来合适。
2
实时查看颜色预览，并确认对应的 HEX、RGB、HSL 和 CSS 写法。
3
复制你需要的格式，或者先从调色板选一个颜色再继续微调。
颜色值示例
#2563eb
rgb(37, 99, 235)
清晰的蓝色，常用于链接、强调色和主要操作按钮。
hsl(0, 0%, 100%)
#ffffff
纯白色，可以作为基础参考值。
#f97316
rgb(249, 115, 22)
偏暖的橙色，常用于提醒、徽标和强调状态，但上线前仍要检查对比度。
设计说明
- 如果颜色要用于文字或关键按钮，请先检查对比度。
- HSL 适合在保持颜色大方向不变的情况下微调深浅和饱和度。
- 优先复制项目代码里已经使用的颜色格式，例如 HEX 设计 token 或 CSS 变量里的 RGB 值。
选色并复制 HEX、RGB、HSL 与 CSS 颜色值
做 CSS 和 UI 配色更方便
不必打开完整设计软件，也能直接选色并复制 HEX、RGB、HSL 或 CSS 值。
每次调整都能立刻看到
拖动滑块后，颜色预览和所有格式会马上更新。
微调时不容易丢掉色彩方向
通过色相、饱和度和亮度来细调，比反复重选颜色更省事。
核对设计稿和代码时更方便
核对截图、设计规范或前端颜色值时，手机和桌面都能直接用。
编辑与准确性说明
颜色选择器工具 会把可操作的转换器和必要说明放在同一页。页面会根据当前工具展示换算公式、常见示例、取整提醒和相关工具，帮助用户判断结果是否适合行李、物流、食谱、日志、设计或汽车参数等具体任务。
- 转换结果在浏览器中即时计算，常用单位使用标准换算因子。
- 正式申报、工程、公差、医疗或合规场景，应同时核对原始测量和官方资料。
- 页面说明会优先解释真实使用场景，避免只用重复模板填充页面。
更多颜色工具
颜色选择器常见问题
这个颜色选择器会显示哪些格式？
它会显示 HEX、RGB、HSL 和 CSS 颜色声明，方便你复制到不同工作流里使用。
什么时候会用到颜色选择器？
常见于选 UI 颜色、核对设计交付值、创建 CSS 变量，或者快速试不同配色方案。
选完颜色后还需要检查对比度吗？
需要，尤其是用于文字、图标、表单控件和重要按钮时。颜色好看不代表一定满足对比度要求。