Using and customizing the Sfumato color library.
Sfumato provides a color library with 443 color variations that can be applied to any utility class that accepts a color, like setting the background color of an element using bg-fuchsia.
When using colors you can also set their opacity using an alpha percentage modifier. In the previous example of setting the background color, we can set it to 50% opacity as well with bg-fuchsia/50.
Sfumato also provides a CSS function for applying opacity to a Sfumato color variable.
Every color in the library includes 20 shade steps, from 50 to 1000, in increments of 50. Lower numbers are lightest and higher are darkest. You can use the colors by name and shade step number on any utility class that sets a color, like the bg-{color} utility in the example below.
NOTE: colors are referenced by name and shade (e.g. bg-sky-500). But primitive colors are referenced by name only (e.g. bg-black).
You can change the opacity of a color using modifier syntax like bg-sky-500/70, where 70 sets the alpha channel of the color to 75%:
You can leverage Sfumato's dynamic color opacity within your custom CSS using the --alpha() function:
NOTE: When using the --alpha() function, the slash character preceding the percentage must be surrounded by spaces.
Every color in the library is also available as a CSS custom property that can be used in your custom CSS, JavaScript, and HTML.
You can even specify custom color values right in your markup:
Sfumato includes a comprehensive color library for use in all color-based utility classes. The colors have a wide gamut, look great on modern displays, and should suit most any design or layout style.
