Colors

Default Palette

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

Use Color Utilities

Apply color system utilities to style your elements.

<div className="bg-red …"></div>
<div className="bg-green …"></div>
<div className="bg-blue …"></div>

Use Color Shades

Each color family generates 13 values from a single base hex. The base color has no suffix. Shades 1–6 mix progressively more white, and shades 7–12 mix progressively more black.

The step size is controlled by percentage.light and percentage.dark in your config. Both default to 14.

<div className="bg-red-5 …"></div>
<div className="bg-green-5 …"></div>
<div className="bg-blue-5 …"></div>

Use Opacity Modifiers

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

<div className="bg-indigo-3/80 …"></div>
<div className="bg-indigo/60 …"></div>
<div className="bg-indigo-9/40 …"></div>

Custom Colors

Extend or override the default palette using the theme.colors configuration option.

1. 1

   Configure Custom Colors

   yumma.config.mjs

   Copy

   import { defineConfig } from "yummacss";
   export default defineConfig({  theme: {    colors: {      background: "#f5f6f7", // add new color family      blue: "#1a73e8", // overrides the default blue.    },  },});
   

2. 2

   Use Custom Colors

   The bundler plugins pick up config changes automatically. If you use yummacss watch, restart it to see the changes.

   Copy

   <div className="bg-background …">
     <h1 className="c-blue …">Good evening</h1>
   </div>
   

Dark mode is opt-in per color: every color you already use keeps applying in both schemes. See Dark Mode for the full walkthrough.

Custom Color Shades

Override the default shade percentages using the theme.colors.percentage configuration option. The compiler automatically generates color shades (from 1 to 12) using the defined percentage.light and percentage.dark values.

1. 1

   Configure Custom Colors

   yumma.config.mjs

   Copy

   import { defineConfig } from "yummacss";
   export default defineConfig({  theme: {    colors: {      background: "#f5f6f7",      blue: "#1a73e8",      percentage: {        light: 16, // default is 14        dark: 16, // default is 14      },    },  },});
   

2. 2

   Use Custom Colors

   The bundler plugins pick up config changes automatically. If you use yummacss watch, restart it to see the changes.

   page.tsx

   Copy

   <div className="bg-background-6 …">
     <h1 className="c-blue-5 …">Good evening</h1>
   </div>