在线配色工具箱
向下取色，生成配色，转换格式。全部在你的浏览器本地完成， 数据不会上传，也无需注册登录。
取色器
拖动滑块或直接选择颜色，右侧实时更新色值。
#2457D6
rgb(36, 87, 214)
hsl(223, 72%, 49%)
最近使用的颜色
调色板生成
基于上方主色自动生成 5 档明度配色方案，可一键复制整组 CSS 色值。
我的收藏
色轮配色方案
基于上方主色，按经典色轮规则生成配色方案（单色 / 互补 / 类似 / 三元 / 分裂互补 / 四方）。
渐变生成器
选择两个颜色与渐变角度，实时生成可复制的 CSS 线性渐变。
#FF6633
#2457D6
linear-gradient(120deg, #ff6633, #2457d6)
对比度检测
检测前景色与背景色的 WCAG 对比度，判断文本可读性等级。
#FFFFFF
#2457D6
小号辅助说明文字，用于检测详情。
随机配色灵感
一键生成一组协调的随机配色，激发你的创意灵感。
颜色格式转换
输入 HEX / RGB / HSL 任意一种格式，自动转换为其他两种。
#2457D6rgb(36, 87, 214)hsl(223, 72%, 49%)支持 #RGB、#RRGGBB、rgb()、rgba()、hsl()、hsla() 及颜色关键字（如 red）。
CSS 命名色速查
CSS 里有 148 个可以直接写进 color: 的颜色关键字。每个我们都做了一页：
HEX / RGB / HSL 色值、互补与三角配色、明暗阶梯，以及在黑白背景上的对比度，
全部免费在线查看，不需要注册。
常见问题
HEX、RGB、HSL 有什么区别？
HEX（如 #2457D6）是网页中最常用的十六进制颜色写法；RGB 按
红/绿/蓝分量描述颜色；HSL 则按色相（Hue）、饱和度（Saturation）、明度（Lightness）
描述颜色，更符合人对颜色的直觉。本工具支持三种格式一键互转。
这个配色工具是免费的吗？
完全免费，无需注册登录，也没有使用次数限制。所有颜色计算都在你的浏览器本地完成， 色值不会上传到任何服务器。
如何为网站或 UI 挑选可访问的颜色？
使用上方的对比度检测模块，将前景色与背景色输入后即可查看 WCAG 对比度比值及 AAA / AA 等级判定，确保文本对色弱用户和低对比环境仍然可读。
生成的配色方案可以直接用在 CSS 里吗？
可以。调色板、色轮方案、渐变均输出标准 CSS 颜色值（HEX / RGB / HSL）与
linear-gradient() 语法，点击复制后可直接粘贴到样式代码中。
想系统学配色原理或找现成灵感去哪里？
到色彩学院，用可交互色轮动手理解原色、二次色、互补色、HSL 与对比度；或直接去配色灵感图库浏览按风格分类的精选配色， 点击复制色值并查看实时 UI 预览。