Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Crafting Tailwind custom colors

08 Aug 2021 🔖 web development jamstack
💬 EN

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 240° flat jump _--
trueGray flat -
warmGray 12° 60° wavy falling  
red 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  
--- ---