Announcing Flows – User onboarding for modern SaaS →

Shade generator

The shade generator makes it easy to create shades and tints that are perceptually uniform and accessible.

Setting up the generator

First, select the number of shades you need using the + and - icons under the Number of shades title.

Atmos Shade generator - setup

After that, select the lightness easing. You can choose from multiple presets or create a custom one. To change the lightness value of a shade, type a number in the input on the left or drag the dot inside the lightness slider.


When you are happy click on the Generate button.

Atmos Shade generator - Generate

Exclude color

Every time you generate the whole palette is regenerated (except for the source colors). To avoid overwriting some colors you can exclude them from the generator by unchecking the checkbox next to the color family name. When some colors are excluded you can't adjust the number of shades.

Atmos Shade generator - Exclude color

Hue shifting

After generating you can further customize each color to make it just right. Start by clicking on the color family name and selecting the Hue shifting option.

When shades are generated they all have the same hue value. By slightly changing the hue value you can achieve even better outcomes - this is called Hue shifting. In Atmos, you can do this by using the hue shifting chart.

The chart visualizes the shades from darkest to lightest on a bezier curve.

Atmos Shade generator - Hue shifting 1

3 points make up the curve:

  1. Darkest shade
  2. Source color (can't be moved)
  3. Lightest shade

To adjust the curve either move one of the points or handles.

Atmos Shade generator - Hue shifting 1

Last updated December 2022

Create your palette for
free in minutes

Whether you're new to color palettes, or a pro looking for advanced tools, we'll have you set up and ready to create your best palette in minutes.

Get started for free