Advertise

Shades & Tints Generator

Darker shades, lighter tints and tones of any color – plus a 50–950 scale.

About Shades & Tints Generator

Create a ramp of shades (mixed with black), tints (mixed with white) and tones (mixed with grey) in 5 % to 25 % steps, or a design-system scale from 50 to 950 like Tailwind's.

How to use

  1. Pick a color, type any color code (HEX, RGB, HSL, a CSS name…) or open an image.
  2. Adjust the options – the result updates instantly.
  3. Click any code or swatch to copy it, or send the color to another tool with Open in….

Everything runs in your browser: your colors and images are never uploaded or stored.

Related tools

Color Palette GeneratorPress space to generate beautiful color palettes; lock the colors you like. CSS Gradient GeneratorDesign linear, radial and conic gradients and copy the CSS. Random Color GeneratorGet random colors – any, vivid, pastel, light, dark or grey. Palette from ImageExtract the main colors of a photo as a palette. HTML Color PickerPick any color and copy its HEX, RGB, HSL, HSV and CMYK codes. Color Wheel & HarmoniesFind complementary, analogous, triadic and other matching colors. Image Color PickerUpload a photo and click it to get the color of any pixel. HTML Color NamesAll 141 HTML / CSS color names with HEX and RGB codes.