🎨 配色方案生成器 — 构建 5 色调色板

Generate harmonious 5-color schemes from any base color. Complementary, analogous, triadic, tetradic, monochromatic. Export as CSS variables or Tailwind.

Enter a base color and instantly see five harmonious colors generated using classic color theory rules: complementary (opposite), analogous (adjacent), triadic (three equidistant), tetradic (four), or monochromatic. Export as CSS custom properties, a Tailwind config, or JSON.

Base Color

Scheme

Export as:

How to Use

Pick a base color

Click the base color swatch or enter a HEX value to set your starting color.

Choose a scheme

Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.

Export the palette

Lock colors you want to keep, click Regenerate to vary others, then export as CSS variables, Tailwind, or JSON.

Frequently Asked Questions

What is a color palette in design? +

A color palette is a set of colors chosen to work harmoniously together in a design. Color theory defines relationships between colors: complementary (opposite on the color wheel), analogous (adjacent), triadic (three equidistant), tetradic (four), and monochromatic (same hue, varying lightness).

What is a complementary color scheme? +

Complementary colors are directly opposite each other on the color wheel (e.g., blue and orange, red and green). They create strong contrast and visual tension — ideal for call-to-action buttons and highlights that need to stand out.

What is an analogous color scheme? +

Analogous colors are adjacent on the color wheel (e.g., blue, blue-green, green). They create harmonious, natural-looking combinations with low contrast — great for backgrounds, serene designs, and nature-inspired UIs.

How do I lock a color I like? +

Click the lock icon on any color swatch to lock it. Locked colors are preserved when you click Regenerate or change the scheme type. This lets you keep a brand color while varying the supporting palette.

How do I export the palette? +

Use the Export dropdown to copy as CSS custom properties (--color-1: #abc), Tailwind config colors object, or a raw JSON array. All formats are ready to paste directly into your project.

完整指南：配色方案生成器

什么是配色方案？

根据色彩理论生成和谐的颜色组合：互补色、类似色、三角色或单色。精心选择的配色方案能建立视觉识别，引导用户注意力。

如何使用

选择基础颜色。
选择方案类型：互补、类似、三角、单色。
导出为CSS变量或JSON。

专业技巧

主色板限制在3-5种颜色：主色、辅色、强调色和中性色。
始终检查无障碍访问的颜色对比度（至少WCAG AA）。
使用--color-primary-500等CSS变量简化明暗主题切换。