Free Tool
Color Palette Generator
Generate a complete CSS custom property color system from a single primary color. Tints, shades, harmonies, and WCAG contrast ratios — ready to paste into your .less file or style block.
Why this matters
Picked a brand color but struggling to build a whole website around it? This tool takes your single color and generates a complete palette — lighter tints for backgrounds, darker shades for text, and complementary colors that all work together. Plus it checks if your text is readable.
Choose Primary Color
Primary — Tints & Shades
Color Harmonies
Preview — Mock UI Card
Card Heading
This is a preview of how your primary color, tints, and shades look when applied to a typical UI card component with heading, body text, and a call-to-action button.
Unlock mock UI preview
Export
Copy the generated variables and paste them into your stylesheet.
:root {
--color-primary: #3a5dae;
--color-primary-light: #758ec6;
--color-primary-lighter: #9daed7;
--color-primary-lightest: #d8dfef;
--color-primary-dark: #2e4a8b;
--color-primary-darker: #233868;
--color-primary-darkest: #14213d;
--color-complementary: #ae8b3a;
--color-analogous-a: #513aae;
--color-analogous-b: #3a97ae;
--color-triadic-a: #ae3a5d;
--color-triadic-b: #5dae3a;
}@color-primary: #3a5dae; @color-primary-light: #758ec6; @color-primary-lighter: #9daed7; @color-primary-lightest: #d8dfef; @color-primary-dark: #2e4a8b; @color-primary-darker: #233868; @color-primary-darkest: #14213d; @color-complementary: #ae8b3a; @color-analogous-a: #513aae; @color-analogous-b: #3a97ae; @color-triadic-a: #ae3a5d; @color-triadic-b: #5dae3a;
Unlock CSS & LESS code export