A good palette is what turns a single color into a design system. Pick one color you like and this generator expands it in the ways designers actually use: a run of shades and tints for building UI states, and classic harmony palettes — complementary, analogous, triadic and monochrome — for pairing colors that look intentional together. Every swatch shows its HEX code and copies with a click, and you can export the whole set as ready-to-paste CSS variables.
How to use the palette generator
- Choose a base color. Click the swatch to pick visually, or type a HEX code into the field. The palette rebuilds instantly.
- Pick a palette type. Use the tabs to switch between Shades & Tints, Complementary, Analogous, Triadic and Monochrome.
- Copy a single color. Click any swatch to copy its HEX code — handy when you just need one value.
- Export the whole set. Use Copy as CSS variables to get a block like
--color-1: #F0502E;for your stylesheet, or Copy all HEX for a plain list. - Explore quickly. Hit Random base to jump to a new starting color and see how each harmony responds.
What each palette type is for
Shades & tints
Shades are your base color mixed toward black; tints are mixed toward white. Together they give you a ladder of the same hue from dark to light — exactly what you need for hover states, borders, backgrounds and text that all belong to one color family. This is the workhorse palette for interface design.
Complementary
The complementary color sits directly opposite your base on the color wheel (180° away). It creates the strongest possible contrast, which makes it perfect for call-to-action buttons, highlights, and anywhere you want one element to pop against another.
Analogous
Analogous colors sit next to your base on the wheel (about 30° on each side). They feel calm and cohesive because they share undertones — great for gradients, backgrounds, and gentle, harmonious designs that don't fight for attention.
Triadic
A triadic palette takes three colors spaced evenly around the wheel (120° apart). It's vibrant and balanced at the same time, useful when you want variety — say a primary, secondary and accent — while keeping everything visually even.
Monochrome
A monochrome palette keeps the same hue and saturation but steps the lightness, giving a refined, understated set that's almost impossible to get wrong. It's a favorite for minimal, professional interfaces.
How the harmonies are calculated
Under the hood, your base color is converted to HSL so its hue can be rotated around the 360° wheel. Complementary adds 180° to the hue. Analogous produces colors at −30° and +30°. Triadic adds 120° and 240°. Monochrome and shades/tints keep the hue fixed and adjust lightness up and down in even steps. Because the math happens in HSL, the resulting colors stay perceptually related to your base rather than drifting randomly.
A worked example
Start with the orange #F0502E, which is roughly hsl(11, 87%, 56%). Its complementary color rotates the hue by 180° to about 191°, landing on a teal near #2ECEF0 — orange and teal, a famously punchy pairing. The analogous set nudges the hue to about −19° (a red-pink) and 41° (a warm amber), giving three neighbours that blend smoothly. The triadic set jumps to 131° (green) and 251° (violet) for a lively three-color scheme. Same starting orange, four very different directions.
Palette-building tips
| Goal | Best palette |
|---|---|
| UI states (hover, active, disabled) | Shades & Tints |
| Eye-catching buttons / contrast | Complementary |
| Calm backgrounds & gradients | Analogous |
| Playful, varied brand colors | Triadic |
| Minimal, professional look | Monochrome |
Accessibility tip: Whichever palette you choose, always check that text has enough contrast against its background — aim for a contrast ratio of at least 4.5:1 for normal body text.
Frequently asked questions
How many colors does each palette have?
Shades & Tints and Monochrome give you a graded row of five to nine swatches. Complementary, Analogous and Triadic show your base alongside its matching harmony colors.
Can I copy the whole palette at once?
Yes. Use Copy as CSS variables for a ready-to-paste block of custom properties, or Copy all HEX for a simple comma-separated list.
What's the difference between a shade and a tint?
A shade mixes your color with black to make it darker; a tint mixes it with white to make it lighter. Both keep the same underlying hue.
Which palette should I use for a website?
Most sites use shades and tints of one or two base colors for the interface, plus a single complementary accent for buttons and links. Analogous and triadic are great for illustrations, marketing pages and brand work.
Do the colors meet accessibility standards automatically?
No tool can guarantee that, because contrast depends on which two colors you pair. Use the palette as a starting point and verify text-to-background contrast for readability.
Is my base color stored anywhere?
No. Every palette is generated in your browser with JavaScript. Nothing about your colors is uploaded or saved on a server.
About this tool
This generator uses standard color-wheel relationships computed in the HSL color space, so its harmonies match the theory taught in design courses and used in professional tools. Color choice is ultimately creative — treat these palettes as a strong, well-structured starting point, then adjust to taste and always confirm contrast for text. Everything runs locally and instantly in your browser.