New

Uniform CSS has now been officially released!
Read more


Color System

Flexible HSL color system to fit any design.


Color System

The ability to customize colors to match design is an important aspect of Uniform CSS. Colors in Uniform are produced using the HSL model which means each color can be manipulated using composable classes to adjust its lightness intensity.


Colors

The base colors are based on the color wheel which consists of three primary colors, three secondary colors, and six tertiary colors. There are also agnostically named colors that are designed to work with your brand and form states.

The following can be applied to color related properties such as border, color, and background-color properties. By default, each color has a lightness value set to 50%. This is to ensure the lightness utilities work consistently and universally across all colors.

red • h0 s50
firebrick • h10 s60
orange • h20 s70
gold • h40 s90
yellow • h50 s100
lime • h80 s70
green • h110 s60
cyan • h190 s60
blue • h220 s70
purple • h260 s90
violet • h280 s70
pink • h310 s60
white
black
cool-gray • h220 s10
gray • h220 s5
warm-gray • h24 s10
primary • h220 s80
secondary • h220 s60
tertiary • h220 s40
success • h80 s60
warning • h40 s60
danger • h0 s60

Basic Usage

To apply colors, use <property-shorthand>-<color>.

<div class="bg-pink color-white">
pink background with white text
</div>
<div class="color-blue">
blue text
</div>
<div class="border-1 border-orange">
1 pixel orange border
</div>

Lightness

Since colors are defined using the HSL model, it is possible to control the lightness level without having to define every tint and shade.

white • 100%
50 • 95%
100 • 90%
150 • 85%
200 • 80%
250 • 75%
300 • 70%
350 • 65%
400 • 60%
450 • 55%
500 • 50%
550 • 45%
600 • 40%
650 • 35%
700 • 30%
750 • 25%
800 • 20%
850 • 15%
900 • 10%
950 • 5%
black • 0%
<div class="bg-primary bg-white">...</div>
<div class="bg-primary bg-50">...</div>
<div class="bg-primary bg-100">...</div>
<div class="bg-primary bg-150">...</div>
<div class="bg-primary bg-200">...</div>
<div class="bg-primary bg-250">...</div>
<div class="bg-primary bg-300">...</div>
<div class="bg-primary bg-350">...</div>
<div class="bg-primary bg-400">...</div>
<div class="bg-primary bg-450">...</div>
<div class="bg-primary bg-500">...</div>
<div class="bg-primary bg-550">...</div>
<div class="bg-primary bg-600">...</div>
<div class="bg-primary bg-650">...</div>
<div class="bg-primary bg-700">...</div>
<div class="bg-primary bg-750">...</div>
<div class="bg-primary bg-800">...</div>
<div class="bg-primary bg-850">...</div>
<div class="bg-primary bg-900">...</div>
<div class="bg-primary bg-950">...</div>
<div class="bg-primary bg-black">...</div>

Opacity

The opacity of each color can be controlled using <property>-<opacity>.

opacity-0
opacity-2
opacity-4
opacity-6
opacity-8
opacity-10
opacity-15
opacity-20
opacity-25
opacity-30
opacity-35
opacity-40
opacity-45
opacity-50
opacity-55
opacity-60
opacity-65
opacity-70
opacity-75
opacity-80
opacity-85
opacity-90
opacity-95
opacity-100
<div class="bg-blue bg-opacity-0">...</div>
<div class="bg-blue bg-opacity-2">...</div>
<div class="bg-blue bg-opacity-4">...</div>
<div class="bg-blue bg-opacity-6">...</div>
<div class="bg-blue bg-opacity-8">...</div>
<div class="bg-blue bg-opacity-10">...</div>
<div class="bg-blue bg-opacity-20">...</div>
<div class="bg-blue bg-opacity-20">...</div>
<div class="bg-blue bg-opacity-40">...</div>
<div class="bg-blue bg-opacity-50">...</div>
<div class="bg-blue bg-opacity-80">...</div>
<div class="bg-blue bg-opacity-90">...</div>
<div class="bg-blue bg-opacity-100">...</div>