Syntax

Color

Setting foreground color of an element.

Overview

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

Heavy boxes perform quick waltzes and jigs.

<p class="fg:blue">Heavy boxes perform quick waltzes and jigs.</p>

Basic usage

With opacity

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

Heavy boxes perform quick waltzes and jigs.

<p class="fg:blue/.15">Heavy boxes perform quick waltzes and jigs.</p>

Conditionally apply

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

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

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.
MIT License