颜色取色器/ HEX · RGB · HSL
取色、格式转换、配色方案一体化。支持 HEX、RGB、HSL、HSV，自动生成明度梯度和色彩和谐组合。
颜色值
HEX#6366F1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)
HSVhsv(239, 59%, 95%)
R99
G102
B241
预设颜色
明度梯度
10
20
30
40
50
60
70
80
90
色彩和谐
互补色
#6366F1
#F2EF64
邻近色
#64ADF2
#6366F1
#A864F2
三角互补
#6366F1
#F26467
#67F264
这个工具有帮到你吗？
常见问题
支持哪些颜色格式？
工具支持 HEX（如 #6366f1）、RGB（如 rgb(99, 102, 241)）、HSL（如 hsl(239, 84%, 67%)）和 HSV/HSB 格式。在输入框中输入任意格式均可自动解析和转换。
屏幕吸管（EyeDropper）是什么？
点击吸管按钮，然后在屏幕上任意位置点击，即可获取该像素的颜色值。这使用了浏览器原生 EyeDropper API，目前仅 Chrome、Edge、Opera 支持，Firefox 和 Safari 暂不支持。
明度梯度有什么用？
明度梯度展示同一色相和饱和度下，从深（10% 亮度）到浅（90% 亮度）的 9 个色阶。在 UI 设计中，用这种方式可以快速构建一套一致的主题色板，例如按钮的 hover/active/disabled 状态。
色彩和谐是什么意思？
色彩和谐是指在色轮上具有特定关系、视觉搭配效果好的颜色组合。互补色位于色轮对面（高对比度），邻近色是相邻颜色（自然协调），三角互补色是等间距分布的三色（活泼均衡）。
HSL 和 HSV 有什么区别？
两者都使用色相（H）和饱和度（S），第三个分量不同：HSL 用亮度 L（0%=黑，50%=纯色，100%=白）；HSV 用明度 V（0%=黑，100%=最亮）。HSV 更常见于 Photoshop 等设计软件，HSL 在 CSS 中更常用。
如何在 CSS 中使用这些颜色？
最常用的是 HEX 格式，直接复制即可用于 CSS。RGB 格式可用于需要透明度的场景：rgba(99, 102, 241, 0.5)。HSL 格式在 CSS 自定义属性中更灵活，方便通过调整 L 值生成悬停、禁用等变体颜色。