:root {
--color-100: #f5d0fb;
--color-200: #eba1f7;
--color-300: #e272f3;
--color-400: #d843ef;
--color-500: #ce14eb;
--color-600: #a510bc;
--color-700: #7c0c8d;
--color-800: #52085e;
--color-900: #29042f;
}About the Color Palette Generator
Generate a coordinated color palette from a single base color. The tool derives complementary, analogous, triadic and shade variations using established color-wheel relationships, then outputs every swatch as HEX, RGB, HSL or a ready-to-paste block of CSS custom properties. Useful when you have one brand color and need a full set that works with it.
How to use the Color Palette Generator
-
Pick a base color
Enter a HEX value or use the picker. Every derived scheme updates from this single input.
-
Choose a harmony scheme
Switch between complementary, analogous, triadic and shade ramps to see different relationships to the base color.
-
Copy in your preferred format
Copy an individual swatch as HEX, RGB or HSL, or export the whole palette as CSS custom properties ready to paste into a stylesheet.
When to use it
Building a design system
Derive a consistent set of accent and shade tokens from a single brand color.
Choosing UI state colors
Generate hover, active and disabled variants of a button color that stay in the same hue family.
Starting a visual identity
Explore harmonies around a color you like to find a secondary and accent pairing.
Frequently asked questions
What is a complementary color scheme?
Two colors sitting opposite each other on the color wheel. The contrast is strong, which makes complementary pairs effective for calls to action but harsh for large adjacent areas.
When should I use analogous colors instead?
Analogous schemes use neighbouring hues, producing a calmer, more cohesive look. They work well for backgrounds and surfaces where you want harmony rather than contrast.
Does this check accessibility contrast?
Partly. The "Text contrast" column shows the WCAG contrast ratio of white and of black text on every color, but it does not score palette colors against each other. Harmony and contrast are separate concerns — a palette can be visually pleasing and still fail WCAG contrast requirements for text. Verify the actual text and background pairs against a contrast checker before shipping.
What is the difference between HEX, RGB and HSL?
They describe the same colors in different notations. HSL is the most useful for editing by hand, because adjusting lightness or saturation is a single number change rather than a recalculation of three channels.
Related tools
Browse all free online tools on Tooly — every one runs in your browser, with no account required.