调色板生成器

从任意基础色生成和谐的配色方案（互补色、类似色、三色配色、明暗色调等），并可导出为 CSS。

Base color

Scheme

Colors

Click a swatch to copy its hex value.

CSS

:root {
  --color-1: #25e7eb;
  --color-2: #25a5eb;
  --color-3: #2563eb;
  --color-4: #2925eb;
  --color-5: #6b25eb;
}

使用方法

Choose a base color with the swatch or by typing its HEX value.
Pick a scheme such as complementary, analogous or triadic. Shades, tints and analogous also let you choose how many colors to generate.
Click any swatch to copy that color's HEX value.
Copy the whole palette as CSS variables (--color-1, ...) or as a plain HEX list.

注意事项

Palettes are computed from hue-wheel angles and HSL lightness. Complementary rotates the hue by 180 degrees, triadic by 120-degree steps, and analogous shifts within a ±40-degree window. Shades step lightness down and tints step it toward white. Everything is generated locally in your browser.

常见问题

Why do some schemes ignore the color count?: Complementary (2), triadic (3), split-complementary (3) and tetradic (4) palettes have their size fixed by hue geometry. Only analogous, shades and tints can vary the count freely.
Is my palette saved anywhere?: No. The palette disappears when you leave the page, so copy it as CSS variables and paste it into your own project if you want to keep it.