Colors

Default Colors

Yumma CSS comes with a built-in color system that allows you to easily customize the colors of your elements.

Here's a range of all the default colors from the Yumma CSS theme.

Using color utilities

Here's an example of how to use the color system to style a button:

<div class="d-g cg-4 gtc-2">
  <button class="b-0 bg-indigo-4 fw-600 px-5 py-1 rad-1 tc-black">Subscribe</button>
  <button class="b-0 bg-indigo-9 fw-600 px-5 py-1 rad-1 tc-white">Subscribe</button>
</div>

Using opacity variants

Great for targeting opacity to different utilities.

Opacity variants are available for all color utilities, with a scale ranging from 0 to 95 in increments of 5.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="bg-indigo-3/50 d-16 rad-1"></div>
  <div class="bg-indigo/25 d-16 rad-1"></div>
  <div class="bg-indigo-8/20 d-16 rad-1"></div>
</div>