Free Tool
Color Palette Generator
Enter one brand color and get a full, accessible palette: a light-to-dark shade ramp, a matching accent, a neutral gray scale, and real WCAG contrast ratios for every swatch, computed live in your browser.
Shade ramp
Your seed color lightened and darkened in 10 steps, same hue and saturation throughout, computed via real HSL lightness interpolation. Use lighter steps for backgrounds and hover states, darker steps for text and borders.
Accent color
A second, distinct hue for the harmony mode selected above, useful for a genuine contrast accent rather than another shade of your brand color.
Neutral scale
A gray scale derived from your brand color's own hue at low saturation, so backgrounds, borders, and muted text feel like part of the same palette instead of a generic template gray.
Export
#965829 vs white text: 5.64:1 · #965829 vs black text: 3.72:1
What does this tool actually calculate?
Enter one hex color and this tool runs real color math entirely in your browser: it converts your color to HSL and interpolates lightness across 10 steps to build a tint/shade ramp, rotates the hue 180 degrees (or 120/240 for triadic, or ±30 for analogous) to compute a genuine accent color, and derives a low-saturation neutral scale from the same hue for backgrounds and body text. Nothing here is a lookup table of preset palettes: every swatch is calculated from the exact color you typed in.
Why does a consistent, accessible palette matter for a small business?
A brand that uses the same five or six colors deliberately across its site, invoices, and social posts reads as more established and trustworthy than one that eyeballs a slightly different shade every time. Accessibility compounds that trust signal directly: text that fails WCAG contrast guidelines is measurably harder to read for users with low vision or color blindness, and in several jurisdictions accessible contrast is a legal requirement for public-facing sites, not just a nice-to-have. Getting the ramp and the contrast right once, before a site ships, is far cheaper than retrofitting it later.
WebAIM's contrast checker, for a second opinion on any pair of colorsCommon questions
How do I know if my brand colors are accessible?
Check the actual contrast ratio between your text color and its background, not just how it looks on your monitor. The WCAG 2.1 standard requires at least 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold and above) to pass the AA level most accessibility laws reference. This tool calculates that exact ratio for every shade against both white and black text, so you can see which combinations genuinely pass before you commit to them across a site.
Why does the tool generate a gray scale instead of using plain gray?
A pure, zero-saturation gray next to a warm or cool brand color often reads as slightly mismatched, a small but real polish signal visitors pick up on even if they cannot name it. Deriving the neutral scale from your seed color's own hue at low saturation keeps backgrounds, borders, and muted text feeling like part of the same palette instead of a generic template default bolted on afterward.
What is the difference between the tint/shade ramp and the complementary color?
The tint/shade ramp is your one seed color lightened and darkened in steps, useful for hover states, backgrounds, and text at different weights while staying recognizably "on brand." The complementary color is a second, different hue (computed by rotating 180 degrees around the color wheel), useful when you need a genuine accent that contrasts with your primary color rather than another shade of the same one.