:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}What is the Color Palette Generator?
The Color Palette Generator turns a single base color into a coordinated set of colors using colour-wheel harmony rules. Pick a starting color and choose a mode - shades and tints, monochromatic, complementary, analogous, triadic, or tetradic - and the tool calculates a balanced palette with the HEX code for each swatch.
Good color combinations follow predictable relationships on the HSL colour wheel: complementary colors sit opposite each other, analogous colors sit next to each other, and triadic colors are evenly spaced. Working these out by hand means juggling hue angles and lightness values. This tool does the math instantly and shows the result so you can pick a scheme that works.
Everything runs client-side. Adjust the base color, switch modes, click any swatch to copy its HEX code, or use Copy CSS to export the whole palette as CSS custom properties. No account, no uploads, and it keeps working offline once the page has loaded.
A worked example shows how it works as a wedding color palette generator, with one condition: there are no wedding presets, so you bring the color. Type a sage green, #9caf88, as the Base color and pick Complementary. The four swatches are #c2ceb6, #9caf88, a dusty lavender #9b88af and a deeper #755e8d, and Copy CSS returns them as --color-100 to --color-400. For a pastel color palette generator result, start from a pale base such as #a7c7e7: Analogous, Triadic and Tetradic keep its lightness and saturation, so every swatch stays soft.
The harmony modes come from colour-wheel relationships, rotating hue by fixed amounts around the circle: 180 degrees for complementary, 120 for triadic, and small steps for analogous. That maths is done in HSL, which is convenient and not perceptually uniform. HSL lightness treats yellow and blue at the same value as equally light, and to the eye they are not, which is why a triadic set can look balanced on paper and unbalanced on screen. Check any palette you plan to use for text against a contrast checker rather than trusting the numbers. Shades and tints are produced by moving lightness while holding hue and saturation, which keeps a family recognisably related and is what makes them useful as a set of CSS variables.
How to use the Color Palette Generator?
Choose a base color
Use the color picker or type a HEX value to set the color your palette is built around.
Pick a harmony mode
Switch between shades and tints, monochromatic, complementary, analogous, triadic, and tetradic to see different coordinated schemes.
Copy the colors you need
Each swatch shows its HEX code. Click a swatch to copy it, or click Copy CSS to copy the whole palette as CSS custom properties.
Apply the palette
Use the generated colors for backgrounds, accents, and text in your design or stylesheet, keeping the harmony consistent across your UI.
Key Features
Six Harmony Modes
Shades and tints, monochromatic, complementary, analogous, triadic, and tetradic schemes cover every common colour relationship
HEX Codes on Every Swatch
Every swatch shows its HEX code, and a click copies it, so you can drop the value straight into CSS, design tools, or code
CSS Variables Export
Export the whole palette as :root custom properties, ready to paste into your stylesheet as a design token scale
Accurate Colour-Wheel Math
Harmonies are computed in HSL, so hues sit at exact angles around the wheel. HSL is not perceptually uniform, so check contrast before using a pair for text
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!