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.
What this page gives you
- Generate lighter tints and deeper shades from one hue.
- Use 50-200 for backgrounds, 500-600 for actions, 800-950 for dark UI.
- Export the scale as CSS variables, Tailwind config, SCSS 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.
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?
50 to 200 are page and card backgrounds, 300 and 400 are borders and dividers, 500 and 600 carry buttons and links, 700 to 950 are text on light surfaces and background layers in dark mode. Keeping the roles fixed is what makes a scale reusable.
Should shades be interpolated in HSL or OKLCH?
OKLCH. Stepping lightness in HSL produces uneven jumps, because the same numeric lightness looks very different in yellow and in blue. In OKLCH the steps are perceptually even, so 100 to 200 feels like the same distance as 700 to 800.