颜色选择器
可视化选择颜色并复制 HEX / RGB / HSL 值。
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS var
--brand: #3B82F6;
隐私安全全部在浏览器本地完成,数据不上传
简单易用粘贴或输入即可,结果实时呈现
永久免费不限次数,无需注册
快速高效先进技术,处理高效稳定
选一个颜色、读出它精确的代码,本不该非得开一个设计软件。用这个取色器可视化地挑选色调,或直接从屏幕上吸取颜色,得到可粘贴进 CSS 或设计工具的 HEX、RGB 和 HSL 值。
使用步骤: 颜色选择器
- 1输入内容用取色面板或滑块拖动选取你想要的颜色。
- 2设置选项或直接在输入框粘贴一个 HEX、RGB 或 HSL 色值定位颜色。
- 3开始处理在实时预览中微调色相、饱和度与明度。
- 4获取结果点击 HEX、RGB 或 HSL 值旁的复制按钮取用色值。
常见用途
快速取色挑一个色调并复制它的 HEX,不必启动笨重的编辑器。
一次读到所有格式把同一个颜色同时看成 HEX、RGB 和 HSL。
对齐品牌色精确调出某个色调,复制代码用到你的样式表里。
从屏幕上取样用吸管工具,把你在页面上看到的颜色取下来。
使用提示
HEX、RGB 和 HSL 是同一个颜色它们是同一色调的三种写法。HSL 让“亮一点”或“饱和度低一点”更好把握,HEX 则在 CSS 里更紧凑。
吸管功能依赖浏览器支持屏幕取样用的是一项浏览器功能,Chrome 和 Edge 支持,但有些浏览器没有。没有时,请改用可视化挑选。
屏幕颜色不是印刷颜色屏幕上以 RGB 发光的颜色,印到纸上(CMYK)可能会偏移。涉及印刷时,请以印刷厂的色彩配置为准,而不是屏幕。
复制后,放到实际环境里再看同一个颜色在不同背景下观感会变。把它粘到将要使用的位置,再在那里判断。