← 全部工具
数据不出浏览器
Color Picker — HEX / RGB / HSL
免费在线 color picker。选色并在 HEX、RGB、HSL 之间转换，复制到 CSS。
HEX
RGB
HSL
跨颜色格式工作
同一个颜色有多种表示法，每种都有存在的理由。HEX 紧凑，是设计工具交付的默认格式；RGB 对应屏幕发光的加法混合；HSL 对应人脑理解配色的方式，因为你可以只调明度而不动色相。
Alpha 是最容易转错的部分。八位 HEX 把透明度放在最后，写作 RRGGBBAA；CSS 的 rgba() 则用第四个 0 到 1 的数值表示。所以 #ffffff80 大约是半透明白，而不是 80% 不透明——因为它是十六进制，0x80 等于十进制的 128。
还有两个现实中的坑。HEX 不做色彩管理，同一个色值在不同屏幕上会略有差异；而单独看很好看的颜色，放到实际文字背景上可能对比度不达标。请针对真正上线的搭配去检查，而不是只看色板本身。
常见问题
- 设计师为什么需要 color picker？
- 快速得到网页与设计工具可用的精确色值。
- 什么是 HSL？
- HSL 用色相、饱和度、亮度描述颜色，调色更直观。
- 可以复制 CSS 吗？
- 可以。一键复制 hex、rgb() 或 hsl() 字符串。
- 怎么把 HEX 转成 RGB？
- 把六位数字分成三组，每组两位。#1E90FF 拆成 1E、90、FF，对应十进制的 30、144、255。遇到 #1AF 这种简写，先把每位重复一遍变成 #11AAFF，再读三个通道。
- alpha 值是什么意思？
- 它表示不透明度，从完全透明到完全不透明。HEX 用最后两位十六进制数表示（00 到 FF），rgb() 和 hsl() 则用第四个 0 到 1 的十进制数表示。十六进制里的 80 约等于 0.5，而不是 0.8。
- 为什么换个屏幕颜色就不一样了？
- 多数消费级显示器没有经过校准，同一个色值可能偏暖、偏冷或亮度不同。这对品牌色和文字对比度影响最大，所以对比度要用数值判断，而不是靠眼睛看。