UlvixorColor Palette Generator
Pick a base color and this tool generates a harmonious palette using classic color theory rules (analogous, complementary, triadic, tetradic, or split-complementary), plus a tint/shade ramp of that same color ready to use for hover states or backgrounds. All of the math happens in your browser.
How it works
- Pick a base color with the visual picker or by typing its hex code.
- Choose the harmony type: monochromatic, analogous, complementary, triadic, tetradic, or split-complementary.
- The palette recalculates instantly based on the base color and chosen harmony; each rule produces the number of colors that actually belongs to it (for example, 2 tones for complementary, 3 for triadic).
- Below it, a 5-step tint/shade ramp of the base color is always shown, useful for backgrounds, borders, or hover states without leaving the same color family.
- Click any color to copy its hex code, or copy the whole palette as CSS variables ready to paste into your stylesheet.
Use cases
- Pick the colors for a brand or interface starting from a single reference color.
- Generate hover, focus, or disabled variants of a button from the design's primary color.
- Explore color combinations for a presentation, illustration, or app palette.
- Quickly get CSS variables (`--color-1`, `--color-2`...) to prototype with instead of picking colors by hand.
Use cases
- Pick the colors for a brand or interface starting from a single reference color.
- Generate hover, focus, or disabled variants of a button from the design's primary color.
- Explore color combinations for a presentation, illustration, or app palette.
- Quickly get CSS variables (`--color-1`, `--color-2`...) to prototype with instead of picking colors by hand.
Common mistakes
- Expecting every harmony rule to return the same number of colors.Each color theory rule implies a different number of tones: complementary is 2 tones (with lightness variants), triadic is 3, tetradic is 4. This tool respects that count instead of artificially padding it to a fixed number.
- Typing an incomplete hex code or invalid characters into the text field.The text field only updates the palette once the value is a valid 6-digit hex code (e.g. #3366CC); until then, the palette keeps showing the last valid base color.
- Looking for the generated colors in a history after closing the tab.The palette isn't saved anywhere; if you need to keep the result, copy the hex codes or CSS variables before closing the tab or changing the base color.
Frequently asked questions
No. The palette is calculated entirely in your browser from the base color you choose.
Monochromatic uses a single hue at different lightness levels; analogous uses neighboring hues on the color wheel; complementary uses the opposite color; triadic and tetradic spread 3 or 4 evenly spaced hues; split-complementary pairs a color with the two neighbors of its opposite, a somewhat softer contrast than pure complementary.
Yes, the CSS variables block generates a `:root { --color-1: ...; }` snippet ready to paste into your stylesheet and use with `var(--color-1)` wherever you need it.
It's a series of lighter and darker variants of the same base color, independent of the chosen harmony. It's useful for backgrounds, borders, or interaction states (hover, active) that need to stay within the same color family instead of introducing a new hue.
Alternatives
Adobe Color and Coolors generate palettes in a similar way, with more export rules and cloud saving. This tool is convenient for a quick palette based on classic color theory, without creating an account or depending on an external service.