Pick a base color, get a coordinated 5-color palette and full shades scale. Copy individually or all at once.
Click any swatch to copy that hex. Use the buttons above for the full set.
Color is processed before text. A visitor decides whether a site feels trustworthy, premium, playful, or cheap within milliseconds — before reading a word. Consistent color across your site, emails, social, and packaging builds recognition faster than any logo.
The goal isn't to pick a beautiful color. It's to pick a system: one primary, one or two secondaries, an accent, and neutrals that hold everything together.
A common mistake is using all five colors everywhere. Use the primary and neutrals 80% of the time. Save the accent for moments that matter.
The 7-swatch shades row is a single-hue scale from very light to very dark. Designers use it for:
This is why you don't need five different accent colors. You need one accent color and a full range of shades for it.
Three ways to get the colors into your project:
:root block with --color-primary-1 style names. Drop straight into a stylesheet.Text on a background should hit a WCAG contrast ratio of 4.5:1 for body text and 3:1 for large text. Most brand palettes fail this on light backgrounds — pale yellow text on white, for example.
Before using a palette, check contrast on the actual text colors. WebAIM's contrast checker or Lighthouse in Chrome DevTools will flag failures.
Most brand palettes use 4–6 colors: 1 primary, 2 secondary, 1–2 accent, plus neutral. More than 6 becomes hard to keep consistent.
Complementary colors sit opposite each other on the color wheel (e.g. blue and orange). They create strong contrast and work well for accents.
Use HEX for web and CSS. RGB for design software. HSL for adjusting lightness and saturation. All three describe the same color.
Text on a background should have a WCAG contrast ratio of at least 4.5:1 for body text and 3:1 for large text. Light text on light backgrounds fails accessibility.
It's a single-hue range from light to dark. Use it for hover states, borders, backgrounds, and text on colored surfaces — so you don't need five different accent colors.
Design helper only. Color choices are subjective. Always check accessibility contrast and test your palette on real devices and printed materials before committing.