Petal provides a number of preset colors with 4 additional shades. Colors and shades are a crucial part of Petal's design so they are always imported along with the default variables.

This page displays lists the default preset color included in Petal. You can use any of these colors as variables in your projects: just call them by the original names or the shades (For example, a d2 shade of orange would be @orange-d2.)

Petal also provides some quick utility classes for applying these colors on your text or background: learn more about them here.