Base color
CSS variables
:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}Category:color
Mode:Offline
Version:1.0.0
Access:Free
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, RGB, and HSL value 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 in your browser. Adjust the base color, switch modes, click any swatch to copy its value, or export the whole palette as CSS custom properties. No account, no uploads, and it keeps working offline once the page has loaded.
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?
1
Choose a base color
Use the color picker or type a HEX value to set the color your palette is built around.
2
Pick a harmony mode
Switch between shades and tints, monochromatic, complementary, analogous, triadic, and tetradic to see different coordinated schemes.
3
Copy the colors you need
Each swatch shows its HEX, RGB, and HSL value. Click a swatch to copy it, or copy the whole palette as CSS custom properties.
4
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, RGB, and HSL
Every swatch shows all three formats, so you can drop the right 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 stay evenly spaced and lightness steps look balanced, not muddy
Frequently Asked Questions
A complementary scheme uses two colors that sit directly opposite each other on the colour wheel, 180 degrees apart. The high contrast makes them great for accents and calls to action, though large areas of both can feel intense.
Related Tools
CLR
color
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.
CLR
color
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
CLR
color
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
CLR
color
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!
color palette generatorcolor scheme generatorcomplementary colorsanalogous colorsmonochromatic palettecolor harmonyhex color palettewebsite color palette