Color Palette Generator
The color palette generator creates harmonious 5-color palettes from any starting hue. Enter a HEX value or use the color picker to set your base color, and the tool applies color theory relationships to build a complete palette instantly. Lock any swatch you want to keep, then regenerate the rest to explore variations. Exports as CSS variables, HEX, RGB, and Tailwind color names.
primary
secondary
accent
neutral
surface
:root {
--color-primary: #6467f2;
--color-secondary: #9b48f4;
--color-accent: #f08df2;
--color-neutral: #78baf7;
--color-surface: #44e9e6;
}How to generate a color palette
Enter any HEX color code into the input field or open the color picker to choose a starting point visually. The generator calculates complementary and analogous relationships to build a balanced 5-color set around your base. Each palette is unique to your input, so entering slightly different values produces distinct results suited to different moods and use cases.
To refine a palette, click the lock icon on any swatch you want to preserve. Locked colors stay fixed when you click the generate button again. Only unlocked swatches receive new values. This workflow lets you keep a brand primary color constant while exploring multiple options for secondary and accent values.
Exporting your palette as CSS variables
After generating a palette you are satisfied with, use the CSS variables export button to copy a ready-to-use :root block. The output follows the --color-1 through --color-5 naming convention. Paste this block into your global stylesheet and reference each variable using the var() function anywhere in your CSS.
Random color palette results can also be exported in Tailwind JIT format, giving you from-, via-, and to- class-compatible values. The Tailwind export formats each color with a suggested label like primary, secondary, or accent. You can rename these labels to match your design system conventions before pasting into a tailwind.config.js file.
What makes a well-balanced color palette
A well-balanced color palette for web design typically includes one dominant neutral, one strong primary, one secondary color, one accent, and one state color for feedback or interaction. This 5-color structure ensures you have enough variety to build visual hierarchy without introducing so much variation that the design feels inconsistent.
Color palette from hex values that maintain consistent saturation across all five colors will feel more cohesive than palettes that mix very saturated and very desaturated colors randomly. The generator applies saturation and lightness rules derived from color theory to keep the output balanced. Run your final result through the contrast checker to confirm each foreground-background pair meets WCAG 2.1 requirements.
Frequently asked questions
Enter any HEX value or use the color picker to set your starting color. The generator applies color theory relationships to build a harmonious 5-color palette around it. Each color in the set can be locked so it stays fixed when you click to regenerate the remaining colors.
Yes. After generating a palette, use the Tailwind export option to get class-compatible color names and HEX values formatted for a tailwind.config.js colors object. You can also copy individual values as CSS custom properties for use in any stylesheet.
Click the lock icon on any swatch to prevent it from changing. When you click the generate button again, only the unlocked swatches receive new colors. This lets you keep colors you like while exploring variations for the rest of the palette.
HEX codes like #3B82F6 are six-character hexadecimal values commonly used in design software and CSS. RGB values like rgb(59, 130, 246) express the same color as separate red, green, and blue channel values from 0 to 255. CSS custom properties like --color-primary: #3B82F6 let you define a color once and reference it by name throughout your stylesheet.