Syntax

Background Color

Setting the background color of an element.

Overview

ClassDeclarations
bg:colorbackground: color;
bg:transparent
background-color: transparent;
bg:current
background-color: currentColor;
bg:black
background-color: rgb(0 0 0);
bg:white
background-color: rgb(255 255 255);
bg:base
background-color: rgb(var(--base));
bg:invert
background-color: rgb(var(--invert));
bg:gray
background-color: rgb(var(--gray));
bg:slate
background-color: rgb(var(--slate));
bg:brown
background-color: rgb(var(--brown));
bg:orange
background-color: rgb(var(--orange));
bg:amber
background-color: rgb(var(--amber));
bg:yellow
background-color: rgb(var(--yellow));
bg:lime
background-color: rgb(var(--lime));
bg:green
background-color: rgb(var(--green));
bg:beryl
background-color: rgb(var(--beryl));
bg:teal
background-color: rgb(var(--teal));
bg:cyan
background-color: rgb(var(--cyan));
bg:sky
background-color: rgb(var(--sky));
bg:blue
background-color: rgb(var(--blue));
bg:indigo
background-color: rgb(var(--indigo));
bg:violet
background-color: rgb(var(--violet));
bg:purple
background-color: rgb(var(--purple));
bg:fuchsia
background-color: rgb(var(--fuchsia));
bg:pink
background-color: rgb(var(--pink));
bg:crimson
background-color: rgb(var(--crimson));
bg:red
background-color: rgb(var(--red));
bg:gray-5
background-color: rgb(246 245 247);
bg:gray-10
background-color: rgb(239 238 240);
bg:gray-20
background-color: rgb(205 204 206);
bg:gray-30
background-color: rgb(162 161 163);
bg:gray-40
background-color: rgb(137 136 138);
bg:gray-50
background-color: rgb(115 114 116);
bg:gray-60
background-color: rgb(88 87 89);
bg:gray-70
background-color: rgb(68 67 69);
bg:gray-80
background-color: rgb(50 49 51);
bg:gray-90
background-color: rgb(41 40 42);
bg:gray-95
background-color: rgb(34 33 35);
bg:slate-5
background-color: rgb(248 249 251);
bg:slate-10
background-color: rgb(239 242 249);
bg:slate-20
background-color: rgb(200 208 227);
bg:slate-30
background-color: rgb(159 171 198);
bg:slate-40
background-color: rgb(124 140 171);
bg:slate-50
background-color: rgb(95 115 149);
bg:slate-60
background-color: rgb(69 85 114);
bg:slate-70
background-color: rgb(55 69 93);
bg:slate-80
background-color: rgb(40 51 72);
bg:slate-90
background-color: rgb(29 39 58);
bg:slate-95
background-color: rgb(24 32 48);
bg:brown-5
background-color: rgb(255 246 240);
bg:brown-10
background-color: rgb(254 239 227);
bg:brown-20
background-color: rgb(243 190 164);
bg:brown-30
background-color: rgb(231 151 110);
bg:brown-40
background-color: rgb(218 124 77);
bg:brown-50
background-color: rgb(204 102 51);
bg:brown-60
background-color: rgb(182 83 37);
bg:brown-70
background-color: rgb(157 65 25);
bg:brown-80
background-color: rgb(131 49 17);
bg:brown-90
background-color: rgb(105 32 7);
bg:brown-95
background-color: rgb(67 19 4);
bg:orange-5
background-color: rgb(255 245 234);
bg:orange-10
background-color: rgb(255 245 223);
bg:orange-20
background-color: rgb(255 203 158);
bg:orange-30
background-color: rgb(255 155 71);
bg:orange-40
background-color: rgb(255 133 40);
bg:orange-50
background-color: rgb(255 108 10);
bg:orange-60
background-color: rgb(224 82 0);
bg:orange-70
background-color: rgb(188 62 0);
bg:orange-80
background-color: rgb(153 45 0);
bg:orange-90
background-color: rgb(112 29 0);
bg:orange-95
background-color: rgb(71 17 0);
bg:amber-5
background-color: rgb(255 249 235);
bg:amber-10
background-color: rgb(255 244 219);
bg:amber-20
background-color: rgb(255 224 153);
bg:amber-30
background-color: rgb(255 193 51);
bg:amber-40
background-color: rgb(255 177 10);
bg:amber-50
background-color: rgb(249 158 0);
bg:amber-60
background-color: rgb(229 126 0);
bg:amber-70
background-color: rgb(193 93 0);
bg:amber-80
background-color: rgb(163 73 0);
bg:amber-90
background-color: rgb(117 50 0);
bg:amber-95
background-color: rgb(76 31 0);
bg:yellow-5
background-color: rgb(255 250 229);
bg:yellow-10
background-color: rgb(255 254 209);
bg:yellow-20
background-color: rgb(255 233 147);
bg:yellow-30
background-color: rgb(255 210 51);
bg:yellow-40
background-color: rgb(255 195 0);
bg:yellow-50
background-color: rgb(239 175 0);
bg:yellow-60
background-color: rgb(214 146 0);
bg:yellow-70
background-color: rgb(183 116 0);
bg:yellow-80
background-color: rgb(158 92 0);
bg:yellow-90
background-color: rgb(117 60 0);
bg:yellow-95
background-color: rgb(76 38 0);
bg:lime-5
background-color: rgb(245 255 229);
bg:lime-10
background-color: rgb(245 255 214);
bg:lime-20
background-color: rgb(209 251 141);
bg:lime-30
background-color: rgb(172 236 70);
bg:lime-40
background-color: rgb(145 217 26);
bg:lime-50
background-color: rgb(119 192 18);
bg:lime-60
background-color: rgb(97 166 12);
bg:lime-70
background-color: rgb(76 141 7);
bg:lime-80
background-color: rgb(54 118 4);
bg:lime-90
background-color: rgb(37 96 0);
bg:lime-95
background-color: rgb(27 61 0);
bg:green-5
background-color: rgb(231 253 234);
bg:green-10
background-color: rgb(219 254 228);
bg:green-20
background-color: rgb(165 247 184);
bg:green-30
background-color: rgb(53 237 102);
bg:green-40
background-color: rgb(0 214 85);
bg:green-50
background-color: rgb(0 193 71);
bg:green-60
background-color: rgb(0 173 63);
bg:green-70
background-color: rgb(0 142 52);
bg:green-80
background-color: rgb(0 122 44);
bg:green-90
background-color: rgb(0 96 35);
bg:green-95
background-color: rgb(0 61 22);
bg:beryl-5
background-color: rgb(224 254 242);
bg:beryl-10
background-color: rgb(210 255 247);
bg:beryl-20
background-color: rgb(108 255 212);
bg:beryl-30
background-color: rgb(15 239 164);
bg:beryl-40
background-color: rgb(4 224 158);
bg:beryl-50
background-color: rgb(4 203 143);
bg:beryl-60
background-color: rgb(0 178 119);
bg:beryl-70
background-color: rgb(0 147 96);
bg:beryl-80
background-color: rgb(0 127 80);
bg:beryl-90
background-color: rgb(0 102 62);
bg:beryl-95
background-color: rgb(0 61 36);
bg:teal-5
background-color: rgb(219 254 253);
bg:teal-10
background-color: rgb(207 255 255);
bg:teal-20
background-color: rgb(127 255 246);
bg:teal-30
background-color: rgb(0 244 228);
bg:teal-40
background-color: rgb(0 228 212);
bg:teal-50
background-color: rgb(0 204 200);
bg:teal-60
background-color: rgb(0 174 183);
bg:teal-70
background-color: rgb(0 146 163);
bg:teal-80
background-color: rgb(0 121 142);
bg:teal-90
background-color: rgb(0 93 117);
bg:teal-95
background-color: rgb(0 55 71);
bg:cyan-5
background-color: rgb(224 255 255);
bg:cyan-10
background-color: rgb(209 255 255);
bg:cyan-20
background-color: rgb(127 246 255);
bg:cyan-30
background-color: rgb(30 225 255);
bg:cyan-40
background-color: rgb(0 204 249);
bg:cyan-50
background-color: rgb(0 179 234);
bg:cyan-60
background-color: rgb(0 153 214);
bg:cyan-70
background-color: rgb(0 125 188);
bg:cyan-80
background-color: rgb(0 103 168);
bg:cyan-90
background-color: rgb(0 80 137);
bg:cyan-95
background-color: rgb(0 49 86);
bg:sky-5
background-color: rgb(229 245 255);
bg:sky-10
background-color: rgb(217 248 255);
bg:sky-20
background-color: rgb(163 222 255);
bg:sky-30
background-color: rgb(107 198 255);
bg:sky-40
background-color: rgb(52 178 253);
bg:sky-50
background-color: rgb(5 159 255);
bg:sky-60
background-color: rgb(0 141 249);
bg:sky-70
background-color: rgb(0 115 224);
bg:sky-80
background-color: rgb(0 92 198);
bg:sky-90
background-color: rgb(0 65 163);
bg:sky-95
background-color: rgb(0 37 102);
bg:blue-5
background-color: rgb(229 243 254);
bg:blue-10
background-color: rgb(219 242 254);
bg:blue-20
background-color: rgb(173 215 255);
bg:blue-30
background-color: rgb(112 176 255);
bg:blue-40
background-color: rgb(76 147 253);
bg:blue-50
background-color: rgb(58 124 255);
bg:blue-60
background-color: rgb(37 99 253);
bg:blue-70
background-color: rgb(27 83 236);
bg:blue-80
background-color: rgb(25 71 209);
bg:blue-90
background-color: rgb(23 53 162);
bg:blue-95
background-color: rgb(16 32 105);
bg:indigo-5
background-color: rgb(240 241 254);
bg:indigo-10
background-color: rgb(233 236 254);
bg:indigo-20
background-color: rgb(200 205 254);
bg:indigo-30
background-color: rgb(147 158 255);
bg:indigo-40
background-color: rgb(126 129 254);
bg:indigo-50
background-color: rgb(112 104 255);
bg:indigo-60
background-color: rgb(91 76 253);
bg:indigo-70
background-color: rgb(78 57 237);
bg:indigo-80
background-color: rgb(71 50 210);
bg:indigo-90
background-color: rgb(54 35 163);
bg:indigo-95
background-color: rgb(38 23 108);
bg:violet-5
background-color: rgb(242 239 255);
bg:violet-10
background-color: rgb(239 232 255);
bg:violet-20
background-color: rgb(215 197 255);
bg:violet-30
background-color: rgb(177 152 254);
bg:violet-40
background-color: rgb(154 112 255);
bg:violet-50
background-color: rgb(142 86 254);
bg:violet-60
background-color: rgb(129 47 255);
bg:violet-70
background-color: rgb(116 7 242);
bg:violet-80
background-color: rgb(100 5 209);
bg:violet-90
background-color: rgb(79 5 163);
bg:violet-95
background-color: rgb(53 3 110);
bg:purple-5
background-color: rgb(246 240 255);
bg:purple-10
background-color: rgb(246 232 254);
bg:purple-20
background-color: rgb(226 191 254);
bg:purple-30
background-color: rgb(196 146 253);
bg:purple-40
background-color: rgb(178 102 255);
bg:purple-50
background-color: rgb(168 73 254);
bg:purple-60
background-color: rgb(149 20 255);
bg:purple-70
background-color: rgb(130 0 229);
bg:purple-80
background-color: rgb(113 0 193);
bg:purple-90
background-color: rgb(88 0 142);
bg:purple-95
background-color: rgb(62 0 96);
bg:fuchsia-5
background-color: rgb(250 240 255);
bg:fuchsia-10
background-color: rgb(253 232 254);
bg:fuchsia-20
background-color: rgb(240 186 255);
bg:fuchsia-30
background-color: rgb(221 137 254);
bg:fuchsia-40
background-color: rgb(215 96 254);
bg:fuchsia-50
background-color: rgb(207 51 255);
bg:fuchsia-60
background-color: rgb(183 0 229);
bg:fuchsia-70
background-color: rgb(162 0 198);
bg:fuchsia-80
background-color: rgb(135 0 163);
bg:fuchsia-90
background-color: rgb(102 1 117);
bg:fuchsia-95
background-color: rgb(72 0 81);
bg:pink-5
background-color: rgb(254 241 249);
bg:pink-10
background-color: rgb(254 233 248);
bg:pink-20
background-color: rgb(255 184 223);
bg:pink-30
background-color: rgb(249 134 193);
bg:pink-40
background-color: rgb(250 101 178);
bg:pink-50
background-color: rgb(247 71 162);
bg:pink-60
background-color: rgb(239 33 136);
bg:pink-70
background-color: rgb(214 22 115);
bg:pink-80
background-color: rgb(184 12 92);
bg:pink-90
background-color: rgb(143 5 67);
bg:pink-95
background-color: rgb(100 3 47);
bg:crimson-5
background-color: rgb(255 239 242);
bg:crimson-10
background-color: rgb(255 232 236);
bg:crimson-20
background-color: rgb(255 186 199);
bg:crimson-30
background-color: rgb(255 132 157);
bg:crimson-40
background-color: rgb(255 102 132);
bg:crimson-50
background-color: rgb(252 64 101);
bg:crimson-60
background-color: rgb(237 42 81);
bg:crimson-70
background-color: rgb(215 23 62);
bg:crimson-80
background-color: rgb(187 21 54);
bg:crimson-90
background-color: rgb(143 19 44);
bg:crimson-95
background-color: rgb(98 14 31);
bg:red-5
background-color: rgb(255 239 239);
bg:red-10
background-color: rgb(254 232 232);
bg:red-20
background-color: rgb(255 188 188);
bg:red-30
background-color: rgb(255 135 135);
bg:red-40
background-color: rgb(253 95 95);
bg:red-50
background-color: rgb(247 63 63);
bg:red-60
background-color: rgb(229 46 46);
bg:red-70
background-color: rgb(208 27 27);
bg:red-80
background-color: rgb(184 25 25);
bg:red-90
background-color: rgb(146 21 21);
bg:red-95
background-color: rgb(101 15 15);
<div class="bg:yellow"></div>

Basic usage

With opacity

Add the suffix /alpha to change the opacity of any color.

<div class="bg:pink/.15"></div>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="bg:slate-10:hover bg:slate-10@sm bg:slate-10@dark bg:slate-10@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.