🎨 Color Palette Generator
Generate harmonious color palettes — complementary, triadic, analogous, and more. Export as CSS variables, HEX list, or JSON. Free online color palette generator for designers.
How to Use
1
Pick a base color
Click the base color swatch or enter a HEX value to set your starting color.
2
Choose a scheme
Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.
3
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变量简化明暗主题切换。