Colors

To stay consistent, Yumma CSS has a set of colors ready to go right out of the box. You can customize them using the light and dark utility class color shades in your theme to get a specific color.

Color Palette

Give your components and other page elements a boost with the Yumma CSS default theme. We’ve got all the colors you’ll need to get you started.

6

5

4

3

2

1

Base

1

2

3

4

5

6

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Lead

Gray

Silver

Using color shades

If you want to specify a lighter or darker shade of a given color, you can use the [class]-l-[color]-[shade] selector to get a lighter color or the [class]-d-[color]-[shade] selector to get a darker color in a range of 1 to 6, with the exception of neutral colors like black, white, and transparent.

Light color

Use [class]-l-* to get a lighter color.

Subscribe

<button class="b-0 bg-l-indigo-3 fw-600 px-5 py-1 rad-1 tc-white">
  Subscribe
</button>

Dark color

Use [class]-d-* to get a darker color.

Subscribe

<button class="b-0 bg-d-indigo-3 fw-600 px-5 py-1 rad-1 tc-white">
  Subscribe
</button>

Color utilities

Here’s a list of all the Yumma CSS color classes for customizing your theme.

Accent Color Controls form control accent color.

Background Color Controls the background color of an element.

Border Color Controls the color of the borders of an element.

Caret Color Controls the text input cursor color.

Outline Color Controls the color of the outline of an element.

Text Color Controls the text color of an element.

Text Decoration Color Controls the color of the text decoration.