There is a newer version of Luda.

Let's go!

Color

Use color utilities to change the color of texts.

Introduction

Color utilities are classes for setting the value of the color property. You can preview the colors in the below gallery. When you pick up a color class, consider the meaning in your context but not only the appearance, since in different themes colors may be changed but the meanings are the same.

.c-primary

.c-secondary

.c-danger

.c-dark

.c-light

.c-emphasis

.c-main

.c-muted

.c-inverse-emphasis

.c-inverse-main

.c-inverse-muted

<p class="c-primary"></p>
<p class="c-secondary"></p>
<p class="c-danger"></p>
<p class="c-dark"></p>
<p class="c-light"></p>
<p class="c-emphasis"></p>
<p class="c-main"></p>
<p class="c-muted"></p>
<p class="c-inverse-emphasis"></p>
<p class="c-inverse-main"></p>
<p class="c-inverse-muted"></p>

Sass Variables

$color-primary: hsba(340, 54, 98) !default
$color-secondary: hsba(0, 0, 56) !default
$color-danger: hsba(0, 82, 82) !default
$color-dark: hsba(0, 0, 12) !default
$color-light: hsba(0, 0, 100) !default
$color-emphasis: $color-dark !default
$color-main: lighten($color-dark, 10%) !default
$color-muted: lighten($color-dark, 60%) !default
$color-inverse-emphasis: $color-light !default
$color-inverse-main: rgba($color-light, $opacity-main) !default
$color-inverse-muted: rgba($color-light, $opacity-muted) !default