调色板生成器

颜色

选一个基础色，立即用经典色彩理论生成协调的调色板：互补色、类似色、三色、四色、分裂互补色、单色。每个色块显示 HEX 值，一键复制，前景自动对比保证可读性。

—

基础色

配色方案

#3b82f6

#3b82f6

#f6af3b

#f6af3b

使用方法

用色块或输入 HEX 选择基础色。
选择配色方案。
单独复制或一次复制全部。
用于你的设计或 CSS 中。

常见问题

各方案是什么？: 互补取色环对侧；类似取相邻；三色和四色等距分布；分裂互补让互补更柔和；单色仅变化明度。
用什么色彩空间？: 在 HSL 色相上旋转后重新编码为 HEX，保持基础色的饱和度与明度。
能一次性复制吗？: 可以——点击底部的全部复制按钮，按逗号分隔复制整组。
能保证无障碍吗？: 和谐配色不等于无障碍。UI 文本请用色彩对比检查器进一步验证。

相关工具

从图片提取调色板

拖入图片，工具通过 Canvas 分析主色并提取调色板——复制 HEX 或一键复制全部。

色盲模拟器

查看你的图片对 8 种色觉异常（CVD）人群分别如何呈现。

CSS Box Shadow 生成器

可视化设计 CSS box-shadow——多图层、实时预览、CSS / Tailwind 代码一键复制。

颜色格式转换器

在 HEX、RGB、HSL、HSV、OKLCH 与 CSS 变量之间互转任何颜色。

CSS 渐变生成器

用多色停靠点设计线性或径向 CSS 渐变并复制代码。

颜色对比度检查器

按 WCAG AA 和 AAA 级别检查文字/背景对比度。