Generate perfect shades and tints for your colors

Shades are darker variations of a color, created by adding black, while tints are lighter variations created by adding white. In UI design, a shade scale typically runs from a very light tint to a very dark shade, for example, from near-white to near-black, with the original color somewhere in the middle. These scales give designers a range of values to use for backgrounds, borders, text, and interactive states without stepping outside the color palette.

A shade is produced by darkening a color, mixing it with black or lowering its lightness. A tint is produced by lightening a color, mixing it with white or raising its lightness. In everyday design language, "shades" is often used loosely to refer to the entire scale of light to dark variations, including both shades and tints. Atmos generates the full scale: from lightest tint to darkest shade.

Most design systems use between 9 and 11 steps per color, typically numbered 50 through 950 or 100 through 1000. This range gives enough granularity for different UI contexts: very light steps for backgrounds and hover states, mid-range steps for borders and secondary text, and dark steps for primary text and high-contrast elements. Fewer steps can leave gaps; more than 11 rarely adds useful distinction.

Easing curves control how the lightness changes across a shade scale. A linear curve distributes lightness evenly from step to step, but this often feels unnatural, the lighter half of the scale can look washed out while the darker half feels too compressed. Easing curves like ease-in, ease-out, or custom cubic bezier curves redistribute the steps to match how human perception works, producing smoother and more visually balanced shade scales.

A hue transition means the hue angle shifts slightly as the shade scale moves from light to dark, rather than staying fixed. This technique produces more vibrant and natural-looking palettes, for example, a blue shade scale might shift slightly toward purple in the darker steps and toward cyan in the lighter steps, mimicking how colors appear in natural light. Atmos lets you define hue transition curves so your shades feel alive rather than flat.