调色板生成器

功能特性

互补色

邻近色

三角配色

分裂互补配色

导出为 CSS 变量

使用方法

1. 选择基础色和配色方案 —— 台面随即铺满一组调色板。

2. 按空格键（或点击「换一组」）尝试变化；悬停任意色柱可复制、编辑、展开明暗阶梯，或锁定它不被刷新。

3. 切换台面底色（白 / 灰 / 深 / 棋盘格）在不同环境下校对配色，然后导出为 CSS、Tailwind、JSON、SVG 或 PNG。

关于这个工具

好的配色很少是随机的，大多遵循色轮上的关系。这个生成器从一个基础色出发，按经典的色彩和谐关系生成 6 色配色：类似色（相邻色相，适合沉稳的设计）、单色（同一色相不同明度）、互补色（相对色相，对比强烈）、分裂互补、三角和四角配色。每一列显示色值和近似的颜色名称，可以复制、编辑、展开深浅色阶，或者锁定它，让它在你随机其他颜色时保持不变。可以在白色、灰色、深色或透明棋盘背景上预览配色，然后导出为 CSS 变量、Tailwind 颜色配置、JSON、SVG 或 PNG 色卡。

常见问题

各种配色方案有什么区别？

类似色使用相邻色相；单色保持同一色相只改变明度；互补色搭配色轮上相对的色相；分裂互补使用互补色两侧的色相；三角配色取间隔 120° 的三个色相；四角配色取间隔 90° 的四个色相。

网站适合用哪种方案？

界面最容易用好的是类似色或单色配色，整体感觉平和。互补色和三角配色能提供强烈的强调色，常见做法是一个主色、一个辅助色，再用少量互补色做行动按钮。

锁定颜色是怎么工作的？

锁定某一列后，按空格或“随机”生成变化时，这个颜色会保持不变。品牌色已经确定、想探索与它搭配的颜色时非常有用。

生成的配色符合无障碍要求吗？

色彩和谐不等于文字易读。把配色中的两种颜色用作文字和背景之前，请用对比度检查工具按 WCAG AA（正文 4.5:1）核对。

可以导出哪些格式？

CSS 自定义属性、Tailwind 的 theme.extend.colors 片段、HEX 值组成的 JSON 数组、带色块的 SVG 文件，以及每列标注色值的 1500 × 900 PNG 图片。

功能特性

使用方法

关于这个工具

常见问题

相关工具