New

Stable version of Uniform CSS now officially released! Release note

Color System

Flexible colors to suit any design system.


Color System

The ability to intuitively customize colors to suit your deisgn system is an important aspect of Uniform. Uniform provides a wide spectrum of colors, each with 11 tints and shades to choose from. Tints and Shades in Uniform follow the 50, 100, 200 ... system commonly seen in other color systems.


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>

Base Colors

The following base colors are available to be be applied to color related properties such as border, color, and background-color. Colors are generated using the Colorbox color generater developed by Lyft's design team. A importable json configuration can be found under the file colorbox.json inside the uniform directory.

Color Name HEX
primary-50 #E8F1FD
primary-100 #D1E2FB
primary-200 #A3C6F7
primary-300 #4D91F0
primary-400 #1267DD
primary-500 #0054CB
primary-600 #0046A8
primary-700 #003785
primary-800 #002F71
primary-900 #00265C
primary-950 #001533
secondary-50 #FDF8D2
secondary-100 #FBEDA6
secondary-200 #F7CC4F
secondary-300 #ECA713
secondary-400 #E18C00
secondary-500 #D27F00
secondary-600 #C37300
secondary-700 #A45B00
secondary-800 #884B00
secondary-900 #6B3B00
secondary-950 #331B00
white #ffffff
black #000000
warm-gray-50 #F7F6F5
warm-gray-100 #F0EDEC
warm-gray-200 #E0DCDA
warm-gray-300 #D1CBC8
warm-gray-400 #C1BAB6
warm-gray-500 #A29994
warm-gray-600 #837974
warm-gray-700 #645B56
warm-gray-800 #453D39
warm-gray-900 #362F2C
warm-gray-950 #26211F
gray-50 #F7F7F7
gray-100 #F0F0F0
gray-200 #E0E0E0
gray-300 #D1D1D1
gray-400 #C1C1C1
gray-500 #A2A2A2
gray-600 #838383
gray-700 #646464
gray-800 #454545
gray-900 #363636
gray-950 #262626
cool-gray-50 #F4F5F7
cool-gray-100 #E9EBF0
cool-gray-200 #D3D8E0
cool-gray-300 #BFC5D1
cool-gray-400 #ABB2C1
cool-gray-500 #8690A2
cool-gray-600 #656F83
cool-gray-700 #485164
cool-gray-800 #2D3545
cool-gray-900 #222836
cool-gray-950 #171C26
red-50 #FDE1E5
red-100 #FBC3C9
red-200 #F7898F
red-300 #EF5659
red-400 #E72B26
red-500 #CB1200
red-600 #A01500
red-700 #841300
red-800 #691000
red-900 #4E0D00
red-950 #330800
orange-50 #FBEBD6
orange-100 #F8D5AF
orange-200 #F1A363
orange-300 #DF742E
orange-400 #CE4700
orange-500 #BE3E00
orange-600 #AD3700
orange-700 #8D2900
orange-800 #792200
orange-900 #661C00
orange-950 #401100
yellow-50 #FDF8D2
yellow-100 #FBEDA6
yellow-200 #F7CC4F
yellow-300 #ECA713
yellow-400 #E18C00
yellow-500 #D27F00
yellow-600 #C37300
yellow-700 #A45B00
yellow-800 #884B00
yellow-900 #6B3B00
yellow-950 #331B00
lime-50 #DCFBD2
lime-100 #C0F7A6
lime-200 #9CEF53
lime-300 #83DB0B
lime-400 #88C800
lime-500 #80B500
lime-600 #78A200
lime-700 #637D00
lime-800 #536800
lime-900 #425200
lime-950 #202600
green-50 #E3FBE0
green-100 #C4F7C1
green-200 #86EF8D
green-300 #4FDB63
green-400 #20C845
green-500 #12B539
green-600 #07A22F
green-700 #007D26
green-800 #006820
green-900 #00521A
green-950 #00260D
teal-50 #E7FDF3
teal-100 #D0FBE8
teal-200 #A3F7D6
teal-300 #4CEFC2
teal-400 #12DBB4
teal-500 #00C8B1
teal-600 #00A297
teal-700 #007D79
teal-800 #006865
teal-900 #005251
teal-950 #002626
cyan-50 #EAFDFD
cyan-100 #D5FAFB
cyan-200 #ACF2F7
cyan-300 #5DDAF0
cyan-400 #26B8DD
cyan-500 #0097CB
cyan-600 #0078A8
cyan-700 #005C85
cyan-800 #004D71
cyan-900 #003E5C
cyan-950 #002233
blue-50 #E8F1FD
blue-100 #D1E2FB
blue-200 #A3C6F7
blue-300 #4D91F0
blue-400 #1267DD
blue-500 #0054CB
blue-600 #0046A8
blue-700 #003785
blue-800 #002F71
blue-900 #00265C
blue-950 #001533
indigo-50 #F0F0FD
indigo-100 #E2E1FB
indigo-200 #C7C3F8
indigo-300 #9A8BF1
indigo-400 #7A60DF
indigo-500 #6039CE
indigo-600 #4A23AD
indigo-700 #38128D
indigo-800 #300D79
indigo-900 #280A66
indigo-950 #180440
purple-50 #F3EEFD
purple-100 #E8DDFB
purple-200 #D4BCF7
purple-300 #B47DEF
purple-400 #9A4EDB
purple-500 #8526C8
purple-600 #6B11A2
purple-700 #52027D
purple-800 #430068
purple-900 #360052
purple-950 #1A0026
pink-50 #FDEEFD
pink-100 #FBDCF9
pink-200 #F7BAF0
pink-300 #EF7AD4
pink-400 #DB4AAF
pink-500 #C82187
pink-600 #A20D63
pink-700 #7D0043
pink-800 #680036
pink-900 #52002A
pink-950 #260013

Semantic Colors

Uniform also provides semantic colors to handle form states. The following semantic colors are available to be be applied to color related properties such as border, color, and background-color.

Success Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Danger Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Info Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="border-1 border-success bg-success ...">
<h3 class="color-success ...">Success Alert</h3>
<p class="color-success ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="border-1 border-warning bg-warning ...">
<h3 class="color-warning ...">Warning Alert</h3>
<p class="color-warning ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="border-1 border-danger bg-danger ...">
<h3 class="color-danger ...">Danger Alert</h3>
<p class="color-danger ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="border-1 border-info bg-info ...">
<h3 class="color-info ...">Info Alert</h3>
<p class="color-info ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Color Name Value
bg-success green-50
border-success green-500
color-success green-800
bg-warning yellow-50
border-warning yellow-300
color-warning yellow-800
bg-danger red-50
border-danger red-200
color-danger red-800
bg-info teal-50
border-info teal-500
color-info teal-800

Color Opacity

All colors are initially configured in hexadecimal format e.g. #ffffff. However, during the build process, Uniform will convert each color to their rgba equivalent values. By doing so, you can take advantage of the opacity property by manipulating the alpha channel of each color. For more information, check out Opacities.

Color Name Opacity
Opacity 2 opacity-2 opacity: 0.02;
Opacity 4 opacity-4 opacity: 0.04;
Opacity 6 opacity-6 opacity: 0.06;
Opacity 8 opacity-8 opacity: 0.08;
Opacity 10 opacity-10 opacity: 10;
Opacity 15 opacity-15 opacity: 15;
Opacity 20 opacity-20 opacity: 20;
Opacity 25 opacity-25 opacity: 25;
Opacity 30 opacity-30 opacity: 30;
Opacity 35 opacity-35 opacity: 35;
Opacity 40 opacity-40 opacity: 40;
Opacity 45 opacity-45 opacity: 45;
Opacity 50 opacity-50 opacity: 50;
Opacity 55 opacity-55 opacity: 55;
Opacity 60 opacity-60 opacity: 60;
Opacity 65 opacity-65 opacity: 65;
Opacity 70 opacity-70 opacity: 70;
Opacity 75 opacity-75 opacity: 75;
Opacity 80 opacity-80 opacity: 80;
Opacity 85 opacity-85 opacity: 85;
Opacity 90 opacity-90 opacity: 90;
Opacity 95 opacity-95 opacity: 95;
Opacity 100 opacity-100 opacity: 100;