配色方案生成器

工具介绍

从基色生成互补色、邻近色、三色配色或单色深浅方案，复制 HEX 并导出 CSS 变量与 JSON。

设计工具

使用说明

输入 HEX、RGB、HSL 色值或使用取色器，再选择配色模式。点击任意色块复制 HEX，整组颜色可导出为 CSS 变量或 JSON 数组。

配色按 HSL 色相偏移生成，单色模式调整明度，结果均不透明。色块文字从黑白中选择 WCAG 对比度较高者并显示比值。整组配色不代表任意两色搭配都满足无障碍要求，实际文字与背景请使用颜色对比度工具检查。

相关工具

颜色格式转换

转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。

设计工具

颜色对比度检查

检查文字与背景的 WCAG 2.2 对比度，实时预览并分别显示普通与大号文字的 AA、AAA 结果。

设计工具

CSS 渐变生成器

可视化制作线性或径向渐变，编辑 2–8 个色标和位置，实时预览并复制 CSS。

设计工具

CSS 阴影生成器

直观调整位移、模糊、扩展、颜色与透明度，预览外阴影或内阴影并复制 box-shadow。

设计工具

评论

0

最新 最热 连续加载 分页

登录后参与评论。

暂无评论

回复讨论

按时间查看完整回复脉络；每条回复都会标明它回应的具体内容。