調色板產生器

從任意基礎色產生和諧的配色方案（互補色、類似色、三色配色、明暗色調等），並可匯出為 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.