Color

CSS Variables

:where(html) {
	--red: hsl(3 75% 50%);
	--red-1: hsl(3 75% 97%);
	--red-2: hsl(3 75% 90%);
	--red-3: hsl(3 75% 77%);
	--red-4: hsl(3 75% 63%);
	--red-5: hsl(3 75% 50%);
	--red-6: hsl(3 75% 42%);
	--red-7: hsl(3 75% 34%);
	--red-8: hsl(3 75% 26%);
	--red-9: hsl(3 75% 18%);
	--red-10: hsl(3 75% 10%);

	--orange: hsl(24 94% 50%);
	--orange-1: hsl(24 94% 97%);
	--orange-2: hsl(24 94% 90%);
	--orange-3: hsl(24 94% 77%);
	--orange-4: hsl(24 94% 63%);
	--orange-5: hsl(24 94% 50%);
	--orange-6: hsl(24 94% 42%);
	--orange-7: hsl(24 94% 34%);
	--orange-8: hsl(24 94% 26%);
	--orange-9: hsl(24 94% 18%);
	--orange-10: hsl(24 94% 10%);

	--yellow: hsl(43 96% 50%);
	--yellow-1: hsl(43 96% 97%);
	--yellow-2: hsl(43 96% 90%);
	--yellow-3: hsl(43 96% 77%);
	--yellow-4: hsl(43 96% 63%);
	--yellow-5: hsl(43 96% 50%);
	--yellow-6: hsl(43 96% 42%);
	--yellow-7: hsl(43 96% 34%);
	--yellow-8: hsl(43 96% 26%);
	--yellow-9: hsl(43 96% 18%);
	--yellow-10: hsl(43 96% 10%);

	--green: hsl(134 63% 50%);
	--green-1: hsl(134 63% 97%);
	--green-2: hsl(134 63% 90%);
	--green-3: hsl(134 63% 77%);
	--green-4: hsl(134 63% 63%);
	--green-5: hsl(134 63% 50%);
	--green-6: hsl(134 63% 42%);
	--green-7: hsl(134 63% 34%);
	--green-8: hsl(134 63% 26%);
	--green-9: hsl(134 63% 18%);
	--green-10: hsl(134 63% 10%);

	--blue: hsl(221 83% 50%);
	--blue-1: hsl(221 83% 97%);
	--blue-2: hsl(221 83% 90%);
	--blue-3: hsl(221 83% 77%);
	--blue-4: hsl(221 83% 63%);
	--blue-5: hsl(221 83% 50%);
	--blue-6: hsl(221 83% 42%);
	--blue-7: hsl(221 83% 34%);
	--blue-8: hsl(221 83% 26%);
	--blue-9: hsl(221 83% 18%);
	--blue-10: hsl(221 83% 10%);

	--purple: hsl(264 76% 50%);
	--purple-1: hsl(264 76% 97%);
	--purple-2: hsl(264 76% 90%);
	--purple-3: hsl(264 76% 77%);
	--purple-4: hsl(264 76% 63%);
	--purple-5: hsl(264 76% 50%);
	--purple-6: hsl(264 76% 42%);
	--purple-7: hsl(264 76% 34%);
	--purple-8: hsl(264 76% 26%);
	--purple-9: hsl(264 76% 18%);
	--purple-10: hsl(264 76% 10%);

	--slate: hsl(215 20% 50%);
	--slate-1: hsl(215 20% 97%);
	--slate-2: hsl(215 20% 90%);
	--slate-3: hsl(215 20% 77%);
	--slate-4: hsl(215 20% 63%);
	--slate-5: hsl(215 20% 50%);
	--slate-6: hsl(215 20% 42%);
	--slate-7: hsl(215 20% 34%);
	--slate-8: hsl(215 20% 26%);
	--slate-9: hsl(215 20% 18%);
	--slate-10: hsl(215 20% 10%);

	--gray: hsl(180 5% 50%);
	--gray-1: hsl(180 5% 97%);
	--gray-2: hsl(180 5% 90%);
	--gray-3: hsl(180 5% 77%);
	--gray-4: hsl(180 5% 63%);
	--gray-5: hsl(180 5% 50%);
	--gray-6: hsl(180 5% 42%);
	--gray-7: hsl(180 5% 34%);
	--gray-8: hsl(180 5% 26%);
	--gray-9: hsl(180 5% 18%);
	--gray-10: hsl(180 5% 10%);

	--pink: hsl(330 81% 50%);
	--pink-1: hsl(330 81% 97%);
	--pink-2: hsl(330 81% 90%);
	--pink-3: hsl(330 81% 77%);
	--pink-4: hsl(330 81% 63%);
	--pink-5: hsl(330 81% 50%);
	--pink-6: hsl(330 81% 42%);
	--pink-7: hsl(330 81% 34%);
	--pink-8: hsl(330 81% 26%);
	--pink-9: hsl(330 81% 18%);
	--pink-10: hsl(330 81% 10%);

	--teal: hsl(189 72% 50%);
	--teal-1: hsl(189 72% 97%);
	--teal-2: hsl(189 72% 90%);
	--teal-3: hsl(189 72% 77%);
	--teal-4: hsl(189 72% 63%);
	--teal-5: hsl(189 72% 50%);
	--teal-6: hsl(189 72% 42%);
	--teal-7: hsl(189 72% 34%);
	--teal-8: hsl(189 72% 26%);
	--teal-9: hsl(189 72% 18%);
	--teal-10: hsl(189 72% 10%);

	--black: hsl(0 0% 0%);
	--black-1: hsl(0 0% 0% / 0.1);
	--black-2: hsl(0 0% 0% / 0.2);
	--black-3: hsl(0 0% 0% / 0.3);
	--black-4: hsl(0 0% 0% / 0.4);
	--black-5: hsl(0 0% 0% / 0.5);
	--black-6: hsl(0 0% 0% / 0.6);
	--black-7: hsl(0 0% 0% / 0.7);
	--black-8: hsl(0 0% 0% / 0.8);
	--black-9: hsl(0 0% 0% / 0.9);
	--black-10: hsl(0 0% 0% / 0.95);

	--white: hsl(0 0% 100%);
	--white-1: hsl(0 0% 100% / 0.1);
	--white-2: hsl(0 0% 100% / 0.2);
	--white-3: hsl(0 0% 100% / 0.3);
	--white-4: hsl(0 0% 100% / 0.4);
	--white-5: hsl(0 0% 100% / 0.5);
	--white-6: hsl(0 0% 100% / 0.6);
	--white-7: hsl(0 0% 100% / 0.7);
	--white-8: hsl(0 0% 100% / 0.8);
	--white-9: hsl(0 0% 100% / 0.9);
	--white-10: hsl(0 0% 100% / 0.95);
}

Utility Classes

.bg-red { background: var(--red); }
.bg-red-1 { background: var(--red-1); }
.bg-red-2 { background: var(--red-2); }
.bg-red-3 { background: var(--red-3); }
.bg-red-4 { background: var(--red-4); }
.bg-red-5 { background: var(--red-5); }
.bg-red-6 { background: var(--red-6); }
.bg-red-7 { background: var(--red-7); }
.bg-red-8 { background: var(--red-8); }
.bg-red-9 { background: var(--red-9); }
.bg-red-10 { background: var(--red-10); }

.shadow-red { --shadow-color: var(--red-hsl); --shadow: var(--shadow-colored); }
.shadow-red-1 { --shadow-color: var(--red-1-hsl); --shadow: var(--shadow-colored); }
.shadow-red-2 { --shadow-color: var(--red-2-hsl); --shadow: var(--shadow-colored); }
.shadow-red-3 { --shadow-color: var(--red-3-hsl); --shadow: var(--shadow-colored); }
.shadow-red-4 { --shadow-color: var(--red-4-hsl); --shadow: var(--shadow-colored); }
.shadow-red-5 { --shadow-color: var(--red-5-hsl); --shadow: var(--shadow-colored); }
.shadow-red-6 { --shadow-color: var(--red-6-hsl); --shadow: var(--shadow-colored); }
.shadow-red-7 { --shadow-color: var(--red-7-hsl); --shadow: var(--shadow-colored); }
.shadow-red-8 { --shadow-color: var(--red-8-hsl); --shadow: var(--shadow-colored); }
.shadow-red-9 { --shadow-color: var(--red-9-hsl); --shadow: var(--shadow-colored); }
.shadow-red-10 { --shadow-color: var(--red-10-hsl); --shadow: var(--shadow-colored); }

.border-red { --border-color: var(--red); --border: var(--border-colored); }
.border-red-1 { --border-color: var(--red-1); --border: var(--border-colored); }
.border-red-2 { --border-color: var(--red-2); --border: var(--border-colored); }
.border-red-3 { --border-color: var(--red-3); --border: var(--border-colored); }
.border-red-4 { --border-color: var(--red-4); --border: var(--border-colored); }
.border-red-5 { --border-color: var(--red-5); --border: var(--border-colored); }
.border-red-6 { --border-color: var(--red-6); --border: var(--border-colored); }
.border-red-7 { --border-color: var(--red-7); --border: var(--border-colored); }
.border-red-8 { --border-color: var(--red-8); --border: var(--border-colored); }
.border-red-9 { --border-color: var(--red-9); --border: var(--border-colored); }
.border-red-10 { --border-color: var(--red-10); --border: var(--border-colored); }

.bg-orange { background: var(--orange); }
.bg-orange-1 { background: var(--orange-1); }
.bg-orange-2 { background: var(--orange-2); }
.bg-orange-3 { background: var(--orange-3); }
.bg-orange-4 { background: var(--orange-4); }
.bg-orange-5 { background: var(--orange-5); }
.bg-orange-6 { background: var(--orange-6); }
.bg-orange-7 { background: var(--orange-7); }
.bg-orange-8 { background: var(--orange-8); }
.bg-orange-9 { background: var(--orange-9); }
.bg-orange-10 { background: var(--orange-10); }

.bg-yellow { background: var(--yellow); }
.bg-yellow-1 { background: var(--yellow-1); }
.bg-yellow-2 { background: var(--yellow-2); }
.bg-yellow-3 { background: var(--yellow-3); }
.bg-yellow-4 { background: var(--yellow-4); }
.bg-yellow-5 { background: var(--yellow-5); }
.bg-yellow-6 { background: var(--yellow-6); }
.bg-yellow-7 { background: var(--yellow-7); }
.bg-yellow-8 { background: var(--yellow-8); }
.bg-yellow-9 { background: var(--yellow-9); }
.bg-yellow-10 { background: var(--yellow-10); }

.bg-green { background: var(--green); }
.bg-green-1 { background: var(--green-1); }
.bg-green-2 { background: var(--green-2); }
.bg-green-3 { background: var(--green-3); }
.bg-green-4 { background: var(--green-4); }
.bg-green-5 { background: var(--green-5); }
.bg-green-6 { background: var(--green-6); }
.bg-green-7 { background: var(--green-7); }
.bg-green-8 { background: var(--green-8); }
.bg-green-9 { background: var(--green-9); }
.bg-green-10 { background: var(--green-10); }

.shadow-green { --shadow-color: var(--green-hsl); --shadow: var(--shadow-colored); }
.shadow-green-1 { --shadow-color: var(--green-1-hsl); --shadow: var(--shadow-colored); }
.shadow-green-2 { --shadow-color: var(--green-2-hsl); --shadow: var(--shadow-colored); }
.shadow-green-3 { --shadow-color: var(--green-3-hsl); --shadow: var(--shadow-colored); }
.shadow-green-4 { --shadow-color: var(--green-4-hsl); --shadow: var(--shadow-colored); }
.shadow-green-5 { --shadow-color: var(--green-5-hsl); --shadow: var(--shadow-colored); }
.shadow-green-6 { --shadow-color: var(--green-6-hsl); --shadow: var(--shadow-colored); }
.shadow-green-7 { --shadow-color: var(--green-7-hsl); --shadow: var(--shadow-colored); }
.shadow-green-8 { --shadow-color: var(--green-8-hsl); --shadow: var(--shadow-colored); }
.shadow-green-9 { --shadow-color: var(--green-9-hsl); --shadow: var(--shadow-colored); }
.shadow-green-10 { --shadow-color: var(--green-10-hsl); --shadow: var(--shadow-colored); }

.bg-blue { background: var(--blue); }
.bg-blue-1 { background: var(--blue-1); }
.bg-blue-2 { background: var(--blue-2); }
.bg-blue-3 { background: var(--blue-3); }
.bg-blue-4 { background: var(--blue-4); }
.bg-blue-5 { background: var(--blue-5); }
.bg-blue-6 { background: var(--blue-6); }
.bg-blue-7 { background: var(--blue-7); }
.bg-blue-8 { background: var(--blue-8); }
.bg-blue-9 { background: var(--blue-9); }
.bg-blue-10 { background: var(--blue-10); }

.shadow-blue { --shadow-color: var(--blue-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-1 { --shadow-color: var(--blue-1-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-2 { --shadow-color: var(--blue-2-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-3 { --shadow-color: var(--blue-3-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-4 { --shadow-color: var(--blue-4-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-5 { --shadow-color: var(--blue-5-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-6 { --shadow-color: var(--blue-6-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-7 { --shadow-color: var(--blue-7-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-8 { --shadow-color: var(--blue-8-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-9 { --shadow-color: var(--blue-9-hsl); --shadow: var(--shadow-colored); }
.shadow-blue-10 { --shadow-color: var(--blue-10-hsl); --shadow: var(--shadow-colored); }

.bg-purple { background: var(--purple); }
.bg-purple-1 { background: var(--purple-1); }
.bg-purple-2 { background: var(--purple-2); }
.bg-purple-3 { background: var(--purple-3); }
.bg-purple-4 { background: var(--purple-4); }
.bg-purple-5 { background: var(--purple-5); }
.bg-purple-6 { background: var(--purple-6); }
.bg-purple-7 { background: var(--purple-7); }
.bg-purple-8 { background: var(--purple-8); }
.bg-purple-9 { background: var(--purple-9); }
.bg-purple-10 { background: var(--purple-10); }

.bg-black { background: var(--black); }
.bg-black-1 { background: var(--black-1); }
.bg-black-2 { background: var(--black-2); }
.bg-black-3 { background: var(--black-3); }
.bg-black-4 { background: var(--black-4); }
.bg-black-5 { background: var(--black-5); }
.bg-black-6 { background: var(--black-6); }
.bg-black-7 { background: var(--black-7); }
.bg-black-8 { background: var(--black-8); }
.bg-black-9 { background: var(--black-9); }
.bg-black-10 { background: var(--black-10); }

.bg-white { background: var(--white); }
.bg-white-1 { background: var(--white-1); }
.bg-white-2 { background: var(--white-2); }
.bg-white-3 { background: var(--white-3); }
.bg-white-4 { background: var(--white-4); }
.bg-white-5 { background: var(--white-5); }
.bg-white-6 { background: var(--white-6); }
.bg-white-7 { background: var(--white-7); }
.bg-white-8 { background: var(--white-8); }
.bg-white-9 { background: var(--white-9); }
.bg-white-10 { background: var(--white-10); }

.white { color: var(--white); }
.white-1 { color: var(--white-1); }
.white-2 { color: var(--white-2); }
.white-3 { color: var(--white-3); }
.white-4 { color: var(--white-4); }
.white-5 { color: var(--white-5); }
.white-6 { color: var(--white-6); }
.white-7 { color: var(--white-7); }
.white-8 { color: var(--white-8); }
.white-9 { color: var(--white-9); }
.white-10 { color: var(--white-10); }

.bg-slate { background: var(--slate); }
.bg-slate-1 { background: var(--slate-1); }
.bg-slate-2 { background: var(--slate-2); }
.bg-slate-3 { background: var(--slate-3); }
.bg-slate-4 { background: var(--slate-4); }
.bg-slate-5 { background: var(--slate-5); }
.bg-slate-6 { background: var(--slate-6); }
.bg-slate-7 { background: var(--slate-7); }
.bg-slate-8 { background: var(--slate-8); }
.bg-slate-9 { background: var(--slate-9); }
.bg-slate-10 { background: var(--slate-10); }

.bg-gray { background: var(--gray); }
.bg-gray-1 { background: var(--gray-1); }
.bg-gray-2 { background: var(--gray-2); }
.bg-gray-3 { background: var(--gray-3); }
.bg-gray-4 { background: var(--gray-4); }
.bg-gray-5 { background: var(--gray-5); }
.bg-gray-6 { background: var(--gray-6); }
.bg-gray-7 { background: var(--gray-7); }
.bg-gray-8 { background: var(--gray-8); }
.bg-gray-9 { background: var(--gray-9); }
.bg-gray-10 { background: var(--gray-10); }

.bg-pink { background: var(--pink); }
.bg-pink-1 { background: var(--pink-1); }
.bg-pink-2 { background: var(--pink-2); }
.bg-pink-3 { background: var(--pink-3); }
.bg-pink-4 { background: var(--pink-4); }
.bg-pink-5 { background: var(--pink-5); }
.bg-pink-6 { background: var(--pink-6); }
.bg-pink-7 { background: var(--pink-7); }
.bg-pink-8 { background: var(--pink-8); }
.bg-pink-9 { background: var(--pink-9); }
.bg-pink-10 { background: var(--pink-10); }

.bg-teal { background: var(--teal); }
.bg-teal-1 { background: var(--teal-1); }
.bg-teal-2 { background: var(--teal-2); }
.bg-teal-3 { background: var(--teal-3); }
.bg-teal-4 { background: var(--teal-4); }
.bg-teal-5 { background: var(--teal-5); }
.bg-teal-6 { background: var(--teal-6); }
.bg-teal-7 { background: var(--teal-7); }
.bg-teal-8 { background: var(--teal-8); }
.bg-teal-9 { background: var(--teal-9); }
.bg-teal-10 { background: var(--teal-10); }