颜色选择器 & 转换器
选取颜色并在 HEX、RGB、HSL 格式之间转换。生成配色板。
颜色选择器
HEX
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
选取颜色并在 HEX、RGB、HSL 格式之间转换。生成配色板。
这个取色器让你直观地挑选任意颜色，用 HEX、RGB 或 HSL 精细调整，并把色值按项目需要的格式一键复制出来。写 CSS 的前端、对品牌色的设计师，还有任何遇到过”就要那个蓝色”却不知道色值的人，都用得上它。
#3B82F6 这样的 HEX 色值其实就是用十六进制写的 RGB：3B 是红，82 是绿，F6 是蓝，每个通道从 00 到 FF（即 0–255）。它简短、CSS 里通吃，所以样式表里全是它——但想凭直觉调整几乎不可能。#3B82F6 和 #2563EB 哪个更亮？得逐位换算才知道。
HSL 就是为解决这个问题而生的。色相（Hue）是颜色在色轮上的角度（0–360°：0 是红，120 是绿，240 是蓝），饱和度（Saturation）决定颜色的浓烈程度（0% 就是灰色），明度（Lightness）从黑色（0%）经过 50% 的纯色到白色（100%）。想要按钮的深色变体？色相和饱和度不动，明度减 10% 就行。所以不少设计系统内部都用 HSL 定义色板，尽管浏览器三种格式都认。
从零搭建配色时，先定一个主色，剩下的交给配色生成器：三角色方案能给出三个均衡的点缀色，类似色方案则产出对比柔和的近邻色，适合做背景和悬停态。另外，文字和背景的组合定稿之前，记得过一遍对比度检查——你自己看着顺眼的搭配，对弱视用户可能根本没法读。
支持 HEX、RGB 和 HSL 三种格式，修改任意一种，另外两种会实时同步换算。
可以，在输入框里直接键入 HEX 值就能跳到指定颜色，输错了会有错误提示。
它们是经典的色轮搭配方案。互补色在色轮上与所选颜色正对，类似色紧挨着它，三角色则与它均匀相隔 120 度。工具会根据你选的颜色自动生成这三组配色。