Choose a lightness scale preset

A preset contains a list of stops named from an established nomenclature. These presets are frameworks that can help you build a color scaling:

  • Material Design, 10 stops, from 50 to 900 (Google).

  • Material 3, 13 stops, from 0 to 100 (Google)・Pro.

  • Tailwind, 11 stops, from 50 to 950 (Google)・Pro.

  • Ant Design, 10 stops, from 1 to 10.

  • ADS Foundations (Atlassian)・Pro:

    • 7 stops, from 50 to 500.

    • 19 stops (for neutral colors), from 0 to 900.

  • Carbon, 10 stops, from 10 to 100 (IBM)・Pro.

  • Base, 8 stops, from 50 to 700 (Uber)・Pro.

Or make your own from 2 to 10 (24 in Pro) stops via the Custom preset. The stops naming convention can be edited to meet your need, only available with this preset when creating a palette:

  • 1 - 24, the default option, increasing by 1

  • 10 - 240, increasing by 10

  • 100 - 2400, increasing by 100

Last updated

Was this helpful?