工坊 / 颜色

工坊 / 颜色

颜色与配色

从图片取色并生成主色、深浅阶梯与 WCAG 对比度，也能按均匀、邻近、互补、三角或单色规则生成配色，并导出 CSS/Tailwind/SCSS。

这个模块能做什么

图片点选取色
主色与深浅阶梯
WCAG 对比度
5 种配色规则
CSS 变量/theme.css
Tailwind/SCSS/HEX

HEX/RGB/HSL · 主色

图片取色器

上传图片后点选取色，查看 HEX/RGB/HSL、5 色主色调、深浅阶梯与 WCAG 对比度；高级功能导出 CSS 变量与 theme.css。

上传点选取色
HEX/RGB/HSL
5 色主色调
深浅阶梯
WCAG 对比度

邻近/互补/三角

调色盘与配色方案

生成均匀、邻近、互补、三角或单色深浅配色，检查对比度并导出 CSS 变量、Tailwind、SCSS 或纯 HEX。

5 种配色规则
对比度检查
CSS 变量
Tailwind 扩展
SCSS map