Fills

Visual Reference

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

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;
}