颜色选择器

在线颜色选择器,拖动取色或输入数值选取颜色,实时输出 HEX、RGB、HSL 等格式代码并一键复制,适合网页设计与 UI 配色;浏览器本地运行、免费、无需安装。

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

颜色选择器常见问题

颜色选择器怎么使用?

先在输入区填写待处理内容,并检查当前选项;修改输入或使用页面控件后查看结果区域。

同一个色值为什么在不同背景或设备上看起来不同?

颜色观感会受周围背景、透明度、屏幕亮度与色彩管理影响。比较色值时应同时核对颜色空间和透明度,并在最终背景与目标设备上查看。

取到品牌色就能保证文字清晰可读吗?

不能。文字可读性还取决于前景与背景的对比、字号和字重。应使用最终的文字颜色与背景颜色检查,不能只根据色卡或单独一个 HEX 值判断。

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 位十六进制值并自动更新所有格式。

怎样定位需要查看的结果或说明?

先完成页面提供的操作,检查结果区域和状态提示。若需要重新操作,先确认当前输入和选项是否仍保留,避免误用上一次的结果。

颜色选择器的结果应怎样理解?

先核对输入的日期、单位和当前选项,再与实际安排对照。预设数值与示例条目只是起点,保存或分享前应替换成自己的信息。

输入内容会保存或发给外部服务吗?

本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接,以及带外部地址的内容预览仍可能产生网络请求;“本地处理”并不表示整个网页完全没有网络活动。此页还使用浏览器本地存储保留内容或设置,共用设备上请在使用后检查保存的记录;清除站点数据会一并删除本地记录。

没有结果或操作失败时先检查什么?

先检查输入内容是否完整,以及格式、单位和当前选项是否匹配。修改输入后,查看页面的结果或错误提示;可先用少量数据定位问题。

相关工具

随机密码生成器 · 字数统计工具 · 房贷计算器 2025 · Pomodoro Timer · 全部生活工具