Color Palette Generator
Generate, extract and export CSS color palettes
Free online color palette generator — create cohesive color schemes from a single base color. Supports complementary, triadic, analogous and split-complementary harmonies. Export as CSS custom properties, Tailwind config, JSON or HEX. Includes WCAG contrast scores and tonal scale.
// quick guide
A color palette is a cohesive selection of colors chosen to create a specific design aesthetic or visual harmony. Using color theories like complementary or analogous harmonies helps build balanced color systems for websites and applications.
How to use this tool:
- Choose a base color using the color picker or input a hex/hsl code.
- Select a color harmony from the list: Complementary, Triadic, Analogous, Split-Complementary, or Monochromatic.
- Review the WCAG contrast score for each generated color against black and white to ensure accessibility.
- Export the palette to CSS custom variables, Tailwind CSS configuration, or standard JSON/HEX.
// frequently asked questions
What are color harmonies?
Color harmonies are rules for choosing colors based on their position on the color wheel. For example, complementary colors are opposite each other, creating vibrant contrast, while analogous colors are adjacent, creating calm and cohesive looks.
How do WCAG contrast scores affect my palette?
WCAG contrast scores measure the readability of text. A contrast ratio of at least 4.5:1 is required for normal text (AA rating). Checking these scores ensures your UI remains readable for visually impaired users.
Can I directly import these colors into Tailwind CSS?
Yes. The tool generates copy-pasteable Tailwind configuration objects that you can drop directly into your tailwind.config.js file.