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>

Customize Colors

Extend or override the default palette using the theme.colors configuration option. The compiler automatically generates color shades (from 0 to 9) using the defined percentage.light and percentage.dark values.

yumma.config.mjs
import { defineConfig } from "yummacss";


export default defineConfig({
  theme: {
    colors: {
      midnight: "#1a1d2e",
      periwinkle: "#bec6f2",
      percentage: {
        light: 12, // lightens 1-4 by 12% each step
        dark: 12,  // darkens 6-9 by 12% each step
      }
    }
  }
});

Learn more in the Configuration guide.