Syntax

color

Setting foreground color of an element.

Class	Declarations
`fg:<color>`	`color: <color>;`
Aa`fg:transparent`	`color: transparent;`
Aa`fg:current`	`color: currentColor;`
Aa`fg:black`	`color: oklch(0% 0 none);`
Aa`fg:white`	`color: oklch(100% 0 none);`
Aa`fg:invert`	`color: var(--color-text-invert);`
Aa`fg:strong`	`color: var(--color-text-strong);`
Aa`fg:neutral`	`color: var(--color-text-neutral);`
Aa`fg:light`	`color: var(--color-text-light);`
Aa`fg:lighter`	`color: var(--color-text-lighter);`
Aa`fg:lightest`	`color: var(--color-text-lightest);`
Aa`fg:gray`	`color: var(--color-text-gray);`
Aa`fg:slate`	`color: var(--color-text-slate);`
Aa`fg:brown`	`color: var(--color-text-brown);`
Aa`fg:orange`	`color: var(--color-text-orange);`
Aa`fg:amber`	`color: var(--color-text-amber);`
Aa`fg:yellow`	`color: var(--color-text-yellow);`
Aa`fg:lime`	`color: var(--color-text-lime);`
Aa`fg:green`	`color: var(--color-text-green);`
Aa`fg:beryl`	`color: var(--color-text-beryl);`
Aa`fg:teal`	`color: var(--color-text-teal);`
Aa`fg:cyan`	`color: var(--color-text-cyan);`
Aa`fg:sky`	`color: var(--color-text-sky);`
Aa`fg:blue`	`color: var(--color-text-blue);`
Aa`fg:indigo`	`color: var(--color-text-indigo);`
Aa`fg:violet`	`color: var(--color-text-violet);`
Aa`fg:purple`	`color: var(--color-text-purple);`
Aa`fg:fuchsia`	`color: var(--color-text-fuchsia);`
Aa`fg:pink`	`color: var(--color-text-pink);`
Aa`fg:crimson`	`color: var(--color-text-crimson);`
Aa`fg:red`	`color: var(--color-text-red);`
Aa`fg:stone-0`	`color: oklch(99% 0.0033 72);`
Aa`fg:stone-5`	`color: oklch(94.9% 0.0066 72);`
Aa`fg:stone-10`	`color: oklch(90.8% 0.0172 72);`
Aa`fg:stone-20`	`color: oklch(82.6% 0.0287 72);`
Aa`fg:stone-30`	`color: oklch(74.4% 0.04 72);`
Aa`fg:stone-40`	`color: oklch(66.2% 0.044 72);`
Aa`fg:stone-50`	`color: oklch(58% 0.045 72);`
Aa`fg:stone-60`	`color: oklch(49.8% 0.033 72);`
Aa`fg:stone-70`	`color: oklch(41.6% 0.0275 72);`
Aa`fg:stone-80`	`color: oklch(33.4% 0.022 72);`
Aa`fg:stone-90`	`color: oklch(25.2% 0.0105 72);`
Aa`fg:stone-95`	`color: oklch(21.1% 0.0079 72);`
Aa`fg:stone-100`	`color: oklch(17% 0.0053 72);`
Aa`fg:gray-0`	`color: oklch(98.48% 0 none);`
Aa`fg:gray-5`	`color: oklch(96.5% 0 none);`
Aa`fg:gray-10`	`color: oklch(90% 0 none);`
Aa`fg:gray-20`	`color: oklch(82% 0 none);`
Aa`fg:gray-30`	`color: oklch(73.5% 0 none);`
Aa`fg:gray-40`	`color: oklch(65% 0 none);`
Aa`fg:gray-50`	`color: oklch(55.2% 0 none);`
Aa`fg:gray-60`	`color: oklch(48% 0 none);`
Aa`fg:gray-70`	`color: oklch(39.5% 0 none);`
Aa`fg:gray-80`	`color: oklch(31% 0 none);`
Aa`fg:gray-90`	`color: oklch(23.5% 0 none);`
Aa`fg:gray-95`	`color: oklch(18.5% 0 none);`
Aa`fg:gray-100`	`color: oklch(14.5% 0 none);`
Aa`fg:grey-0`	`color: oklch(98.38% 0.0033 249.7);`
Aa`fg:grey-5`	`color: oklch(95.52% 0.0099 270);`
Aa`fg:grey-10`	`color: oklch(90% 0.014 272);`
Aa`fg:grey-20`	`color: oklch(82% 0.02 272);`
Aa`fg:grey-30`	`color: oklch(73.5% 0.027 272);`
Aa`fg:grey-40`	`color: oklch(65% 0.032 273);`
Aa`fg:grey-50`	`color: oklch(55.2% 0.035 273);`
Aa`fg:grey-60`	`color: oklch(48% 0.032 273);`
Aa`fg:grey-70`	`color: oklch(39.5% 0.027 273);`
Aa`fg:grey-80`	`color: oklch(31% 0.022 273);`
Aa`fg:grey-90`	`color: oklch(23.5% 0.016 273);`
Aa`fg:grey-95`	`color: oklch(18.5% 0.012 273);`
Aa`fg:grey-100`	`color: oklch(14.5% 0.009 273);`
Aa`fg:slate-0`	`color: oklch(98.07% 0.0092 257.1);`
Aa`fg:slate-5`	`color: oklch(96.15% 0.0181 267.3);`
Aa`fg:slate-10`	`color: oklch(90.16% 0.0352 268.2);`
Aa`fg:slate-20`	`color: oklch(82.16% 0.045 268.2);`
Aa`fg:slate-30`	`color: oklch(74.16% 0.069 268.2);`
Aa`fg:slate-40`	`color: oklch(63.99% 0.0804 266.1);`
Aa`fg:slate-50`	`color: oklch(55.43% 0.0949 263.4);`
Aa`fg:slate-60`	`color: oklch(45.03% 0.0817 265.9);`
Aa`fg:slate-70`	`color: oklch(39% 0.0702 263.9);`
Aa`fg:slate-80`	`color: oklch(32.14% 0.0604 264.8);`
Aa`fg:slate-90`	`color: oklch(27.33% 0.0536 264.8);`
Aa`fg:slate-95`	`color: oklch(21.5% 0.0573 267.4);`
Aa`fg:slate-100`	`color: oklch(17.5% 0.0688 267.4);`
Aa`fg:brown-0`	`color: oklch(97% 0.0161 47.15);`
Aa`fg:brown-5`	`color: oklch(95.48% 0.0229 34.84);`
Aa`fg:brown-10`	`color: oklch(88.65% 0.0606 33.36);`
Aa`fg:brown-20`	`color: oklch(81.37% 0.1065 33.59);`
Aa`fg:brown-30`	`color: oklch(74.39% 0.12 32.5);`
Aa`fg:brown-40`	`color: oklch(67.62% 0.12 32.5);`
Aa`fg:brown-50`	`color: oklch(61.9% 0.12 32.5);`
Aa`fg:brown-60`	`color: oklch(55.58% 0.12 32.5);`
Aa`fg:brown-70`	`color: oklch(49.11% 0.12 32.5);`
Aa`fg:brown-80`	`color: oklch(42.07% 0.12 32.5);`
Aa`fg:brown-90`	`color: oklch(35.11% 0.12 32.5);`
Aa`fg:brown-95`	`color: oklch(24.7% 0.0958 31.18);`
Aa`fg:brown-100`	`color: oklch(21.21% 0.0822 31.17);`
Aa`fg:orange-0`	`color: oklch(96.76% 0.0337 84.59);`
Aa`fg:orange-5`	`color: oklch(94.78% 0.0521 82.97);`
Aa`fg:orange-10`	`color: oklch(89.94% 0.0852 75.65);`
Aa`fg:orange-20`	`color: oklch(82.86% 0.1343 69.21);`
Aa`fg:orange-30`	`color: oklch(75.09% 0.179 58.39);`
Aa`fg:orange-40`	`color: oklch(71.4% 0.1941 48.13);`
Aa`fg:orange-50`	`color: oklch(66.61% 0.2247 36.66);`
Aa`fg:orange-60`	`color: oklch(61.68% 0.2388 31.22);`
Aa`fg:orange-70`	`color: oklch(53.53% 0.2196 29.23);`
Aa`fg:orange-80`	`color: oklch(46.33% 0.1901 29.23);`
Aa`fg:orange-90`	`color: oklch(36.63% 0.1503 29.23);`
Aa`fg:orange-95`	`color: oklch(25.4% 0.1042 29.23);`
Aa`fg:orange-100`	`color: oklch(21.44% 0.088 29.23);`
Aa`fg:amber-0`	`color: oklch(97.5% 0.051 98.98);`
Aa`fg:amber-5`	`color: oklch(96.24% 0.0716 98.08);`
Aa`fg:amber-10`	`color: oklch(93.46% 0.1082 95.78);`
Aa`fg:amber-20`	`color: oklch(88.25% 0.1592 91.33);`
Aa`fg:amber-30`	`color: oklch(86% 0.1633 86.92);`
Aa`fg:amber-40`	`color: oklch(83.04% 0.1701 81.13);`
Aa`fg:amber-50`	`color: oklch(79.4% 0.1709 71.06);`
Aa`fg:amber-60`	`color: oklch(73.31% 0.1784 56.52);`
Aa`fg:amber-70`	`color: oklch(63.23% 0.1757 46.71);`
Aa`fg:amber-80`	`color: oklch(53.09% 0.1677 39.66);`
Aa`fg:amber-90`	`color: oklch(42.68% 0.138 38.58);`
Aa`fg:amber-95`	`color: oklch(29.27% 0.0971 37.42);`
Aa`fg:amber-100`	`color: oklch(23.94% 0.0818 36.09);`
Aa`fg:yellow-0`	`color: oklch(98.86% 0.0591 107.4);`
Aa`fg:yellow-5`	`color: oklch(98.27% 0.0948 108);`
Aa`fg:yellow-10`	`color: oklch(97.31% 0.1645 109.1);`
Aa`fg:yellow-20`	`color: oklch(95.82% 0.207 108.4);`
Aa`fg:yellow-30`	`color: oklch(93.51% 0.1981 104.7);`
Aa`fg:yellow-40`	`color: oklch(91.5% 0.1909 101.1);`
Aa`fg:yellow-50`	`color: oklch(87.52% 0.1796 94.59);`
Aa`fg:yellow-60`	`color: oklch(82.02% 0.169 82.09);`
Aa`fg:yellow-70`	`color: oklch(72.04% 0.1592 66.98);`
Aa`fg:yellow-80`	`color: oklch(64.84% 0.1477 63.12);`
Aa`fg:yellow-90`	`color: oklch(52.17% 0.1199 62.19);`
Aa`fg:yellow-95`	`color: oklch(33.35% 0.083 54.56);`
Aa`fg:yellow-100`	`color: oklch(26.22% 0.0646 55.44);`
Aa`fg:lime-0`	`color: oklch(98.05% 0.0665 116);`
Aa`fg:lime-5`	`color: oklch(96.62% 0.1 121.2);`
Aa`fg:lime-10`	`color: oklch(95.06% 0.1566 121.5);`
Aa`fg:lime-20`	`color: oklch(92.45% 0.2251 126);`
Aa`fg:lime-30`	`color: oklch(87.79% 0.2261 126.9);`
Aa`fg:lime-40`	`color: oklch(82.22% 0.225 131.1);`
Aa`fg:lime-50`	`color: oklch(74.39% 0.2131 133.9);`
Aa`fg:lime-60`	`color: oklch(66.45% 0.195 135.3);`
Aa`fg:lime-70`	`color: oklch(58.7% 0.1769 136.7);`
Aa`fg:lime-80`	`color: oklch(51.46% 0.1612 138.7);`
Aa`fg:lime-90`	`color: oklch(44.54% 0.1437 140.1);`
Aa`fg:lime-95`	`color: oklch(29.84% 0.097 140.4);`
Aa`fg:lime-100`	`color: oklch(25.83% 0.0851 141.1);`
Aa`fg:green-0`	`color: oklch(97% 0.0508 145.7);`
Aa`fg:green-5`	`color: oklch(94.95% 0.0888 145.5);`
Aa`fg:green-10`	`color: oklch(92.05% 0.1473 145.7);`
Aa`fg:green-20`	`color: oklch(89.18% 0.2191 143.8);`
Aa`fg:green-30`	`color: oklch(84.3% 0.24 143.9);`
Aa`fg:green-40`	`color: oklch(77.68% 0.25 144.1);`
Aa`fg:green-50`	`color: oklch(72.41% 0.2464 142.5);`
Aa`fg:green-60`	`color: oklch(67.52% 0.2298 142.5);`
Aa`fg:green-70`	`color: oklch(58.66% 0.1996 142.5);`
Aa`fg:green-80`	`color: oklch(51.96% 0.1768 142.5);`
Aa`fg:green-90`	`color: oklch(44.03% 0.1498 142.5);`
Aa`fg:green-95`	`color: oklch(30.17% 0.1027 142.5);`
Aa`fg:green-100`	`color: oklch(26.35% 0.0897 142.5);`
Aa`fg:beryl-0`	`color: oklch(96.57% 0.05 163.7);`
Aa`fg:beryl-5`	`color: oklch(94.71% 0.0792 163.5);`
Aa`fg:beryl-10`	`color: oklch(91.87% 0.128 162.2);`
Aa`fg:beryl-20`	`color: oklch(90.33% 0.1569 161.2);`
Aa`fg:beryl-30`	`color: oklch(86.43% 0.2104 155.8);`
Aa`fg:beryl-40`	`color: oklch(82.49% 0.1978 156.6);`
Aa`fg:beryl-50`	`color: oklch(76.89% 0.1885 155.4);`
Aa`fg:beryl-60`	`color: oklch(69.77% 0.1794 153.1);`
Aa`fg:beryl-70`	`color: oklch(60.74% 0.1602 151.9);`
Aa`fg:beryl-80`	`color: oklch(54.36% 0.1421 152.3);`
Aa`fg:beryl-90`	`color: oklch(46.09% 0.1213 152);`
Aa`fg:beryl-95`	`color: oklch(30.39% 0.0888 147.6);`
Aa`fg:beryl-100`	`color: oklch(26.71% 0.0855 144.4);`
Aa`fg:teal-0`	`color: oklch(97.24% 0.0384 179.8);`
Aa`fg:teal-5`	`color: oklch(94.3% 0.0826 180.5);`
Aa`fg:teal-10`	`color: oklch(92.33% 0.1148 181.5);`
Aa`fg:teal-20`	`color: oklch(91.3% 0.1327 183.1);`
Aa`fg:teal-30`	`color: oklch(90.52% 0.1472 184.8);`
Aa`fg:teal-40`	`color: oklch(89.99% 0.1577 186.3);`
Aa`fg:teal-50`	`color: oklch(86.13% 0.1485 190.5);`
Aa`fg:teal-60`	`color: oklch(79.38% 0.1355 194.8);`
Aa`fg:teal-70`	`color: oklch(67.86% 0.1154 199.2);`
Aa`fg:teal-80`	`color: oklch(60.62% 0.1033 203.7);`
Aa`fg:teal-90`	`color: oklch(52.19% 0.0898 208.3);`
Aa`fg:teal-95`	`color: oklch(31.94% 0.0584 220.7);`
Aa`fg:teal-100`	`color: oklch(28.34% 0.0534 224.3);`
Aa`fg:cyan-0`	`color: oklch(97.47% 0.0367 196.6);`
Aa`fg:cyan-5`	`color: oklch(95.05% 0.0748 196);`
Aa`fg:cyan-10`	`color: oklch(92.28% 0.1122 196.9);`
Aa`fg:cyan-20`	`color: oklch(89.98% 0.1264 200.1);`
Aa`fg:cyan-30`	`color: oklch(87.28% 0.1376 204.3);`
Aa`fg:cyan-40`	`color: oklch(84.82% 0.1408 209.5);`
Aa`fg:cyan-50`	`color: oklch(81.54% 0.1453 216.7);`
Aa`fg:cyan-60`	`color: oklch(77.57% 0.1494 226.7);`
Aa`fg:cyan-70`	`color: oklch(70.27% 0.1509 235.9);`
Aa`fg:cyan-80`	`color: oklch(63.25% 0.1493 241.7);`
Aa`fg:cyan-90`	`color: oklch(52.16% 0.1354 246.4);`
Aa`fg:cyan-95`	`color: oklch(35.21% 0.0976 249.2);`
Aa`fg:cyan-100`	`color: oklch(30.27% 0.0847 249.6);`
Aa`fg:sky-0`	`color: oklch(97.39% 0.0232 209.4);`
Aa`fg:sky-5`	`color: oklch(94.65% 0.0448 212.1);`
Aa`fg:sky-10`	`color: oklch(90.51% 0.0725 216.5);`
Aa`fg:sky-20`	`color: oklch(86.58% 0.0902 224);`
Aa`fg:sky-30`	`color: oklch(77.94% 0.1431 228.4);`
Aa`fg:sky-40`	`color: oklch(72.24% 0.1626 239);`
Aa`fg:sky-50`	`color: oklch(67.09% 0.1828 248.5);`
Aa`fg:sky-60`	`color: oklch(62.09% 0.2077 255.4);`
Aa`fg:sky-70`	`color: oklch(55.12% 0.2483 261.6);`
Aa`fg:sky-80`	`color: oklch(49.98% 0.2769 263.8);`
Aa`fg:sky-90`	`color: oklch(40.76% 0.2499 264.2);`
Aa`fg:sky-95`	`color: oklch(28.37% 0.1946 265.1);`
Aa`fg:sky-100`	`color: oklch(25.85% 0.1768 265.4);`
Aa`fg:blue-0`	`color: oklch(97.5% 0.0175 219.7);`
Aa`fg:blue-5`	`color: oklch(93.53% 0.0381 231.3);`
Aa`fg:blue-10`	`color: oklch(90.01% 0.0564 236.1);`
Aa`fg:blue-20`	`color: oklch(81.69% 0.0975 246.5);`
Aa`fg:blue-30`	`color: oklch(72.87% 0.1468 249.3);`
Aa`fg:blue-40`	`color: oklch(64.31% 0.1921 258.5);`
Aa`fg:blue-50`	`color: oklch(58.22% 0.2279 263.9);`
Aa`fg:blue-60`	`color: oklch(51.83% 0.2687 266.1);`
Aa`fg:blue-70`	`color: oklch(46.26% 0.3057 266.7);`
Aa`fg:blue-80`	`color: oklch(42.89% 0.2907 266.3);`
Aa`fg:blue-90`	`color: oklch(39.4% 0.2629 268);`
Aa`fg:blue-95`	`color: oklch(28.64% 0.1893 269);`
Aa`fg:blue-100`	`color: oklch(25.46% 0.168 269.2);`
Aa`fg:indigo-0`	`color: oklch(97.1% 0.0138 257.2);`
Aa`fg:indigo-5`	`color: oklch(94.11% 0.0285 279.6);`
Aa`fg:indigo-10`	`color: oklch(87.83% 0.0595 274.4);`
Aa`fg:indigo-20`	`color: oklch(77.74% 0.1153 280.2);`
Aa`fg:indigo-30`	`color: oklch(70.2% 0.1611 282.9);`
Aa`fg:indigo-40`	`color: oklch(61.3% 0.218 284);`
Aa`fg:indigo-50`	`color: oklch(56.78% 0.2478 284.1);`
Aa`fg:indigo-60`	`color: oklch(50.06% 0.2906 282);`
Aa`fg:indigo-70`	`color: oklch(48.74% 0.2963 279.3);`
Aa`fg:indigo-80`	`color: oklch(48.25% 0.2976 277.4);`
Aa`fg:indigo-90`	`color: oklch(41.46% 0.2571 276.7);`
Aa`fg:indigo-95`	`color: oklch(29.36% 0.1799 278.3);`
Aa`fg:indigo-100`	`color: oklch(25.28% 0.1551 278.1);`
Aa`fg:violet-0`	`color: oklch(97.96% 0.0166 322.8);`
Aa`fg:violet-5`	`color: oklch(94.02% 0.0333 299.5);`
Aa`fg:violet-10`	`color: oklch(88.69% 0.0648 300.1);`
Aa`fg:violet-20`	`color: oklch(80.47% 0.113 297.7);`
Aa`fg:violet-30`	`color: oklch(71.63% 0.1722 298.7);`
Aa`fg:violet-40`	`color: oklch(62.1% 0.237 297.8);`
Aa`fg:violet-50`	`color: oklch(56.23% 0.2803 297.8);`
Aa`fg:violet-60`	`color: oklch(52.55% 0.293 292.4);`
Aa`fg:violet-70`	`color: oklch(51.12% 0.2931 287.9);`
Aa`fg:violet-80`	`color: oklch(48.43% 0.2798 286.7);`
Aa`fg:violet-90`	`color: oklch(40.64% 0.2331 287.9);`
Aa`fg:violet-95`	`color: oklch(28.51% 0.1631 288.3);`
Aa`fg:violet-100`	`color: oklch(24.44% 0.1403 287.8);`
Aa`fg:purple-0`	`color: oklch(97.07% 0.0259 325.8);`
Aa`fg:purple-5`	`color: oklch(94.28% 0.0394 314.4);`
Aa`fg:purple-10`	`color: oklch(89.13% 0.0771 314.7);`
Aa`fg:purple-20`	`color: oklch(81.4% 0.1318 312.8);`
Aa`fg:purple-30`	`color: oklch(72.72% 0.2007 312.8);`
Aa`fg:purple-40`	`color: oklch(63.36% 0.2677 310);`
Aa`fg:purple-50`	`color: oklch(58.21% 0.2988 307.2);`
Aa`fg:purple-60`	`color: oklch(55.59% 0.2952 301);`
Aa`fg:purple-70`	`color: oklch(54.45% 0.294 297.9);`
Aa`fg:purple-80`	`color: oklch(48.76% 0.264 297.5);`
Aa`fg:purple-90`	`color: oklch(39.15% 0.2105 298.7);`
Aa`fg:purple-95`	`color: oklch(27.95% 0.1488 300.5);`
Aa`fg:purple-100`	`color: oklch(24.3% 0.128 302.4);`
Aa`fg:fuchsia-0`	`color: oklch(97.07% 0.0259 325.8);`
Aa`fg:fuchsia-5`	`color: oklch(94.57% 0.0472 324.9);`
Aa`fg:fuchsia-10`	`color: oklch(89.9% 0.0935 326.3);`
Aa`fg:fuchsia-20`	`color: oklch(81.84% 0.1554 322);`
Aa`fg:fuchsia-30`	`color: oklch(74.78% 0.2085 319.1);`
Aa`fg:fuchsia-40`	`color: oklch(67.61% 0.25 316.5);`
Aa`fg:fuchsia-50`	`color: oklch(62.91% 0.25 316.7);`
Aa`fg:fuchsia-60`	`color: oklch(58.72% 0.25 311.8);`
Aa`fg:fuchsia-70`	`color: oklch(53.61% 0.25 312.8);`
Aa`fg:fuchsia-80`	`color: oklch(47.9% 0.2382 313.2);`
Aa`fg:fuchsia-90`	`color: oklch(38.62% 0.1895 315.8);`
Aa`fg:fuchsia-95`	`color: oklch(27.75% 0.1357 316.4);`
Aa`fg:fuchsia-100`	`color: oklch(23.7% 0.1162 315.9);`
Aa`fg:pink-0`	`color: oklch(97.07% 0.0259 325.8);`
Aa`fg:pink-5`	`color: oklch(94.74% 0.0465 326.5);`
Aa`fg:pink-10`	`color: oklch(88.85% 0.0902 332.8);`
Aa`fg:pink-20`	`color: oklch(81.57% 0.1379 341.6);`
Aa`fg:pink-30`	`color: oklch(74.68% 0.2018 342.5);`
Aa`fg:pink-40`	`color: oklch(69.18% 0.2455 347.6);`
Aa`fg:pink-50`	`color: oklch(65.84% 0.25 350.7);`
Aa`fg:pink-60`	`color: oklch(63.54% 0.25 359.2);`
Aa`fg:pink-70`	`color: oklch(58.95% 0.2377 2.647);`
Aa`fg:pink-80`	`color: oklch(53% 0.2126 6.362);`
Aa`fg:pink-90`	`color: oklch(43.66% 0.1748 8.099);`
Aa`fg:pink-95`	`color: oklch(31.48% 0.1261 7.759);`
Aa`fg:pink-100`	`color: oklch(27.42% 0.1098 8.521);`
Aa`fg:crimson-0`	`color: oklch(97.07% 0.0259 325.8);`
Aa`fg:crimson-5`	`color: oklch(94.2% 0.0332 353.2);`
Aa`fg:crimson-10`	`color: oklch(88.09% 0.0677 1.012);`
Aa`fg:crimson-20`	`color: oklch(80.33% 0.1184 4.549);`
Aa`fg:crimson-30`	`color: oklch(72.9% 0.1774 4.449);`
Aa`fg:crimson-40`	`color: oklch(66.41% 0.2325 8.311);`
Aa`fg:crimson-50`	`color: oklch(63.55% 0.25 15.3);`
Aa`fg:crimson-60`	`color: oklch(62.66% 0.25 21.21);`
Aa`fg:crimson-70`	`color: oklch(58.59% 0.2383 26.22);`
Aa`fg:crimson-80`	`color: oklch(53.32% 0.2169 26.29);`
Aa`fg:crimson-90`	`color: oklch(44.03% 0.1783 24.44);`
Aa`fg:crimson-95`	`color: oklch(31.73% 0.1287 25.13);`
Aa`fg:crimson-100`	`color: oklch(27.68% 0.1126 26.19);`
Aa`fg:red-0`	`color: oklch(96.63% 0.0166 17.2);`
Aa`fg:red-5`	`color: oklch(94.05% 0.0299 17.02);`
Aa`fg:red-10`	`color: oklch(87.16% 0.0687 17.78);`
Aa`fg:red-20`	`color: oklch(79.39% 0.119 18.78);`
Aa`fg:red-30`	`color: oklch(72.94% 0.1679 17.49);`
Aa`fg:red-40`	`color: oklch(64.7% 0.2399 19.91);`
Aa`fg:red-50`	`color: oklch(62.82% 0.25 28.59);`
Aa`fg:red-60`	`color: oklch(60.94% 0.2501 29.23);`
Aa`fg:red-70`	`color: oklch(57.58% 0.2363 29.23);`
Aa`fg:red-80`	`color: oklch(53.09% 0.2178 29.23);`
Aa`fg:red-90`	`color: oklch(44.45% 0.1824 29.23);`
Aa`fg:red-95`	`color: oklch(32.59% 0.1337 29.23);`
Aa`fg:red-100`	`color: oklch(28.54% 0.1171 29.23);`

Examples

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>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

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

Customization

Use custom text colors

Add a color to the text variable namespace.

export default {    variables: {        color: {            text: {                primary: '#000'             }        }    }}

Apply the custom color:

<p class="fg:primary"></p>

Apply the defined text-* variables using the inherited rules color, text-decoration-color, text-decoration, text-fill-color, caret-color.

<html class="light">    <body class="fg:neutral"></body>     <body class="fg:text-neutral">equals</body>    <body class="fg:$text-neutral">equals</body></html>

We set the foreground color of elements using fg:color rather than the text-specific text:color.

<p class="text:pink">text-fill-color properity</p>

Besides inheriting the above rules, you can use text-* to access global text color variables in other syntax.

<svg class="stroke:text-light"></svg>

To escape inherited text colors, use $color-blue to apply variables.blue instead of variables.text.blue.

<p class="fg:$color-blue">…</p>

Syntax

clip-path

Creating a clipping region.

Syntax

column-span

Setting how elements span across multiple columns.

color

Examples

With opacity

Apply conditionally

Customization

Use custom text colors

Learning

Developer

Master UI

Social

color

Overview

Examples

With opacity

Apply conditionally

Customization

Use custom text colors

Learning

Developer

Master UI

Social