How the palette generator works
Good color palettes are rarely random. Designers use color harmonies, fixed relationships on the color wheel, to pick colors that sit well together. This tool converts your base color to HSL (hue, saturation, lightness) and rotates the hue to build each harmony:
- Analogous: neighbors 30° either side, calm and cohesive.
- Complementary: the opposite hue (180°), for strong contrast and accents.
- Triadic: three hues 120° apart, vibrant but balanced.
- Split complementary: the base plus the two hues next to its complement.
- Tetradic: four hues 90° apart, rich but harder to balance.
- Monochromatic: one hue at different lightness levels.
It also builds an 11-step tint and shade scale from 50 (lightest) to 950 (darkest), the structure used by many design systems and CSS frameworks.
How to use it
- Pick a color, or type a hex, rgb() or hsl() value. Press Random or the space bar for inspiration.
- Choose a palette type.
- Click any swatch to copy its hex code. Each main swatch shows its HSL value and the WCAG contrast rating of the best text color on top of it.
- Copy the CSS variables to use the palette in your stylesheet.
Color contrast and accessibility
The contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) require at least 4.5:1 for normal text (AA), 3:1 for large text, and 7:1 for the stricter AAA level.
Contrast = (Llighter + 0.05) ÷ (Ldarker + 0.05)
Each swatch uses black or white text, whichever gives more contrast, so you can see at a glance which colors work as backgrounds for text.
Example
Starting from indigo #4F46E5, the complementary palette adds a warm yellow-green, a triadic palette adds a coral and a green, and the shade scale runs from a near-white lavender to a deep navy. White text on the base color has a contrast ratio of about 6.3:1, which passes WCAG AA for normal text.
More worked examples
Accessible buttons: white text on indigo #4F46E5 has a contrast ratio of about 6.3:1, which passes WCAG AA for normal text.
Common mistakes to avoid
- Choosing colors without checking contrast. Text needs at least 4.5:1 against its background.
- Using too many colors. One primary, one accent and a gray scale cover most interfaces.
- Forgetting dark mode. Lighter shades from the scale usually work better on dark backgrounds. Blend two colors with the CSS gradient generator.
Sources and methodology
The calculations on this page follow these published standards and references. The code is covered by automated tests against known values.