Syntax
Background Color
Setting the background color of an element.
Overview
| Class | Declarations |
|---|---|
bg:color | background: 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 conditional queries.
<div class="bg:slate-10:hover bg:slate-10@sm bg:slate-10@dark bg:slate-10@print">…</div>