<div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-8 sm:grid-cols-1 p-4">
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">brand</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f7f6ef"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f7f6ef</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ece8d5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ece8d5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dbd2ad"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dbd2ad</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c7b57d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c7b57d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#b9a061"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#b9a061</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a7884b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a7884b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#8f6e3f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#8f6e3f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#735535"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#735535</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#614732"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#614732</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#553d2e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#553d2e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#302018"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#302018</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">primary</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ece8d5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">lighter</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ece8d5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#b9a061"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">DEFAULT</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#b9a061</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#553d2e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">darker</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#553d2e</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">audio</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fff1f1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fff1f1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffdfe0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffdfe0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffc5c6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffc5c6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ff9c9e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ff9c9e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ff6366"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ff6366</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ff3336"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ff3336</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ee1417"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ee1417</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c70c0f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c70c0f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a60e10"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a60e10</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#891315"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#891315</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4b0405"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4b0405</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">primaryAudio</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffdfe0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">lighter</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffdfe0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c70c0f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">DEFAULT</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c70c0f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#891315"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">darker</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#891315</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">neutral</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FAFAFA"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FAFAFA</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F5F5F5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F5F5F5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#F0F0F0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">150</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#F0F0F0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#E5E5E5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#E5E5E5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#D4D4D4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#D4D4D4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#A3A3A3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#A3A3A3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#737373"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#737373</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#525252"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#525252</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#404040"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#404040</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#262626"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#262626</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#171717"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#171717</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">dark</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0000000D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">5</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0000000D</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0000001A"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">10</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0000001A</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#00000033"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">20</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#00000033</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0000004D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">30</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0000004D</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#00000066"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">40</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#00000066</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#00000080"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#00000080</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#00000099"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">60</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#00000099</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#000000B3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">70</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#000000B3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#000000CC"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">80</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#000000CC</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#000000E6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">90</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#000000E6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#000000"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">black</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#000000</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">light</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF0D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">5</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF0D</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF1A"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">10</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF1A</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF33"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">20</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF33</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF4D"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">30</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF4D</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF66"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">40</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF66</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF80"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF80</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF99"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">60</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF99</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFFB3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">70</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFFB3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFFCC"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">80</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFFCC</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFFE6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">90</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFFE6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FFFFFF"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">white</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FFFFFF</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">slate</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f8fafc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f8fafc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f1f5f9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f1f5f9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e2e8f0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e2e8f0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#cbd5e1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#cbd5e1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#94a3b8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#94a3b8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#64748b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#64748b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#475569"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#475569</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#334155"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#334155</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e293b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e293b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0f172a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0f172a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#020617"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#020617</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">gray</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f9fafb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f9fafb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f3f4f6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f3f4f6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e5e7eb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e5e7eb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d1d5db"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d1d5db</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9ca3af"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9ca3af</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6b7280"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6b7280</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4b5563"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4b5563</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#374151"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#374151</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1f2937"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1f2937</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#111827"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#111827</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#030712"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#030712</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">zinc</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fafafa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fafafa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f4f4f5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f4f4f5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e4e4e7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e4e4e7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d4d4d8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d4d4d8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a1a1aa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a1a1aa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#71717a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#71717a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#52525b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#52525b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3f3f46"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3f3f46</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#27272a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#27272a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#18181b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#18181b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#09090b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#09090b</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">stone</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fafaf9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fafaf9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f5f5f4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f5f5f4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e7e5e4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e7e5e4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d6d3d1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d6d3d1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a8a29e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a8a29e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#78716c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#78716c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#57534e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#57534e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#44403c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#44403c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#292524"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#292524</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1c1917"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1c1917</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0c0a09"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0c0a09</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">red</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef2f2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef2f2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fee2e2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fee2e2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fecaca"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fecaca</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fca5a5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fca5a5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f87171"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f87171</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ef4444"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ef4444</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dc2626"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dc2626</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#b91c1c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#b91c1c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#991b1b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#991b1b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7f1d1d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7f1d1d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#450a0a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#450a0a</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">orange</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fff7ed"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fff7ed</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffedd5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffedd5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fed7aa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fed7aa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fdba74"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fdba74</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fb923c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fb923c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f97316"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f97316</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ea580c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ea580c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c2410c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c2410c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9a3412"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9a3412</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7c2d12"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7c2d12</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#431407"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#431407</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">amber</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fffbeb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fffbeb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef3c7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef3c7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fde68a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fde68a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fcd34d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fcd34d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fbbf24"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fbbf24</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f59e0b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f59e0b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d97706"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d97706</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#b45309"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#b45309</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#92400e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#92400e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#78350f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#78350f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#451a03"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#451a03</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">yellow</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fefce8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fefce8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef9c3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef9c3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fef08a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fef08a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fde047"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fde047</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#facc15"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#facc15</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#eab308"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#eab308</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ca8a04"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ca8a04</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a16207"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a16207</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#854d0e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#854d0e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#713f12"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#713f12</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#422006"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#422006</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">lime</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f7fee7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f7fee7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ecfccb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ecfccb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d9f99d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d9f99d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bef264"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bef264</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a3e635"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a3e635</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#84cc16"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#84cc16</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#65a30d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#65a30d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4d7c0f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4d7c0f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3f6212"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3f6212</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#365314"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#365314</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1a2e05"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1a2e05</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">green</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0fdf4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0fdf4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dcfce7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dcfce7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bbf7d0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bbf7d0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#86efac"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#86efac</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4ade80"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4ade80</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#22c55e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#22c55e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#16a34a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#16a34a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#15803d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#15803d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#166534"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#166534</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#14532d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#14532d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#052e16"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#052e16</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">emerald</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ecfdf5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ecfdf5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d1fae5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d1fae5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a7f3d0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a7f3d0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6ee7b7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6ee7b7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#34d399"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#34d399</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#10b981"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#10b981</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#059669"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#059669</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#047857"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#047857</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#065f46"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#065f46</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#064e3b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#064e3b</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#022c22"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#022c22</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">teal</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0fdfa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0fdfa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ccfbf1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ccfbf1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#99f6e4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#99f6e4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#5eead4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#5eead4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2dd4bf"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2dd4bf</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#14b8a6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#14b8a6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0d9488"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0d9488</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0f766e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0f766e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#115e59"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#115e59</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#134e4a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#134e4a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#042f2e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#042f2e</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">cyan</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ecfeff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ecfeff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#cffafe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#cffafe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a5f3fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a5f3fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#67e8f9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#67e8f9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#22d3ee"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#22d3ee</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#06b6d4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#06b6d4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0891b2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0891b2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0e7490"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0e7490</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#155e75"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#155e75</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#164e63"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#164e63</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#083344"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#083344</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">sky</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0f9ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0f9ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e0f2fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e0f2fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bae6fd"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bae6fd</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7dd3fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7dd3fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#38bdf8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#38bdf8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0ea5e9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0ea5e9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0284c7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0284c7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0369a1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0369a1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#075985"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#075985</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#0c4a6e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#0c4a6e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#082f49"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#082f49</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">blue</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#eff6ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#eff6ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#dbeafe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#dbeafe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#bfdbfe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#bfdbfe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#93c5fd"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#93c5fd</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#60a5fa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#60a5fa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3b82f6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3b82f6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2563eb"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2563eb</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1d4ed8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1d4ed8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e40af"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e40af</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e3a8a"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e3a8a</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#172554"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#172554</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">indigo</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#eef2ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#eef2ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e0e7ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e0e7ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c7d2fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c7d2fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a5b4fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a5b4fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#818cf8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#818cf8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6366f1"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6366f1</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4f46e5"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4f46e5</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4338ca"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4338ca</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3730a3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3730a3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#312e81"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#312e81</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#1e1b4b"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#1e1b4b</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">violet</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f5f3ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f5f3ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ede9fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ede9fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ddd6fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ddd6fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c4b5fd"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c4b5fd</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a78bfa"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a78bfa</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#8b5cf6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#8b5cf6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7c3aed"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7c3aed</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6d28d9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6d28d9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#5b21b6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#5b21b6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4c1d95"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4c1d95</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#2e1065"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#2e1065</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">purple</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#faf5ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#faf5ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f3e8ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f3e8ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e9d5ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e9d5ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d8b4fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d8b4fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c084fc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c084fc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a855f7"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a855f7</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9333ea"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9333ea</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#7e22ce"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#7e22ce</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#6b21a8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#6b21a8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#581c87"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#581c87</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#3b0764"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#3b0764</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">fuchsia</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fdf4ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fdf4ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fae8ff"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fae8ff</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f5d0fe"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f5d0fe</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f0abfc"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f0abfc</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e879f9"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e879f9</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#d946ef"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#d946ef</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#c026d3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#c026d3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#a21caf"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#a21caf</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#86198f"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#86198f</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#701a75"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#701a75</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4a044e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4a044e</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">pink</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fdf2f8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fdf2f8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fce7f3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fce7f3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fbcfe8"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fbcfe8</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f9a8d4"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f9a8d4</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f472b6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f472b6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ec4899"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ec4899</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#db2777"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#db2777</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#be185d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#be185d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9d174d"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9d174d</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#831843"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#831843</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#500724"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#500724</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">rose</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fff1f2"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">50</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fff1f2</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#ffe4e6"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">100</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#ffe4e6</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fecdd3"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">200</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fecdd3</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fda4af"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">300</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fda4af</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#fb7185"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">400</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#fb7185</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#f43f5e"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">500</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#f43f5e</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#e11d48"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">600</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#e11d48</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#be123c"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">700</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#be123c</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#9f1239"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">800</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#9f1239</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#881337"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">900</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#881337</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#4c0519"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">950</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#4c0519</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">status</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#BFDBFE"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">focus</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#BFDBFE</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#A7F3D0"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">success</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#A7F3D0</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FDE68A"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">warning</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FDE68A</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:#FECACA"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">error</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">#FECACA</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-8 sm:grid-cols-1 p-4">
{% for colorName, color in colors %}
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 2xl:col-end-1 2xl:pt-2.5">{{ colorName }}</div>
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
{% for variant, hex in color %}
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded sm:w-full" style="background-color:{{ hex }}"></div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full">{{ variant }}</div>
<div class="text-slate-500 text-xs font-mono lowercase sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">{{ hex }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{
"colors": {
"brand": {
"50": "#f7f6ef",
"100": "#ece8d5",
"200": "#dbd2ad",
"300": "#c7b57d",
"400": "#b9a061",
"500": "#a7884b",
"600": "#8f6e3f",
"700": "#735535",
"800": "#614732",
"900": "#553d2e",
"950": "#302018"
},
"primary": {
"lighter": "#ece8d5",
"DEFAULT": "#b9a061",
"darker": "#553d2e"
},
"audio": {
"50": "#fff1f1",
"100": "#ffdfe0",
"200": "#ffc5c6",
"300": "#ff9c9e",
"400": "#ff6366",
"500": "#ff3336",
"600": "#ee1417",
"700": "#c70c0f",
"800": "#a60e10",
"900": "#891315",
"950": "#4b0405"
},
"primaryAudio": {
"lighter": "#ffdfe0",
"DEFAULT": "#c70c0f",
"darker": "#891315"
},
"neutral": {
"50": "#FAFAFA",
"100": "#F5F5F5",
"150": "#F0F0F0",
"200": "#E5E5E5",
"300": "#D4D4D4",
"400": "#A3A3A3",
"500": "#737373",
"600": "#525252",
"700": "#404040",
"800": "#262626",
"900": "#171717"
},
"dark": {
"5": "#0000000D",
"10": "#0000001A",
"20": "#00000033",
"30": "#0000004D",
"40": "#00000066",
"50": "#00000080",
"60": "#00000099",
"70": "#000000B3",
"80": "#000000CC",
"90": "#000000E6",
"black": "#000000"
},
"light": {
"5": "#FFFFFF0D",
"10": "#FFFFFF1A",
"20": "#FFFFFF33",
"30": "#FFFFFF4D",
"40": "#FFFFFF66",
"50": "#FFFFFF80",
"60": "#FFFFFF99",
"70": "#FFFFFFB3",
"80": "#FFFFFFCC",
"90": "#FFFFFFE6",
"white": "#FFFFFF"
},
"slate": {
"50": "#f8fafc",
"100": "#f1f5f9",
"200": "#e2e8f0",
"300": "#cbd5e1",
"400": "#94a3b8",
"500": "#64748b",
"600": "#475569",
"700": "#334155",
"800": "#1e293b",
"900": "#0f172a",
"950": "#020617"
},
"gray": {
"50": "#f9fafb",
"100": "#f3f4f6",
"200": "#e5e7eb",
"300": "#d1d5db",
"400": "#9ca3af",
"500": "#6b7280",
"600": "#4b5563",
"700": "#374151",
"800": "#1f2937",
"900": "#111827",
"950": "#030712"
},
"zinc": {
"50": "#fafafa",
"100": "#f4f4f5",
"200": "#e4e4e7",
"300": "#d4d4d8",
"400": "#a1a1aa",
"500": "#71717a",
"600": "#52525b",
"700": "#3f3f46",
"800": "#27272a",
"900": "#18181b",
"950": "#09090b"
},
"stone": {
"50": "#fafaf9",
"100": "#f5f5f4",
"200": "#e7e5e4",
"300": "#d6d3d1",
"400": "#a8a29e",
"500": "#78716c",
"600": "#57534e",
"700": "#44403c",
"800": "#292524",
"900": "#1c1917",
"950": "#0c0a09"
},
"red": {
"50": "#fef2f2",
"100": "#fee2e2",
"200": "#fecaca",
"300": "#fca5a5",
"400": "#f87171",
"500": "#ef4444",
"600": "#dc2626",
"700": "#b91c1c",
"800": "#991b1b",
"900": "#7f1d1d",
"950": "#450a0a"
},
"orange": {
"50": "#fff7ed",
"100": "#ffedd5",
"200": "#fed7aa",
"300": "#fdba74",
"400": "#fb923c",
"500": "#f97316",
"600": "#ea580c",
"700": "#c2410c",
"800": "#9a3412",
"900": "#7c2d12",
"950": "#431407"
},
"amber": {
"50": "#fffbeb",
"100": "#fef3c7",
"200": "#fde68a",
"300": "#fcd34d",
"400": "#fbbf24",
"500": "#f59e0b",
"600": "#d97706",
"700": "#b45309",
"800": "#92400e",
"900": "#78350f",
"950": "#451a03"
},
"yellow": {
"50": "#fefce8",
"100": "#fef9c3",
"200": "#fef08a",
"300": "#fde047",
"400": "#facc15",
"500": "#eab308",
"600": "#ca8a04",
"700": "#a16207",
"800": "#854d0e",
"900": "#713f12",
"950": "#422006"
},
"lime": {
"50": "#f7fee7",
"100": "#ecfccb",
"200": "#d9f99d",
"300": "#bef264",
"400": "#a3e635",
"500": "#84cc16",
"600": "#65a30d",
"700": "#4d7c0f",
"800": "#3f6212",
"900": "#365314",
"950": "#1a2e05"
},
"green": {
"50": "#f0fdf4",
"100": "#dcfce7",
"200": "#bbf7d0",
"300": "#86efac",
"400": "#4ade80",
"500": "#22c55e",
"600": "#16a34a",
"700": "#15803d",
"800": "#166534",
"900": "#14532d",
"950": "#052e16"
},
"emerald": {
"50": "#ecfdf5",
"100": "#d1fae5",
"200": "#a7f3d0",
"300": "#6ee7b7",
"400": "#34d399",
"500": "#10b981",
"600": "#059669",
"700": "#047857",
"800": "#065f46",
"900": "#064e3b",
"950": "#022c22"
},
"teal": {
"50": "#f0fdfa",
"100": "#ccfbf1",
"200": "#99f6e4",
"300": "#5eead4",
"400": "#2dd4bf",
"500": "#14b8a6",
"600": "#0d9488",
"700": "#0f766e",
"800": "#115e59",
"900": "#134e4a",
"950": "#042f2e"
},
"cyan": {
"50": "#ecfeff",
"100": "#cffafe",
"200": "#a5f3fc",
"300": "#67e8f9",
"400": "#22d3ee",
"500": "#06b6d4",
"600": "#0891b2",
"700": "#0e7490",
"800": "#155e75",
"900": "#164e63",
"950": "#083344"
},
"sky": {
"50": "#f0f9ff",
"100": "#e0f2fe",
"200": "#bae6fd",
"300": "#7dd3fc",
"400": "#38bdf8",
"500": "#0ea5e9",
"600": "#0284c7",
"700": "#0369a1",
"800": "#075985",
"900": "#0c4a6e",
"950": "#082f49"
},
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bfdbfe",
"300": "#93c5fd",
"400": "#60a5fa",
"500": "#3b82f6",
"600": "#2563eb",
"700": "#1d4ed8",
"800": "#1e40af",
"900": "#1e3a8a",
"950": "#172554"
},
"indigo": {
"50": "#eef2ff",
"100": "#e0e7ff",
"200": "#c7d2fe",
"300": "#a5b4fc",
"400": "#818cf8",
"500": "#6366f1",
"600": "#4f46e5",
"700": "#4338ca",
"800": "#3730a3",
"900": "#312e81",
"950": "#1e1b4b"
},
"violet": {
"50": "#f5f3ff",
"100": "#ede9fe",
"200": "#ddd6fe",
"300": "#c4b5fd",
"400": "#a78bfa",
"500": "#8b5cf6",
"600": "#7c3aed",
"700": "#6d28d9",
"800": "#5b21b6",
"900": "#4c1d95",
"950": "#2e1065"
},
"purple": {
"50": "#faf5ff",
"100": "#f3e8ff",
"200": "#e9d5ff",
"300": "#d8b4fe",
"400": "#c084fc",
"500": "#a855f7",
"600": "#9333ea",
"700": "#7e22ce",
"800": "#6b21a8",
"900": "#581c87",
"950": "#3b0764"
},
"fuchsia": {
"50": "#fdf4ff",
"100": "#fae8ff",
"200": "#f5d0fe",
"300": "#f0abfc",
"400": "#e879f9",
"500": "#d946ef",
"600": "#c026d3",
"700": "#a21caf",
"800": "#86198f",
"900": "#701a75",
"950": "#4a044e"
},
"pink": {
"50": "#fdf2f8",
"100": "#fce7f3",
"200": "#fbcfe8",
"300": "#f9a8d4",
"400": "#f472b6",
"500": "#ec4899",
"600": "#db2777",
"700": "#be185d",
"800": "#9d174d",
"900": "#831843",
"950": "#500724"
},
"rose": {
"50": "#fff1f2",
"100": "#ffe4e6",
"200": "#fecdd3",
"300": "#fda4af",
"400": "#fb7185",
"500": "#f43f5e",
"600": "#e11d48",
"700": "#be123c",
"800": "#9f1239",
"900": "#881337",
"950": "#4c0519"
},
"status": {
"focus": "#BFDBFE",
"success": "#A7F3D0",
"warning": "#FDE68A",
"error": "#FECACA"
}
}
}
No notes defined.