Crafting Tailwind custom colors
08 Aug 2021
Table of Contents
TO DO: WRITE EXCERPT
Generating colors
A common question we get is “how do I generate the 50–900 shades of my own custom colors?“.
Bad news, color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating these sorts of color palettes. We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.
But Adam, I need my corporate logo to be part of a color scheme, thank you.
What did the team do?
Although Adam & Steve, in Refactoring UI, said that picking color runs from 50-900 was about more than playing w/ luminance, I strongly suspect that getting a chance to look at luminance helps.
Especially after noticing some patterns in the end of the book’s “color palettes” section, which shows examples in HSL, as opposed to Customizing Colors in the Tailwind docs, which shows things in HEX codes.
I went to Customizing Colors in the Tailwind docs, inspected the DOM of the color chart at the end, copied from “edit HTML” against the appropriate DIV
, and pasted it into c:\example\tailwindcolors.html
on my hard drive.
<div class="grid grid-cols-1 gap-8"><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Blue Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->blueGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f8fafc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F8FAFC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f1f5f9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F1F5F9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e2e8f0"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E2E8F0</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#cbd5e1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#CBD5E1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#94a3b8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#94A3B8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#64748b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#64748B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#475569"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#475569</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#334155"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#334155</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e293b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1E293B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0f172a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#0F172A</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Cool Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->coolGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f9fafb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F9FAFB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f3f4f6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F3F4F6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e5e7eb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E5E7EB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d1d5db"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D1D5DB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9ca3af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#9CA3AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6b7280"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#6B7280</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4b5563"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#4B5563</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#374151"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#374151</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1f2937"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1F2937</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#111827"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#111827</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->gray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fafafa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAFAFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f4f4f5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F4F4F5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e4e4e7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E4E4E7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d4d4d8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D4D4D8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a1a1aa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A1A1AA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#71717a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#71717A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#52525b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#52525B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3f3f46"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#3F3F46</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#27272a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#27272A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#18181b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#18181B</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">True Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->trueGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fafafa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAFAFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f5f5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F5F5F5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e5e5e5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E5E5E5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d4d4d4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D4D4D4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a3a3a3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A3A3A3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#737373"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#737373</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#525252"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#525252</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#404040"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#404040</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#262626"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#262626</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#171717"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#171717</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Warm Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->warmGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fafaf9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAFAF9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f5f4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F5F5F4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e7e5e4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E7E5E4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d6d3d1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D6D3D1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a8a29e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A8A29E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#78716c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#78716C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#57534e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#57534E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#44403c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#44403C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#292524"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#292524</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1c1917"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#1C1917</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Red</div><div><code class="text-xs text-gray-500">colors.<!-- -->red</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef2f2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FEF2F2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fee2e2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEE2E2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fecaca"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FECACA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fca5a5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FCA5A5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f87171"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#F87171</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ef4444"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EF4444</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dc2626"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#DC2626</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b91c1c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#B91C1C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#991b1b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#991B1B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7f1d1d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#7F1D1D</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Orange</div><div><code class="text-xs text-gray-500">colors.<!-- -->orange</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fff7ed"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FFF7ED</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ffedd5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FFEDD5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fed7aa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FED7AA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdba74"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FDBA74</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fb923c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FB923C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f97316"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#F97316</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ea580c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#EA580C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c2410c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#C2410C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9a3412"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#9A3412</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7c2d12"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#7C2D12</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Amber</div><div><code class="text-xs text-gray-500">colors.<!-- -->amber</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fffbeb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FFFBEB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef3c7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEF3C7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fde68a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FDE68A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fcd34d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FCD34D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbbf24"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FBBF24</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f59e0b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#F59E0B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d97706"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#D97706</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b45309"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#B45309</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#92400e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#92400E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#78350f"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#78350F</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Yellow</div><div><code class="text-xs text-gray-500">colors.<!-- -->yellow</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fefce8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FEFCE8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef9c3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEF9C3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef08a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FEF08A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fde047"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FDE047</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#facc15"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FACC15</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eab308"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EAB308</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ca8a04"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#CA8A04</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a16207"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#A16207</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#854d0e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#854D0E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#713f12"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#713F12</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Lime</div><div><code class="text-xs text-gray-500">colors.<!-- -->lime</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f7fee7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F7FEE7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfccb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#ECFCCB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d9f99d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#D9F99D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bef264"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#BEF264</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a3e635"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A3E635</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#84cc16"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#84CC16</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#65a30d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#65A30D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4d7c0f"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#4D7C0F</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3f6212"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#3F6212</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#365314"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#365314</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Green</div><div><code class="text-xs text-gray-500">colors.<!-- -->green</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0fdf4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F0FDF4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dcfce7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#DCFCE7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bbf7d0"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#BBF7D0</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#86efac"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#86EFAC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4ade80"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#4ADE80</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#22c55e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#22C55E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#16a34a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#16A34A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#15803d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#15803D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#166534"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#166534</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#14532d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#14532D</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Emerald</div><div><code class="text-xs text-gray-500">colors.<!-- -->emerald</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfdf5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#ECFDF5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d1fae5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#D1FAE5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a7f3d0"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#A7F3D0</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6ee7b7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#6EE7B7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#34d399"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#34D399</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#10b981"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#10B981</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#059669"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#059669</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#047857"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#047857</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#065f46"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#065F46</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#064e3b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#064E3B</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Teal</div><div><code class="text-xs text-gray-500">colors.<!-- -->teal</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0fdfa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F0FDFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ccfbf1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#CCFBF1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#99f6e4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#99F6E4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#5eead4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#5EEAD4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#2dd4bf"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#2DD4BF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#14b8a6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#14B8A6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0d9488"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#0D9488</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0f766e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#0F766E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#115e59"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#115E59</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#134e4a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#134E4A</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Cyan</div><div><code class="text-xs text-gray-500">colors.<!-- -->cyan</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfeff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#ECFEFF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#cffafe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#CFFAFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a5f3fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#A5F3FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#67e8f9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#67E8F9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#22d3ee"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#22D3EE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#06b6d4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#06B6D4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0891b2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#0891B2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0e7490"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#0E7490</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#155e75"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#155E75</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#164e63"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#164E63</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Sky</div><div><code class="text-xs text-gray-500">colors.<!-- -->sky</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0f9ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F0F9FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e0f2fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#E0F2FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bae6fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#BAE6FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7dd3fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#7DD3FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#38bdf8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#38BDF8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0ea5e9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#0EA5E9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0284c7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#0284C7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0369a1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#0369A1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#075985"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#075985</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0c4a6e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#0C4A6E</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Blue</div><div><code class="text-xs text-gray-500">colors.<!-- -->blue</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eff6ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#EFF6FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dbeafe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#DBEAFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bfdbfe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#BFDBFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#93c5fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#93C5FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#60a5fa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#60A5FA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3b82f6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#3B82F6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#2563eb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#2563EB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1d4ed8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#1D4ED8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e40af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1E40AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e3a8a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#1E3A8A</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Indigo</div><div><code class="text-xs text-gray-500">colors.<!-- -->indigo</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eef2ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#EEF2FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e0e7ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#E0E7FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c7d2fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#C7D2FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a5b4fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#A5B4FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#818cf8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#818CF8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6366f1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#6366F1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4f46e5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#4F46E5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4338ca"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#4338CA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3730a3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#3730A3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#312e81"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#312E81</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Violet</div><div><code class="text-xs text-gray-500">colors.<!-- -->violet</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f3ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F5F3FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ede9fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#EDE9FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ddd6fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#DDD6FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c4b5fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#C4B5FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a78bfa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A78BFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#8b5cf6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#8B5CF6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7c3aed"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#7C3AED</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6d28d9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#6D28D9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#5b21b6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#5B21B6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4c1d95"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#4C1D95</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Purple</div><div><code class="text-xs text-gray-500">colors.<!-- -->purple</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#faf5ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAF5FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f3e8ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F3E8FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e9d5ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E9D5FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d8b4fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D8B4FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c084fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#C084FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a855f7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#A855F7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9333ea"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#9333EA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7e22ce"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#7E22CE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6b21a8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#6B21A8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#581c87"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#581C87</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Fuchsia</div><div><code class="text-xs text-gray-500">colors.<!-- -->fuchsia</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdf4ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FDF4FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fae8ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FAE8FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5d0fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#F5D0FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0abfc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#F0ABFC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e879f9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#E879F9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d946ef"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#D946EF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c026d3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#C026D3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a21caf"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#A21CAF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#86198f"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#86198F</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#701a75"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#701A75</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Pink</div><div><code class="text-xs text-gray-500">colors.<!-- -->pink</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdf2f8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FDF2F8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fce7f3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FCE7F3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbcfe8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FBCFE8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f9a8d4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#F9A8D4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f472b6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#F472B6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ec4899"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EC4899</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#db2777"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#DB2777</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#be185d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#BE185D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9d174d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#9D174D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#831843"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#831843</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Rose</div><div><code class="text-xs text-gray-500">colors.<!-- -->rose</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fff1f2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FFF1F2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ffe4e6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FFE4E6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fecdd3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FECDD3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fda4af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FDA4AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fb7185"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FB7185</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f43f5e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#F43F5E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e11d48"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#E11D48</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#be123c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#BE123C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9f1239"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#9F1239</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#881337"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#881337</div></div></div></div></div></div></div>
Then I ran the following Python code:
from bs4 import BeautifulSoup
from colour import Color
import pandas
with open('c:\\example\\tailwindcolors.html') as fp:
soup = BeautifulSoup(fp, 'html.parser')
all_twentytwo_tones = soup.find_all('div', {'class': 'space-y-3'})
all_colors_list = []
for tone_div in all_twentytwo_tones:
tone = tone_div.find('div', {'class': 'w-32'}).find('code',
{'class': 'text-gray-500'}).text.split('colors.')[-1]
ten_shades = [x.find('div', {'class': 'px-0.5'}) for x in tone_div.find(
'div', {'class': 'grid-cols-5'}).find_all('div', {'class': 'space-y-1.5'})]
for shade_div in ten_shades:
children = shade_div.findChildren()
number = children[0].text
hex = children[1].text.split('#')[-1].lower()
hsl_raw = Color(children[1].text).hsl
hue = round(hsl_raw[0]*360)
saturation = round(hsl_raw[1]*100)
luminance = round(hsl_raw[2]*100)
hsl = (hue, saturation, luminance)
#print(tone, number, hsl)
color_obj = {'tone': tone, 'number': number, 'hue': hue,
'saturation': saturation, 'luminance': luminance, 'hsl': hsl, 'hex': hex}
all_colors_list.append(color_obj)
df = pandas.DataFrame(all_colors_list)
df['number'] = pandas.to_numeric(df['number'])
# def row_style(row):
# return pandas.Series('background-color: #{}'.format(row['hex']), row.index)
#df = df.style.apply(row_style, axis=1)
basicdf = df.copy()
huefieldsdf = df[['tone', 'number', 'hue']]
huepivotdf = pandas.pivot_table(
huefieldsdf, index=['tone'], columns=['number'])
huepivotdf = huepivotdf.reindex(df['tone']).drop_duplicates()
saturationfieldsdf = df[['tone', 'number', 'saturation']]
saturationpivotdf = pandas.pivot_table(
saturationfieldsdf, index=['tone'], columns=['number'])
saturationpivotdf = saturationpivotdf.reindex(df['tone']).drop_duplicates()
luminancefieldsdf = df[['tone', 'number', 'luminance']]
luminancepivotdf = pandas.pivot_table(
luminancefieldsdf, index=['tone'], columns=['number'])
luminancepivotdf = luminancepivotdf.reindex(df['tone']).drop_duplicates()
writer = pandas.ExcelWriter(
'c:\\example\\trycolorsoutput.xlsx', engine='xlsxwriter')
basicdf.to_excel(writer, sheet_name='Basics')
huepivotdf.to_excel(writer, sheet_name='Hue')
saturationpivotdf.to_excel(writer, sheet_name='Saturation')
luminancepivotdf.to_excel(writer, sheet_name='Luminance')
writer.save()
Hue
Now that I had an Excel spreadsheet to play with, I looked for patterns. Here’s what I’ve found:
Color | Min Hue | Max Hue | Shape | Illustration |
---|---|---|---|---|
blueGray | 210° | 222° | wavy rising | |
coolGray | 210° | 221° | wavy | |
gray | 0° | 240° | flat jump | _-- |
trueGray | 0° | 0° | flat | - |
warmGray | 12° | 60° | wavy falling | |
red | 0° | 0° | flat | - |
orange | 15° | 34° | falling | ´\ |
amber | 22° | 48° | falling | -\ |
yellow | 28° | 55° | falling | \ |
lime | 78° | 88° | rising | / |
green | 138° | 144° | rising | / |
emerald | 149° | 164° | rising | `/ |
teal | 166° | 176° | rising | / |
cyan | 183° | 196° | rising | / |
sky | 198° | 204° | u-falling | `\/ |
blue | 212° | 226° | rising | ``/ |
indigo | 226° | 245° | rising | /` |
violet | 250° | 264° | rising | / |
purple | 269° | 274° | rising | `/ |
fuchsia | 287° | 297° | rising | `/ |
pink | 326° | 336° | rising | / |
rose | 342° | 356° | falling | \ |
Saturation
Color | Min Sat | Max Sat | Shape | Illustration |
---|---|---|---|---|
red | 63% | 96% | bump-falling | |
orange | 75% | 100% | falling | |
amber | 78% | 100% | falling | |
yellow | 73% | 98% | bump-falling | |
lime | 61% | 92% | wave-falling | |
green | 61% | 84% | wave-falling | |
emerald | 64% | 94% | wave-rising | |
teal | 61% | 85% | wave-falling | |
cyan | 64% | 100% | wave-falling |