颜色工具

调色板生成器

从基色生成美观的调色板。单色、互补、三色、类比、四色和自定义和谐模式。

colorpaletteschemegeneratorcolor scheme

Color Palette Generator

Base Color

HEX

Complementary

Triadic

Tetradic

Analogous

Monochromatic

Export as CSS Variables

:root {
  --color-complementary-1: #2463eb;
  --color-complementary-2: #ebac24;
  --color-complementary-3: #9a6e0e;
  --color-complementary-4: #0e3b9a;
  --color-complementary-5: #d3a33c;
  --color-triadic-1: #2463eb;
  --color-triadic-2: #eb2463;
  --color-triadic-3: #63eb24;
  --color-tetradic-1: #2463eb;
  --color-tetradic-2: #eb24c6;
  --color-tetradic-3: #ebac24;
  --color-tetradic-4: #24eb48;
  --color-analogous-1: #24c6eb;
  --color-analogous-2: #2494eb;
  --color-analogous-3: #2463eb;
  --color-analogous-4: #2431eb;
  --color-analogous-5: #4824eb;
  --color-monochromatic-1: #071b46;
  --color-monochromatic-2: #0d358c;
  --color-monochromatic-3: #2463eb;
  --color-monochromatic-4: #739bf2;
  --color-monochromatic-5: #b9cdf8;
}

What is 调色板生成器?

调色板生成器使用既定的色彩理论规则，从单个基色创建和谐、视觉平衡的配色方案。选择协同工作的颜色是UI设计中最困难的部分之一— 不匹配的调色板会使界面感觉不专业且不可访问。本生成器实现七种既定的色彩和谐模式：单色（一种色调的色调、色泽和阴影，用于最小化的简洁设计）、互补（色轮上的对立颜色，用于高对比度CTA）、分裂互补（基色加与其互补色相邻的两种颜色，比严格互补更柔和）、三色（围绕色轮等间距的三种颜色，平衡的活力）、类比（相邻颜色，用于宁静自然感的调色板）、四色/方形（形成矩形/方形的四种颜色，用于复杂丰富的方案），加上用于微调的自定义模式。每个调色板产生5至10个色板，包含hex、RGB、HSL值，计算与白色和黑色文本的WCAG对比度比率以进行可访问性检查，并将调色板导出为Tailwind配置、CSS变量、SCSS变量、PNG图片或Adobe ASE（Swatch Exchange）格式，以直接导入Figma、Photoshop和Illustrator。锁定特定色板同时重新生成其他色板，或从任何上传的图片中提取调色板。

When to Use 调色板生成器

用于设计应用界面、创建品牌色彩系统、选择可访问的文本/背景对、构建Tailwind配置文件、CSS设计令牌，或为Figma/Photoshop准备色板。

How to Use 调色板生成器

选择或输入基色。选择和谐模式。每个色板显示HEX/RGB/HSL值和与文本的对比度。导出调色板为Tailwind配置、CSS变量、ASE色板或PNG图片。