Color Palette Generator
Generate a complete design system from a single brand color — with harmony modes, dark mode, accessibility checks, and dev-ready exports.
Start from inspiration
Endless palettes, freshly generated. Click one to use it as your starting point.
Harmony palette
Click the pencil on any swatch to overrideTint & shade scale
Full Design System
Auto-generated from your base color: primary, secondary, accent, branded neutrals, semantic colors, and surface tokens.
Design system palette
Brand Colors
CTAs, key UI elements, and supporting accents
Neutrals
Branded grays for borders, backgrounds, and text
Semantic Colors
Status indicators: alerts, badges, and form validation
Surfaces
Page backgrounds, cards, and text hierarchy
Live preview
Quick contrast check
Contrast matrix
Every cell shows the WCAG contrast ratio between two colors. Green = accessible for body text, amber = large text only, red = insufficient.
| fg ↓ / bg → | Primary | Secondary | Accent | Success | Warning | Error | Info | Background | Surface | Text Primary | Text Secondary | White | Black |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Primary | — | Aa1.9 | Aa1.2 | Aa1.1 | Aa1.0 | Aa1.3 | Aa1.1 | Aa4.3 | Aa4.5 | Aa3.5 | Aa1.2 | Aa4.5 | Aa4.7 |
Secondary | Aa1.9 | — | Aa1.5 | Aa2.0 | Aa1.9 | Aa2.4 | Aa2.0 | Aa2.3 | Aa2.4 | Aa6.5 | Aa2.3 | Aa2.4 | Aa8.8 |
Accent | Aa1.2 | Aa1.5 | — | Aa1.3 | Aa1.2 | Aa1.6 | Aa1.3 | Aa3.5 | Aa3.7 | Aa4.2 | Aa1.5 | Aa3.7 | Aa5.7 |
Success | Aa1.1 | Aa2.0 | Aa1.3 | — | Aa1.1 | Aa1.2 | Aa1.0 | Aa4.6 | Aa4.8 | Aa3.2 | Aa1.2 | Aa4.8 | Aa4.4 |
Warning | Aa1.0 | Aa1.9 | Aa1.2 | Aa1.1 | — | Aa1.3 | Aa1.1 | Aa4.3 | Aa4.5 | Aa3.4 | Aa1.2 | Aa4.5 | Aa4.6 |
Error | Aa1.3 | Aa2.4 | Aa1.6 | Aa1.2 | Aa1.3 | — | Aa1.2 | Aa5.6 | Aa5.9 | Aa2.6 | Aa1.1 | Aa5.9 | Aa3.6 |
Info | Aa1.1 | Aa2.0 | Aa1.3 | Aa1.0 | Aa1.1 | Aa1.2 | — | Aa4.7 | Aa4.9 | Aa3.2 | Aa1.1 | Aa4.9 | Aa4.3 |
Background | Aa4.3 | Aa2.3 | Aa3.5 | Aa4.6 | Aa4.3 | Aa5.6 | Aa4.7 | — | Aa1.0 | Aa14.8 | Aa5.3 | Aa1.0 | Aa20.1 |
Surface | Aa4.5 | Aa2.4 | Aa3.7 | Aa4.8 | Aa4.5 | Aa5.9 | Aa4.9 | Aa1.0 | — | Aa15.4 | Aa5.6 | Aa1.0 | Aa21.0 |
Text Primary | Aa3.5 | Aa6.5 | Aa4.2 | Aa3.2 | Aa3.4 | Aa2.6 | Aa3.2 | Aa14.8 | Aa15.4 | — | Aa2.8 | Aa15.4 | Aa1.4 |
Text Secondary | Aa1.2 | Aa2.3 | Aa1.5 | Aa1.2 | Aa1.2 | Aa1.1 | Aa1.1 | Aa5.3 | Aa5.6 | Aa2.8 | — | Aa5.6 | Aa3.8 |
White | Aa4.5 | Aa2.4 | Aa3.7 | Aa4.8 | Aa4.5 | Aa5.9 | Aa4.9 | Aa1.0 | Aa1.0 | Aa15.4 | Aa5.6 | — | Aa21.0 |
Black | Aa4.7 | Aa8.8 | Aa5.7 | Aa4.4 | Aa4.6 | Aa3.6 | Aa4.3 | Aa20.1 | Aa21.0 | Aa1.4 | Aa3.8 | Aa21.0 | — |
Color blindness simulation
Approximate rendering of your palette under common color vision deficiencies. Test with real users when possible.
Export
:root {
--brand-primary: #6366f1;
--brand-primary-light: #e6e7f4;
--brand-primary-dark: #16186f;
--brand-secondary: #63adf1;
--brand-secondary-light: #e6edf4;
--brand-secondary-dark: #124473;
--brand-accent: #a763f1;
--brand-neutral-50: #fafafa;
--brand-neutral-100: #f1f2f3;
--brand-neutral-200: #e4e4e7;
--brand-neutral-300: #d1d1d6;
--brand-neutral-400: #b3b3bc;
--brand-neutral-500: #858693;
--brand-neutral-600: #676774;
--brand-neutral-700: #4f4f59;
--brand-neutral-800: #37373e;
--brand-neutral-900: #242429;
--brand-neutral-950: #111113;
--brand-success: #16833e;
--brand-warning: #9d6d1b;
--brand-error: #c42121;
--brand-info: #2173c4;
--brand-background: #fafafa;
--brand-surface: #ffffff;
--brand-text-primary: #242429;
--brand-text-secondary: #676774;
}Powered by Kleos
This took you 5 minutes manually. Kleos does it in 5 seconds, every time.
Request Access →More free tools
Private Beta
We're onboarding select agencies to our private beta. Request access or book a demo to see Kleos in action.