Language:English
Practical color tool

Color Shades Generator

Generate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.

Generate shadesExplore all tools

Chroma reduction preserves the intended lightness and hue before rounding to HEX. Original keeps previous palettes and links.

Continue with this color

PaletteContrastExport

What this page gives you

  • Generate lighter tints and deeper shades from one hue.
  • Start from the marked original color and check the actual foreground/background pair before assigning actions or text.
  • Export the scale as CSS variables, Tailwind CSS v3/v4 or JSON.

Good for

  • Tailwind scales
  • Design tokens
  • Hover states

How to use it

Palette generatorGenerate accessible color palettes, export CSS, Tailwind, SCSS, JSON, SVG and PNG palette assets, check WCAG contrast and extract colors from images locally.WCAG checkerCheck whether text and background colors meet WCAG AA and AAA contrast ratios. Free, instant, no upload required.Image extractorExtract a dominant color palette from PNG, JPG or WebP images. Processed locally in your browser — nothing uploaded.

Worked example

Chromoforge · #111111 / #E24B4A

Test the actual text and background together. A color name or shade number does not guarantee readable text.

:root {
  --brand: #E24B4A; /* original at 400, not necessarily 500 */
  --button-text: #111111;
}
.button { background: var(--brand); color: var(--button-text); }
Contrast: #111111 / #E24B4A
Can I use this with the main generator?

Yes. Start from this page, then open the main Chromoforge tool with the same base color and export the palette.

What is each step of a 50-950 scale for?

Shade numbers are identifiers. Light stops often suit backgrounds and dark stops often suit text, but roles depend on the input color and on the contrast of each pair. Do not assume 500 is the original color or that every 600 works for a button.

Should shades be interpolated in HSL or OKLCH?

OKLCH separates perceived lightness from chroma better than HSL. This tool uses fixed lightness targets with varying chroma, preserves the input at the closest stop and clips out-of-gamut colors to sRGB. The steps are not guaranteed to appear equally spaced.

Related tools and guides

Tailwind color palette generatorGenerate three Tailwind color scales from 50 to 950. Preview components and export Tailwind v4 @theme, v3 configuration, CSS variables or JSON.Dark Mode Color Palette GeneratorCreate dark mode palettes with readable foregrounds, muted surfaces, borders and accessible accent colors.WCAG Contrast CheckerCheck whether text and background colors meet WCAG AA and AAA contrast ratios. Free, instant, no upload required.

All tools