Skip to content

Color System

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.

Base colors

The foundations of our color palette are defined in SCSS variables. Here’s how the colors are defined:

// variables
$yma-colors-red: #d73d3d;
$yma-colors-orange: #e06814;
$yma-colors-yellow: #d3a107;
$yma-colors-green: #1fb155;
$yma-colors-teal: #12a695;
$yma-colors-cyan: #05a4bf;
$yma-colors-blue: #3575dd;
$yma-colors-indigo: #595cd9;
$yma-colors-violet: #7d53dd;
$yma-colors-pink: #d4418a;
$yma-colors-silver: #bfc2c7;
$yma-colors-gray: #606773;
$yma-colors-lead: #3f3f4e
$yma-colors-black: black;
$yma-colors-white: white;
$yma-colors-transparent: transparent;

Color shades

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

<div>
<div class="bg-l-pink-6"></div>
<div class="bg-pink"></div>
<div class="bg-d-pink-1"></div>
</div>

Color palette

Red
Orange
Yellow
Green
Teal
Cyan
Blue
Indigo
Violet
Pink
Gray
Lead
Silver

Color utilities

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