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.

1

2

3

4

5

6

Base

1

2

3

4

5

6

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Lead

Gray

Silver

Using color shades

To specify lighter or darker shade to a given color, you can use the [class]-l-[color]-[shade] selector to get a lighter color or [class]-d-[color]-[shade] selector to get a darker color:

Using shades

The current color range is restricted to shades from 1 to 6 for both light and dark variants, with the exclusion of the base color.

<!-- Light cyan -->
<button class="bg-l-cyan-3 fw-600 px-5 py-1 rad-1 tc-white">Subscribe</button>

<!-- Dark cyan -->
<button class="bg-d-cyan-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.