Last active
July 5, 2023 08:29
-
-
Save indaco/cf83d399b411249e6b066284bed28f5a to your computer and use it in GitHub Desktop.
The full Tailwind CSS color palette as CSS variables in HSL format
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
/* Slate */ | |
--slate-50: hsl(210deg 40% 98%); | |
--slate-100: hsl(210deg 40% 96.1%); | |
--slate-200: hsl(214.3deg 31.8% 91.4%); | |
--slate-300: hsl(212.7deg 26.8% 83.9%); | |
--slate-400: hsl(215deg 20.2% 65.1%); | |
--slate-500: hsl(215.4deg 16.3% 46.9%); | |
--slate-600: hsl(215.3deg 19.3% 34.5%); | |
--slate-700: hsl(215.3deg 25% 26.7%); | |
--slate-800: hsl(217.2deg 32.6% 17.5%); | |
--slate-900: hsl(222.2deg 47.4% 11.2%); | |
--slate-950: hsl(229deg 84% 5%); | |
/* Gray */ | |
--gray-50: hsl(210deg 20% 98%); | |
--gray-100: hsl(220deg 14.3% 95.9%); | |
--gray-200: hsl(220deg 13% 91%); | |
--gray-300: hsl(216deg 12.2% 83.9%); | |
--gray-400: hsl(217.9deg 10.6% 64.9%); | |
--gray-500: hsl(220deg 8.9% 46.1%); | |
--gray-600: hsl(215deg 13.8% 34.1%); | |
--gray-700: hsl(216.9deg 19.1% 26.7%); | |
--gray-800: hsl(215deg 27.9% 16.9%); | |
--gray-900: hsl(220.9deg 39.3% 11%); | |
--gray-950: hsl(224deg 71% 4%); | |
/* Zinc */ | |
--zync-50: hsl(0deg 0% 98%); | |
--zync-100: hsl(240deg 4.8% 95.9%); | |
--zync-200: hsl(240deg 5.9% 90%); | |
--zync-300: hsl(240deg 4.9% 83.9%); | |
--zync-400: hsl(240deg 5% 64.9%); | |
--zync-500: hsl(240deg 3.8% 46.1%); | |
--zync-600: hsl(240deg 5.2% 33.9%); | |
--zync-700: hsl(240deg 5.3% 26.1%); | |
--zync-800: hsl(240deg 3.7% 15.9%); | |
--zync-900: hsl(240deg 5.9% 10%); | |
--zync-950: hsl(240deg 10% 4%); | |
/* Neutral */ | |
--neutral-50: hsl(0deg 0% 98%); | |
--neutral-100: hsl(0deg 0% 96.1%); | |
--neutral-200: hsl(0deg 0% 89.8%); | |
--neutral-300: hsl(0deg 0% 83.1%); | |
--neutral-400: hsl(0deg 0% 63.9%); | |
--neutral-500: hsl(0deg 0% 45.1%); | |
--neutral-600: hsl(0deg 0% 32.2%); | |
--neutral-700: hsl(0deg 0% 25.1%); | |
--neutral-800: hsl(0deg 0% 14.9%); | |
--neutral-900: hsl(0deg 0% 9%); | |
--neutral-950: hsl(0deg 0% 4%); | |
/* Stone */ | |
--stone-50: hsl(60deg 9.1% 97.8%); | |
--stone-100: hsl(60deg 4.8% 95.9%); | |
--stone-200: hsl(20deg 5.9% 90%); | |
--stone-300: hsl(24deg 5.7% 82.9%); | |
--stone-400: hsl(24deg 5.4% 63.9%); | |
--stone-500: hsl(25deg 5.3% 44.7%); | |
--stone-600: hsl(33.3deg 5.5% 32.4%); | |
--stone-700: hsl(33.3deg 5.5% 32.4%); | |
--stone-800: hsl(30deg 6.3% 25.1%); | |
--stone-900: hsl(12deg 6.5% 15.1%); | |
--stone-950: hsl(20deg 14% 4%); | |
/* Red */ | |
--red-50: hsl(0deg 85.7% 97.3%); | |
--red-100: hsl(0deg 93.3% 94.1%); | |
--red-200: hsl(0deg 96.3% 89.4%); | |
--red-300: hsl(0deg 93.5% 81.8%); | |
--red-400: hsl(0deg 90.6% 70.8%); | |
--red-500: hsl(0deg 84.2% 60.2%); | |
--red-600: hsl(0deg 72.2% 50.6%); | |
--red-700: hsl(0deg 73.7% 41.8%); | |
--red-800: hsl(0deg 70% 35.3%); | |
--red-900: hsl(0deg 62.8% 30.6%); | |
--red-950: hsl(0deg 75% 15%); | |
/* Orange */ | |
--orange-50: hsl(33.3deg 100% 96.5%); | |
--orange-100: hsl(34.3deg 100% 91.8%); | |
--orange-200: hsl(32.1deg 97.7% 83.1%); | |
--orange-300: hsl(30.7deg 97.2% 72.4%); | |
--orange-400: hsl(27deg 96% 61%); | |
--orange-500: hsl(24.6deg 95% 53.1%); | |
--orange-600: hsl(20.5deg 90.2% 48.2%); | |
--orange-700: hsl(17.5deg 88.3% 40.4%); | |
--orange-800: hsl(15deg 79.1% 33.7%); | |
--orange-900: hsl(15.3deg 74.6% 27.8%); | |
--orange-950: hsl(13deg 81% 15%); | |
/* Amber */ | |
--amber-50: hsl(48deg 100% 96.1%); | |
--amber-100: hsl(48deg 96.5% 88.8%); | |
--amber-200: hsl(48deg 96.6% 76.7%); | |
--amber-300: hsl(45.9deg 96.7% 64.5%); | |
--amber-400: hsl(43.3deg 96.4% 56.3%); | |
--amber-500: hsl(37.7deg 92.1% 50.2%); | |
--amber-600: hsl(32.1deg 94.6% 43.7%); | |
--amber-700: hsl(26deg 90.5% 37.1%); | |
--amber-800: hsl(22.7deg 82.5% 31.4%); | |
--amber-900: hsl(21.7deg 77.8% 26.5%); | |
--amber-950: hsl(21deg 92% 14%); | |
/* Yellow */ | |
--yellow-50: hsl(54.5deg 91.7% 95.3%); | |
--yellow-100: hsl(54.9deg 96.7% 88%); | |
--yellow-200: hsl(52.8deg 98.3% 76.9%); | |
--yellow-300: hsl(50.4deg 97.8% 63.5%); | |
--yellow-400: hsl(47.9deg 95.8% 53.1%); | |
--yellow-500: hsl(45.4deg 93.4% 47.5%); | |
--yellow-600: hsl(40.6deg 96.1% 40.4%); | |
--yellow-700: hsl(35.5deg 91.7% 32.9%); | |
--yellow-800: hsl(31.8deg 81% 28.8%); | |
--yellow-900: hsl(28.4deg 72.5% 25.7%); | |
--yellow-950: hsl(26deg 83% 14%); | |
/* Lime */ | |
--lime-50: hsl(78.3deg 92% 95.1%); | |
--lime-100: hsl(79.6deg 89.1% 89.2%); | |
--lime-200: hsl(80.9deg 88.5% 79.6%); | |
--lime-300: hsl(82deg 84.5% 67.1%); | |
--lime-400: hsl(82.7deg 78% 55.5%); | |
--lime-500: hsl(83.7deg 80.5% 44.3%); | |
--lime-600: hsl(84.8deg 85.2% 34.5%); | |
--lime-700: hsl(85.9deg 78.4% 27.3%); | |
--lime-800: hsl(86.3deg 69% 22.7%); | |
--lime-900: hsl(87.6deg 61.2% 20.2%); | |
--lime-950: hsl(89deg 80% 10%); | |
/* Green */ | |
--green-50: hsl(138.5deg 76.5% 96.7%); | |
--green-100: hsl(140.6deg 84.2% 92.5%); | |
--green-200: hsl(141deg 78.9% 85.1%); | |
--green-300: hsl(141.7deg 76.6% 73.1%); | |
--green-400: hsl(141.9deg 69.2% 58%); | |
--green-500: hsl(142.1deg 70.6% 45.3%); | |
--green-600: hsl(142.1deg 76.2% 36.3%); | |
--green-700: hsl(142.4deg 71.8% 29.2%); | |
--green-800: hsl(142.8deg 64.2% 24.1%); | |
--green-900: hsl(143.8deg 61.2% 20.2%); | |
--green-950: hsl(145deg 80% 10%); | |
/* Emerald */ | |
--emerdald-50: hsl(151.8deg 81% 95.9%); | |
--emerdald-100: hsl(149.3deg 80.4% 90%); | |
--emerdald-200: hsl(152.4deg 76% 80.4%); | |
--emerdald-300: hsl(156.2deg 71.6% 66.9%); | |
--emerdald-400: hsl(158.1deg 64.4% 51.6%); | |
--emerdald-500: hsl(160.1deg 84.1% 39.4%); | |
--emerdald-600: hsl(161.4deg 93.5% 30.4%); | |
--emerdald-700: hsl(162.9deg 93.5% 24.3%); | |
--emerdald-800: hsl(163.1deg 88.1% 19.8%); | |
--emerdald-900: hsl(164.2deg 85.7% 16.5%); | |
--emerdald-950: hsl(166deg 91% 9%); | |
/* Teal */ | |
--teal-50: hsl(166.2deg 76.5% 96.7%); | |
--teal-100: hsl(167.2deg 85.5% 89.2%); | |
--teal-200: hsl(168.4deg 83.8% 78.2%); | |
--teal-300: hsl(170.6deg 76.9% 64.3%); | |
--teal-400: hsl(172.5deg 66% 50.4%); | |
--teal-500: hsl(173.4deg 80.4% 40%); | |
--teal-600: hsl(174.7deg 83.9% 31.6%); | |
--teal-700: hsl(175.3deg 77.4% 26.1%); | |
--teal-800: hsl(176.1deg 69.4% 21.8%); | |
--teal-900: hsl(175.9deg 60.8% 19%); | |
--teal-950: hsl(179deg 84% 10%); | |
/* Cyan */ | |
--cyan-50: hsl(183.2deg 100% 96.3%); | |
--cyan-100: hsl(185.1deg 95.9% 90.4%); | |
--cyan-200: hsl(186.2deg 93.5% 81.8%); | |
--cyan-300: hsl(187deg 92.4% 69%); | |
--cyan-400: hsl(187.9deg 85.7% 53.3%); | |
--cyan-500: hsl(188.7deg 94.5% 42.7%); | |
--cyan-600: hsl(191.6deg 91.4% 36.5%); | |
--cyan-700: hsl(192.9deg 82.3% 31%); | |
--cyan-800: hsl(194.4deg 69.6% 27.1%); | |
--cyan-900: hsl(196.4deg 63.6% 23.7%); | |
--cyan-950: hsl(197deg 79% 15%); | |
/* Sky */ | |
--sky-50: hsl(204deg 100% 97.1%); | |
--sky-100: hsl(204deg 93.8% 93.7%); | |
--sky-200: hsl(200.6deg 94.4% 86.1%); | |
--sky-300: hsl(199.4deg 95.5% 73.9%); | |
--sky-400: hsl(198.4deg 93.2% 59.6%); | |
--sky-500: hsl(198.6deg 88.7% 48.4%); | |
--sky-600: hsl(200.4deg 98% 39.4%); | |
--sky-700: hsl(201.3deg 96.3% 32.2%); | |
--sky-800: hsl(201deg 90% 27.5%); | |
--sky-900: hsl(202deg 80.3% 23.9%); | |
--sky-950: hsl(204deg 80% 16%); | |
/* Blue */ | |
--blue-50: hsl(213.8deg 100% 96.9%); | |
--blue-100: hsl(214.3deg 94.6% 92.7%); | |
--blue-200: hsl(213.3deg 96.9% 87.3%); | |
--blue-300: hsl(211.7deg 96.4% 78.4%); | |
--blue-400: hsl(213.1deg 93.9% 67.8%); | |
--blue-500: hsl(217.2deg 91.2% 59.8%); | |
--blue-600: hsl(221.2deg 83.2% 53.3%); | |
--blue-700: hsl(224.3deg 76.3% 48%); | |
--blue-800: hsl(225.9deg 70.7% 40.2%); | |
--blue-900: hsl(224.4deg 64.3% 32.9%); | |
--blue-950: hsl(226deg 57% 21%); | |
/* Indigo */ | |
--indigo-50: hsl(225.9deg 100% 96.7%); | |
--indigo-100: hsl(226.5deg 100% 93.9%); | |
--indigo-200: hsl(228deg 96.5% 88.8%); | |
--indigo-300: hsl(229.7deg 93.5% 81.8%); | |
--indigo-400: hsl(234.5deg 89.5% 73.9%); | |
--indigo-500: hsl(238.7deg 83.5% 66.7%); | |
--indigo-600: hsl(243.4deg 75.4% 58.6%); | |
--indigo-700: hsl(244.5deg 57.9% 50.6%); | |
--indigo-800: hsl(243.7deg 54.5% 41.4%); | |
--indigo-900: hsl(242.2deg 47.4% 34.3%); | |
--indigo-950: hsl(244deg 47% 20%); | |
/* Violet */ | |
--violet-50: hsl(250deg 100% 97.6%); | |
--violet-100: hsl(251.4deg 91.3% 95.5%); | |
--violet-200: hsl(250.5deg 95.2% 91.8%); | |
--violet-300: hsl(252.5deg 94.7% 85.1%); | |
--violet-400: hsl(255.1deg 91.7% 76.3%); | |
--violet-500: hsl(258.3deg 89.5% 66.3%); | |
--violet-600: hsl(262.1deg 83.3% 57.8%); | |
--violet-700: hsl(263.4deg 70 50.4%); | |
--violet-800: hsl(263.4deg 69.3% 42.2%); | |
--violet-900: hsl(263.5deg 67.4% 34.9%); | |
--violet-950: hsl(261deg 73% 23%); | |
/* Purple */ | |
--purple-50: hsl(270deg 100% 98%); | |
--purple-100: hsl(268.7deg 100% 95.5%); | |
--purple-200: hsl(268.6deg 100% 91.8%); | |
--purple-300: hsl(269.2deg 97.4% 85.1%); | |
--purple-400: hsl(270deg 95.2% 75.3%); | |
--purple-500: hsl(270.7deg 91% 65.1%); | |
--purple-600: hsl(271.5deg 81.3% 55.9%); | |
--purple-700: hsl(272.1deg 71.7% 47.1%); | |
--purple-800: hsl(272.9deg 67.2% 39.4%); | |
--purple-900: hsl(273.6deg 65.6% 32%); | |
--purple-950: hsl(274deg 87% 21%); | |
/* Fuchsia */ | |
--fuchsia-50: hsl(289.1deg 100% 97.8%); | |
--fuchsia-100: hsl(2872deg 100% 95.5%); | |
--fuchsia-200: hsl(288.3deg 95.8% 90.6%); | |
--fuchsia-300: hsl(291.1deg 93.1% 82.9%); | |
--fuchsia-400: hsl(292deg 91.4% 72.5%); | |
--fuchsia-500: hsl(292.2deg 84.1% 60.6%); | |
--fuchsia-600: hsl(293.4deg 69.5% 48.8%); | |
--fuchsia-700: hsl(294.7deg 72.4% 39.8%); | |
--fuchsia-800: hsl(295.4deg 70.2% 32.9%); | |
--fuchsia-900: hsl(296.7deg 63.6% 28%); | |
--fuchsia-950: hsl(297deg 90% 16%); | |
/* Pink */ | |
--pink-50: hsl(327.3deg 73.3% 97.1%); | |
--pink-100: hsl(325.7deg 77.8% 94.7%); | |
--pink-200: hsl(325.9deg 84.6% 89.8%); | |
--pink-300: hsl(327.4deg 87.1% 81.8%); | |
--pink-400: hsl(328.6deg 85.5% 70.2%); | |
--pink-500: hsl(330.4deg 81.2% 60.4%); | |
--pink-600: hsl(333.3deg 71.4% 50.6%); | |
--pink-700: hsl(335.1deg 77.6% 42%); | |
--pink-800: hsl(335.8deg 74.4% 35.3%); | |
--pink-900: hsl(335.9deg 69% 30.4%); | |
--pink-950: hsl(336deg 84% 17%); | |
/* Rose */ | |
--rose-50: hsl(355.7deg 100% 97.3%); | |
--rose-100: hsl(355.6deg 100% 94.7%); | |
--rose-200: hsl(352.7deg 96.1% 90%); | |
--rose-300: hsl(352.6deg 95.7% 81.8%); | |
--rose-400: hsl(351.3deg 94.5% 71.4%); | |
--rose-500: hsl(349.7deg 89.2% 60.2%); | |
--rose-600: hsl(346.8deg 77.2% 49.8%); | |
--rose-700: hsl(345.3deg 82.7% 40.8%); | |
--rose-800: hsl(343.4deg 79.7% 34.7%); | |
--rose-900: hsl(341.5deg 75.5% 30.4%); | |
--rose-950: hsl(343deg 88% 16%); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment