New

Stable version of Uniform CSS now officially released! Release note

Fills

Visual reference of all default colors.


Visual Reference

The following table visually represents all the colors that are available.

Color Name HEX
primary-50 #EDF1FF
primary-100 #DAE2FF
primary-200 #B0C2FF
primary-300 #89A3FF
primary-400 #6385FF
primary-500 #446CFA
primary-600 #2650EB
primary-700 #002AC8
primary-800 #00209A
primary-900 #001566
primary-950 #000A33
secondary-50 #EAEEFC
secondary-100 #D6DDFA
secondary-200 #AEBCF4
secondary-300 #8B9EE9
secondary-400 #6A81DD
secondary-500 #5269C8
secondary-600 #3C54B3
secondary-700 #2B4093
secondary-800 #1E2F74
secondary-900 #142154
secondary-950 #0B1333
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 #FDE8EC
red-100 #FBD2D7
red-200 #F7A7AE
red-300 #F05356
red-400 #DD211A
red-500 #CB1200
red-600 #A81400
red-700 #851300
red-800 #711100
red-900 #5C0E00
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

Basic Usage

To apply colors, use the syntax <property>-<color>.

<div class="bg-red">
...
</div>

<div class="border-blue border-1">
...
</div>

<h1 class="color-orange">
...
</h1>

CSS Variables

Colors by default are initially configured in hexadecimal format, however during the Uniform build process is converted to rgb values in order to take advantage of alpha channel manipulation using the opacity utility.

:root {
--primary-50: 232,241,253;
--primary-100: 209,226,251;
--primary-200: 163,198,247;
--primary-300: 77,145,240;
--primary-400: 18,103,221;
--primary-500: 0,84,203;
--primary-600: 0,70,168;
--primary-700: 0,55,133;
--primary-800: 0,47,113;
--primary-900: 0,38,92;
--primary-950: 0,21,51;
--secondary-50: 253,248,210;
--secondary-100: 251,237,166;
--secondary-200: 247,204,79;
--secondary-300: 236,167,19;
--secondary-400: 225,140,0;
--secondary-500: 210,127,0;
--secondary-600: 195,115,0;
--secondary-700: 164,91,0;
--secondary-800: 136,75,0;
--secondary-900: 107,59,0;
--secondary-950: 51,27,0;
--white: 255,255,255;
--black: 0,0,0;
--warm-gray-50: 247,246,245;
--warm-gray-100: 240,237,236;
--warm-gray-200: 224,220,218;
--warm-gray-300: 209,203,200;
--warm-gray-400: 193,186,182;
--warm-gray-500: 162,153,148;
--warm-gray-600: 131,121,116;
--warm-gray-700: 100,91,86;
--warm-gray-800: 69,61,57;
--warm-gray-900: 54,47,44;
--warm-gray-950: 38,33,31;
--gray-50: 247,247,247;
--gray-100: 240,240,240;
--gray-200: 224,224,224;
--gray-300: 209,209,209;
--gray-400: 193,193,193;
--gray-500: 162,162,162;
--gray-600: 131,131,131;
--gray-700: 100,100,100;
--gray-800: 69,69,69;
--gray-900: 54,54,54;
--gray-950: 38,38,38;
--cool-gray-50: 244,245,247;
--cool-gray-100: 233,235,240;
--cool-gray-200: 211,216,224;
--cool-gray-300: 191,197,209;
--cool-gray-400: 171,178,193;
--cool-gray-500: 134,144,162;
--cool-gray-600: 101,111,131;
--cool-gray-700: 72,81,100;
--cool-gray-800: 45,53,69;
--cool-gray-900: 34,40,54;
--cool-gray-950: 23,28,38;
--red-50: 253,232,236;
--red-100: 251,210,215;
--red-200: 247,167,174;
--red-300: 240,83,86;
--red-400: 221,33,26;
--red-500: 203,18,0;
--red-600: 168,20,0;
--red-700: 133,19,0;
--red-800: 113,17,0;
--red-900: 92,14,0;
--red-950: 51,8,0;
--orange-50: 251,235,214;
--orange-100: 248,213,175;
--orange-200: 241,163,99;
--orange-300: 223,116,46;
--orange-400: 206,71,0;
--orange-500: 190,62,0;
--orange-600: 173,55,0;
--orange-700: 141,41,0;
--orange-800: 121,34,0;
--orange-900: 102,28,0;
--orange-950: 64,17,0;
--yellow-50: 253,248,210;
--yellow-100: 251,237,166;
--yellow-200: 247,204,79;
--yellow-300: 236,167,19;
--yellow-400: 225,140,0;
--yellow-500: 210,127,0;
--yellow-600: 195,115,0;
--yellow-700: 164,91,0;
--yellow-800: 136,75,0;
--yellow-900: 107,59,0;
--yellow-950: 51,27,0;
--lime-50: 220,251,210;
--lime-100: 192,247,166;
--lime-200: 156,239,83;
--lime-300: 131,219,11;
--lime-400: 136,200,0;
--lime-500: 128,181,0;
--lime-600: 120,162,0;
--lime-700: 99,125,0;
--lime-800: 83,104,0;
--lime-900: 66,82,0;
--lime-950: 32,38,0;
--green-50: 227,251,224;
--green-100: 196,247,193;
--green-200: 134,239,141;
--green-300: 79,219,99;
--green-400: 32,200,69;
--green-500: 18,181,57;
--green-600: 7,162,47;
--green-700: 0,125,38;
--green-800: 0,104,32;
--green-900: 0,82,26;
--green-950: 0,38,13;
--teal-50: 231,253,243;
--teal-100: 208,251,232;
--teal-200: 163,247,214;
--teal-300: 76,239,194;
--teal-400: 18,219,180;
--teal-500: 0,200,177;
--teal-600: 0,162,151;
--teal-700: 0,125,121;
--teal-800: 0,104,101;
--teal-900: 0,82,81;
--teal-950: 0,38,38;
--cyan-50: 234,253,253;
--cyan-100: 213,250,251;
--cyan-200: 172,242,247;
--cyan-300: 93,218,240;
--cyan-400: 38,184,221;
--cyan-500: 0,151,203;
--cyan-600: 0,120,168;
--cyan-700: 0,92,133;
--cyan-800: 0,77,113;
--cyan-900: 0,62,92;
--cyan-950: 0,34,51;
--blue-50: 232,241,253;
--blue-100: 209,226,251;
--blue-200: 163,198,247;
--blue-300: 77,145,240;
--blue-400: 18,103,221;
--blue-500: 0,84,203;
--blue-600: 0,70,168;
--blue-700: 0,55,133;
--blue-800: 0,47,113;
--blue-900: 0,38,92;
--blue-950: 0,21,51;
--indigo-50: 240,240,253;
--indigo-100: 226,225,251;
--indigo-200: 199,195,248;
--indigo-300: 154,139,241;
--indigo-400: 122,96,223;
--indigo-500: 96,57,206;
--indigo-600: 74,35,173;
--indigo-700: 56,18,141;
--indigo-800: 48,13,121;
--indigo-900: 40,10,102;
--indigo-950: 24,4,64;
--purple-50: 243,238,253;
--purple-100: 232,221,251;
--purple-200: 212,188,247;
--purple-300: 180,125,239;
--purple-400: 154,78,219;
--purple-500: 133,38,200;
--purple-600: 107,17,162;
--purple-700: 82,2,125;
--purple-800: 67,0,104;
--purple-900: 54,0,82;
--purple-950: 26,0,38;
--pink-50: 253,238,253;
--pink-100: 251,220,249;
--pink-200: 247,186,240;
--pink-300: 239,122,212;
--pink-400: 219,74,175;
--pink-500: 200,33,135;
--pink-600: 162,13,99;
--pink-700: 125,0,67;
--pink-800: 104,0,54;
--pink-900: 82,0,42;
--pink-950: 38,0,19;
}