Yumma CSS 3.15

Colors

Reference for all built-in color families & shades.

Color families

Yumma CSS provides 19 color families, each with 13 shades.

1
2
3
4
5
6
Base
7
8
9
10
11
12

Red

Orange

Yellow

Lime

Mint

Green

Cyan

Sky

Blue

Indigo

Violet

Lavender

Magenta

Pink

Coral

Zinc

Gray

Slate

Silver

Use color utilities

Apply color system utilities to style your elements.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="w-16 h-16 bg-red"></div>
  <div class="w-16 h-16 bg-green"></div>
  <div class="w-16 h-16 bg-blue"></div>
</div>

Use color shades

Use color shades for more precise control over your designs.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="w-16 h-16 bg-red-5"></div>
  <div class="w-16 h-16 bg-green-5"></div>
  <div class="w-16 h-16 bg-blue-5"></div>
</div>

Use opacity modifiers

Target specific opacity values across color utilities. Opacity variants range from 0 to 95 in increments of 5.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="w-16 h-16 bg-indigo-3/80"></div>
  <div class="w-16 h-16 bg-indigo/60"></div>
  <div class="w-16 h-16 bg-indigo-9/40"></div>
</div>