颜色工具箱

配色方案生成、单色明度阶、对比度检测与渐变生成一站式工具箱

基础颜色

快捷预设

👁 实时预览

应用场景预览

品牌标题示例

用于检查当前基础色上的文字可读性与整体氛围，适合按钮、卡片与品牌主色场景。

3.68:1 与文字对比度偏弱 (<4.5:1)，建议调整亮度

互补色

色环上相对 180° 的两种颜色，对比强烈

类似色

相邻约 30° 的颜色，自然和谐

三角色

色环上等分 120° 的三种颜色，活泼均衡

分裂互补色

基础色 + 互补色两侧各 30°，对比柔和不刺眼

四角色

色环上等分 90° 的四种颜色，丰富饱满

矩形配色

两组互补色组成的矩形，层次丰富

单色明度阶

同一色相由暗到亮的明度梯度，适合统一色调

🎨 导出配色

:root {
  --color-base: #3B82F6;
  --color-complement: #F6AF3C;
  --color-analogous1: #3CE0F6;
  --color-analogous2: #523CF6;
  --color-triadic1: #F63C83;
  --color-triadic2: #83F63C;
}

包含基础色、互补色与类似/三角色，构成可直接用于项目的 6 色核心调色板。

颜色工具箱介绍

颜色工具箱可基于一个基础色生成互补色、类似色、三角色、分裂互补、四角色、矩形配色与单色明度阶，并提供实时预览与 WCAG 对比度提示。支持导出 6 色核心调色板为 CSS 变量、Tailwind、JSON 或 SCSS，另含多步渐变生成与 CSS 代码复制。