🎨 颜色选择器

选择颜色,获取 HEX、RGB、HSL 等格式代码

R (红) 233
G (绿) 30
B (蓝) 99
H (色相) 340
S (饱和度) 82
L (亮度) 52
A (透明度) 100%
HEX
RGB
RGBA
HSL
对比度预览
白色文字
对比度: -
黑色文字
对比度: -
🎭 预设调色板
📜 历史颜色
选择颜色后会自动保存到历史

常见问题

颜色选择器工具安全吗?选择的颜色数据会上传服务器吗?

完全安全。所有颜色计算和格式转换都在浏览器本地完成,不会向任何服务器发送数据,历史记录也只保存在你自己的浏览器本地存储中。

HEX、RGB、RGBA、HSL 这几种颜色格式有什么区别?

HEX 是 6 位十六进制表示法(如 #E91E63),常用于 CSS 和设计工具;RGB 用三个 0-255 的数值表示红绿蓝;RGBA 在 RGB 基础上增加透明度通道(0-1);HSL 用色相(0-360°)、饱和度和亮度表示,更贴近人类对颜色的直觉感知。

对比度预览有什么用?

对比度预览展示当前颜色作为背景时,白色文字和黑色文字各自的对比度比值。WCAG 无障碍标准要求正常文字对比度至少 4.5:1,大字体至少 3:1,可直接据此判断颜色是否符合可访问性要求。

如何从页面上的颜色获取其颜色值?

可以使用浏览器自带的取色器(在 Chrome DevTools 的颜色面板中),或者直接在本工具的 HEX 输入框中手动粘贴颜色代码;工具支持直接输入 # 开头的 6 位十六进制值并自动更新所有格式。

历史颜色记录保存在哪里?清除浏览器数据会丢失吗?

历史颜色保存在浏览器的 localStorage 中,最多保留 20 条记录。清除浏览器缓存或 localStorage 数据后历史记录会丢失,建议在使用前复制所需颜色值到其他地方保存。