Skip to content
An independent index of 1,651 brand websites — platforms, security, email and SEO Web indexAdvertiseContact
coolbrands
Find a brand
coolbrands
Get in touch
  1. Home
  2. Tools
  3. Palette generator
Runs in your browserDesign

Color palette generator

Pick a base color and a scheme to get evenly stepped scales with hex values, CSS custom properties and the contrast of every step. Runs in your browser.

#6d28d9
Runs locally — nothing is uploaded
Result
Pick a base color.

How to use

  1. 1Pick a base color.
  2. 2Choose a scheme: shades only, or a harmony where each color gets its own scale.
  3. 3Set the number of steps: 10 or 11 give Tailwind-style names from 50 to 900 or 950.
  4. 4Click a swatch to copy its hex, or copy the CSS variables.

Each step gets a fixed OKLCH lightness, close to Tailwind's scales, with chroma lowered towards the lightest and darkest steps. Your base color is kept exactly at the step nearest to its lightness.

HSL lightness is not perceptual: yellow and blue at the same HSL lightness look very different. OKLCH steps look even across hues, so scales for different colors match each other.

Its chroma is reduced until it fits sRGB, keeping its lightness and hue.

Related tools

Contrast checkerWCAG AA/AAA contrast ratio, plus APCA Color converterHEX, RGB, HSL, OKLCH and CMYK in one go Domain typo generatorTyposquatting variants of your domain, for brand protection Domain name generatorTurn keywords into hundreds of domain name ideas Open Graph generatorSocial share tags with a preview SERP snippet previewPreview title and description in search

Want your brand’s website benchmarked?

We compare your site with your category on security, speed, email and SEO — and fix what lags behind.

Get in touchServices