:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}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.
Use the color picker or type a HEX value to set the color your palette is built around.
Switch between shades and tints, monochromatic, complementary, analogous, triadic, and tetradic to see different coordinated schemes.
Each swatch shows its HEX, RGB, and HSL value. Click a swatch to copy it, or copy the whole palette as CSS custom properties.
Use the generated colors for backgrounds, accents, and text in your design or stylesheet, keeping the harmony consistent across your UI.
Shades and tints, monochromatic, complementary, analogous, triadic, and tetradic schemes cover every common colour relationship
Every swatch shows all three formats, so you can drop the right value straight into CSS, design tools, or code
Export the whole palette as :root custom properties, ready to paste into your stylesheet as a design token scale
Harmonies are computed in HSL so hues stay evenly spaced and lightness steps look balanced, not muddy
Pick colors and convert between HEX, RGB, and HSL formats
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.
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!