Color Shades Generator
Generate lighter tints and darker shades of any color, with hex values you can copy for palettes and design systems.
Fixed tokens 50–950; 50 is lightest, 950 is darkest, and 500 is the exact input color.
UI proportions? Aspect ratio calculator · harmonies: Color palette generator · WCAG: Contrast checker.
Build a color palette
Generate a fixed, perceptual 50–950 design-system scale or custom tint/shade steps, then copy CSS custom properties or download JSON.
FAQ
What is a tint and a shade?
A tint is a lighter variation and a shade is a darker variation. This tool adjusts perceptual OKLCH lightness and chroma instead of interpolating encoded sRGB channels.
How do I copy a color?
Click any swatch to copy its HEX value. Use Copy CSS vars or Download JSON to export the full scale.
What is this useful for?
Building color palettes and design-system scales from a single brand color — export as CSS custom properties or Tailwind-style tokens.
Last updated: