Picsova

Tints & Shades Generator

Generate a full scale of tints and shades from a single base colour and copy any step as hex, or take the whole scale as ready-made CSS custom properties.

Runs entirely in your browser. Nothing is uploaded.

Tints — mixed toward white

Base

Shades — mixed toward black

CSS custom properties

:root {
  --color-50: #f4f0fe;
  --color-100: #eae1fd;
  --color-150: #dfd3fd;
  --color-200: #d5c4fc;
  --color-250: #cab5fb;
  --color-300: #c0a6fa;
  --color-350: #b597f9;
  --color-400: #ab88f8;
  --color-450: #a07af8;
  --color-500: #966bf7;
  --color-550: #8b5cf6;
  --color-600: #7e54e0;
  --color-650: #724bc9;
  --color-700: #6543b3;
  --color-750: #583b9d;
  --color-800: #4c3286;
  --color-850: #3f2a70;
  --color-900: #332159;
  --color-950: #261943;
  --color-1000: #19112d;
  --color-1050: #0d0816;
}

Build a colour scale from one hex

A design system needs more than one version of each colour: a light tint for backgrounds, the base for the main element, darker shades for hover and pressed states. Picking each of those by eye produces a scale that drifts in hue and looks inconsistent. Enter one base colour and this generates an even scale of tints toward white and shades toward black, ready to copy individually or as a complete set of CSS variables.

How to build a tint and shade scale

  1. 1

    Pick your base colour

    Use the picker or paste a hex value — this becomes the middle of the scale.

  2. 2

    Choose how many steps

    Set how many tints and shades to generate on each side of the base.

  3. 3

    Copy what you need

    Click any swatch to copy its hex, or take the whole scale as numbered CSS custom properties.

Good to know

  • A tint mixes toward white and a shade mixes toward black; together they give the lighter and darker steps of one coherent scale.
  • Steps are evenly spaced, so the scale is predictable — useful when the same numbered step has to mean the same thing across several colours.
  • Mixing in RGB drains saturation near the extremes, so the very lightest and darkest steps can look washed out. Adjust lightness in HSL for a more vivid scale.
  • The CSS export uses 50-based numbering, matching the convention most design systems and utility frameworks already use.

What people use it for

  • Building hover, active, and disabled states from one brand colour
  • Generating a full colour ramp for a design system or Tailwind config
  • Finding a light tint of a brand colour to use as a section background

Frequently asked questions

What is the difference between a tint and a shade?+

A tint mixes the colour toward white and a shade mixes it toward black. Together they give you the lighter and darker steps of a scale built from one starting colour.

Can I export the scale?+

Yes. Copy any single step as hex, or take the whole scale as CSS custom properties numbered 50, 100, 150 and so on, ready to paste into a stylesheet.

Why do some steps look washed out?+

Mixing toward pure white or black in RGB drains saturation at the extremes. For a more vivid scale, adjust lightness in HSL instead, or hand-tune the end steps.

Is my data sent to a server?+

No. Generating colours happens entirely in your browser using built-in web APIs. Nothing is uploaded, stored, or logged.

Related tools

Color Converter

HEX ⇄ RGB ⇄ HSL with a picker

Color Palette Extractor

Pull dominant colors from an image

CSS Gradient Generator

Build & copy CSS gradients

Color Contrast Checker

WCAG AA & AAA pass or fail

Or browse all 50 free tools.