연습장:Sakura: 두 판 사이의 차이

편집 요약 없음
 
(사용자 2명의 중간 판 102개는 보이지 않습니다)
1번째 줄: 1번째 줄:
== 기능 틀 ==
[[파일:휴슬로우.svg|대체글=|섬네일|휴슬로의 욕구단계이론은 피라미드 형태로 주로 표현된다. 아래로 갈수록 기초적인 욕구이다.]]
=== 테마(라이트모드/다크모드) 별 이미지 ===
'''휴슬로의 욕구단계이론'''({{Llang|en|Hyuslow's hierarchy of needs}})은 인간의 다양한 [[욕구]]가 위계를 갖는다는 [[심리학]]적 관점이다. 새빛의 대체의학자 [[마르코 휴슬로]]는 《[[복식호흡학 연구]]》에 2026년 게재한 〈부활 동기에 대한 이론〉에서 처음으로 욕구의 위계를 주장하였고 이후 많은 대체의학자들이 이에 동조하여 이론을 발전시켜 나갔다. 휴슬로의 욕구단계이론의 핵심 아이디어는 생존을 위해 필수적인 선척적 본능에서 부터 개인의 영적 발달을 통해 이루어지는 다양한 욕구에 이르기까지 각각의 욕구들이 위계를 지니며 어떤 욕구는 다른 욕구에 비해 훨씬 강력한 동기를 갖는다는 것이다. 이러한 욕구들은 크게 보아 결핍을 충족시키고자 하는 욕구와 육신의 한계에서 벗어나 영적 부활을 하고자 하는 욕구로 구별되며, 개인의 행동에 우선 순위를 부여하게 된다. 욕구 단계는 대개 보다 근원적이고 강력한 욕구를 밑에 두는 피라미드 형태의 그림으로 표현된다. 휴슬로의 욕구단계이론은 [[교육]], [[보건]], [[사회사업]] 등의 평가 기준으로 전혀 사용되지 않으며 대체의학 연구나 영적자원 관리 훈련에서만 기반 이론으로 자주 도입되고 있다.
<div class="inline-block dark:hidden">{{{1|라이트모드에서 보입니다!}}}</div><div class="hidden dark:inline-block">{{{2|다크모드에서 보입니다!}}}</div>


=== 다크모드 전환 토글 ===
휴슬로의 욕구단계이론은 무엇보다 인간이 부활을 하는데까지 나아가는 [[동기 부여]]를 설명하는 이론이다. 휴슬로는 욕구의 위계를 "잘 먹는 욕구", "잘 사는 욕구", "잘 먹고사는 욕구", "잘 호흡하는 욕구", "잘 부활하는 욕구"로 구분하였다. 가장 강력한 동기인 잘 먹는 욕구는 생존에 필수적인 결핍을 충족시키고자 하는 욕구이다. 예를 들어 배고픔은 여러 생화학적 조건에 의해 형성되는 신체 반응으로 사람이 적절한 때에 음식을 섭취하여 살아갈 수 있도록 유도한다.
{{test}}
 
== Tailwind CSS 설명 ==
=== 무엇인가? ===
<div class="max-w-[500px] w-full  mx-auto mb-[6px] pb-[6px]   bg-sky-500 border-sky-500 border-solid border-2  text-center text-white">{{youtube|--D4WMPEIZI|496px}}'''Tailwind CSS를 설명하는 영상'''</div>
css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 <code>style=""</code> 사이에 무언가를 쓰는것 대신에 <code>class=""</code>에 적어서 적용할 수 있게 만드는 기능입니다.
 
=== 왜 쓰는가? ===
코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 <code>style="margin-right: auto; margin-left: auto;"</code>는 <code>class="mx-0"</code>로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 <code>class="evewiki-dark-txt"</code> 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 <code>class="dark:text-white"</code>라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다.
 
== Tailwind CSS 색상표 ==
배경색(background), 테두리 색(border), 글자 색(color) 등 색상을 정할 때 Tailwind CSS에서는 이 색상표의 색을 기본으로 제공합니다. 물론, 검은색(black, #000)과 흰색(white, #fff)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. <span class="text-[#00FF00]">예를 들어, <code>text-[#00FF00]</code>처럼 말이죠!</span>
{| class="wikitable !w-full !border-sky-500 !border-2 !border-solid" style="font-size: 10pt"
! class="!bg-sky-500 text-center" | 색상표
|-
|  |
<div class="mw-customtoggle-Tailwind !bg-transparent text-center"><div style="margin: 2px 0px 3px">'''[ 펼치기 · 접기 ]'''</div></div>
<div class="mw-collapsible mw-collapsed !border-transparent" id="mw-customcollapsible-Tailwind">
<div class="toccolours mw-collapsible-content !bg-transparent !border-transparent">
<!---->
<div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-4 sm:grid-cols-1">
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(248, 250, 252);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f8fafc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(241, 245, 249);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f1f5f9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(226, 232, 240);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e2e8f0
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(203, 213, 225);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>cbd5e1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(148, 163, 184);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>94a3b8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(100, 116, 139);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>64748b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(71, 85, 105);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>475569
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(51, 65, 85);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>334155
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 41, 59);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1e293b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(15, 23, 42);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0f172a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(2, 6, 23);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>020617
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(249, 250, 251);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f9fafb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(243, 244, 246);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f3f4f6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(229, 231, 235);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e5e7eb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(209, 213, 219);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d1d5db
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(156, 163, 175);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>9ca3af
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(107, 114, 128);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>6b7280
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(75, 85, 99);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4b5563
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(55, 65, 81);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>374151
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(31, 41, 55);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1f2937
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(17, 24, 39);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>111827
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(3, 7, 18);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>030712
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 250, 250);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fafafa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(244, 244, 245);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f4f4f5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(228, 228, 231);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e4e4e7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(212, 212, 216);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d4d4d8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(161, 161, 170);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a1a1aa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(113, 113, 122);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>71717a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(82, 82, 91);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>52525b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(63, 63, 70);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>3f3f46
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(39, 39, 42);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>27272a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(24, 24, 27);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>18181b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(9, 9, 11);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>09090b
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 250, 250);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fafafa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 245, 245);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f5f5f5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(229, 229, 229);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e5e5e5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(212, 212, 212);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d4d4d4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(163, 163, 163);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a3a3a3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(115, 115, 115);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>737373
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(82, 82, 82);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>525252
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(64, 64, 64);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>404040
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(38, 38, 38);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>262626
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(23, 23, 23);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>171717
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(10, 10, 10);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0a0a0a
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 250, 249);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fafaf9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 245, 244);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f5f5f4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(231, 229, 228);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e7e5e4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(214, 211, 209);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d6d3d1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(168, 162, 158);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a8a29e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(120, 113, 108);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>78716c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(87, 83, 78);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>57534e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(68, 64, 60);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>44403c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(41, 37, 36);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>292524
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(28, 25, 23);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1c1917
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(12, 10, 9);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0c0a09
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 242, 242);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fef2f2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 226, 226);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fee2e2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 202, 202);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fecaca
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(252, 165, 165);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fca5a5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(248, 113, 113);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f87171
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(239, 68, 68);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ef4444
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(220, 38, 38);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>dc2626
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(185, 28, 28);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>b91c1c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(153, 27, 27);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>991b1b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(127, 29, 29);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>7f1d1d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(69, 10, 10);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>450a0a
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 247, 237);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fff7ed
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 237, 213);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ffedd5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 215, 170);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fed7aa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 186, 116);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fdba74
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 146, 60);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fb923c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(249, 115, 22);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f97316
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(234, 88, 12);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ea580c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(194, 65, 12);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>c2410c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(154, 52, 18);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>9a3412
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(124, 45, 18);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>7c2d12
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(67, 20, 7);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>431407
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 251, 235);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fffbeb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 243, 199);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fef3c7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 230, 138);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fde68a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(252, 211, 77);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fcd34d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 191, 36);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fbbf24
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 158, 11);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f59e0b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(217, 119, 6);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d97706
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(180, 83, 9);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>b45309
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(146, 64, 14);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>92400e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(120, 53, 15);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>78350f
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(69, 26, 3);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>451a03
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 252, 232);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fefce8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 249, 195);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fef9c3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 240, 138);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fef08a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 224, 71);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fde047
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 204, 21);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>facc15
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(234, 179, 8);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>eab308
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(202, 138, 4);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ca8a04
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(161, 98, 7);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a16207
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(133, 77, 14);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>854d0e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(113, 63, 18);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>713f12
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(66, 32, 6);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>422006
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(247, 254, 231);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f7fee7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 252, 203);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ecfccb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(217, 249, 157);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d9f99d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(190, 242, 100);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>bef264
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(163, 230, 53);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a3e635
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(132, 204, 22);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>84cc16
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(101, 163, 13);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>65a30d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(77, 124, 15);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4d7c0f
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(63, 98, 18);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>3f6212
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(54, 83, 20);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>365314
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(26, 46, 5);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1a2e05
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 253, 244);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f0fdf4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(220, 252, 231);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>dcfce7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(187, 247, 208);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>bbf7d0
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(134, 239, 172);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>86efac
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(74, 222, 128);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4ade80
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(34, 197, 94);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>22c55e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(22, 163, 74);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>16a34a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(21, 128, 61);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>15803d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(22, 101, 52);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>166534
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(20, 83, 45);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>14532d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(5, 46, 22);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>052e16
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 253, 245);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ecfdf5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(209, 250, 229);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d1fae5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(167, 243, 208);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a7f3d0
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(110, 231, 183);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>6ee7b7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(52, 211, 153);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>34d399
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(16, 185, 129);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>10b981
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(5, 150, 105);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>059669
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(4, 120, 87);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>047857
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(6, 95, 70);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>065f46
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(6, 78, 59);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>064e3b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(2, 44, 34);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>022c22
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 253, 250);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f0fdfa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(204, 251, 241);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ccfbf1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(153, 246, 228);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>99f6e4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(94, 234, 212);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>5eead4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(45, 212, 191);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>2dd4bf
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(20, 184, 166);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>14b8a6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(13, 148, 136);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0d9488
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(15, 118, 110);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0f766e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(17, 94, 89);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>115e59
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(19, 78, 74);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>134e4a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(4, 47, 46);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>042f2e
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 254, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ecfeff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(207, 250, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>cffafe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(165, 243, 252);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a5f3fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(103, 232, 249);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>67e8f9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(34, 211, 238);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>22d3ee
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(6, 182, 212);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>06b6d4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(8, 145, 178);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0891b2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(14, 116, 144);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0e7490
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(21, 94, 117);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>155e75
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(22, 78, 99);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>164e63
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(8, 51, 68);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>083344
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 249, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f0f9ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(224, 242, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e0f2fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(186, 230, 253);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>bae6fd
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(125, 211, 252);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>7dd3fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(56, 189, 248);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>38bdf8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(14, 165, 233);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0ea5e9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(2, 132, 199);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0284c7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(3, 105, 161);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0369a1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(7, 89, 133);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>075985
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(12, 74, 110);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>0c4a6e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(8, 47, 73);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>082f49
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(239, 246, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>eff6ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(219, 234, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>dbeafe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(191, 219, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>bfdbfe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(147, 197, 253);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>93c5fd
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(96, 165, 250);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>60a5fa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(59, 130, 246);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>3b82f6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(37, 99, 235);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>2563eb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(29, 78, 216);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1d4ed8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 64, 175);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1e40af
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 58, 138);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1e3a8a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(23, 37, 84);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>172554
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(238, 242, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>eef2ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(224, 231, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e0e7ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(199, 210, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>c7d2fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(165, 180, 252);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a5b4fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(129, 140, 248);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>818cf8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(99, 102, 241);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>6366f1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(79, 70, 229);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4f46e5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(67, 56, 202);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4338ca
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(55, 48, 163);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>3730a3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(49, 46, 129);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>312e81
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 27, 75);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>1e1b4b
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 243, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f5f3ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(237, 233, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ede9fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(221, 214, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ddd6fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(196, 181, 253);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>c4b5fd
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(167, 139, 250);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a78bfa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(139, 92, 246);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>8b5cf6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(124, 58, 237);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>7c3aed
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(109, 40, 217);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>6d28d9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(91, 33, 182);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>5b21b6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(76, 29, 149);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4c1d95
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(46, 16, 101);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>2e1065
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 245, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>faf5ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(243, 232, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f3e8ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(233, 213, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e9d5ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(216, 180, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d8b4fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(192, 132, 252);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>c084fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(168, 85, 247);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a855f7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(147, 51, 234);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>9333ea
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(126, 34, 206);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>7e22ce
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(107, 33, 168);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>6b21a8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(88, 28, 135);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>581c87
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(59, 7, 100);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>3b0764
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 244, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fdf4ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 232, 255);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fae8ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 208, 254);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f5d0fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 171, 252);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f0abfc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(232, 121, 249);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e879f9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(217, 70, 239);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>d946ef
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(192, 38, 211);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>c026d3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(162, 28, 175);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>a21caf
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(134, 25, 143);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>86198f
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(112, 26, 117);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>701a75
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(74, 4, 78);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4a044e
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 242, 248);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fdf2f8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(252, 231, 243);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fce7f3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 207, 232);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fbcfe8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(249, 168, 212);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f9a8d4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(244, 114, 182);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f472b6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 72, 153);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ec4899
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(219, 39, 119);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>db2777
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(190, 24, 93);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>be185d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(157, 23, 77);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>9d174d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(131, 24, 67);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>831843
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(80, 7, 36);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>500724
</div>
</div>
</div>
</div>
</div>
</div>
<div class="2xl:contents">
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 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 sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 241, 242);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
50
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fff1f2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 228, 230);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
100
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>ffe4e6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 205, 211);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
200
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fecdd3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 164, 175);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
300
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fda4af
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 113, 133);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
400
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>fb7185
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(244, 63, 94);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
500
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>f43f5e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(225, 29, 72);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
600
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>e11d48
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(190, 18, 60);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
700
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>be123c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(159, 18, 57);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
800
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>9f1239
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(136, 19, 55);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
900
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>881337
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(76, 5, 25);">
</div>
<div class="px-0.5">
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
950
</div>
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
<nowiki>#</nowiki>4c0519
</div>
</div>
</div>
</div>
</div>
</div>
</div>
|}</div></div>
 
== af ==

2026년 10월 8일 (목) 00:07 기준 최신판

휴슬로의 욕구단계이론은 피라미드 형태로 주로 표현된다. 아래로 갈수록 기초적인 욕구이다.

휴슬로의 욕구단계이론(영어: Hyuslow's hierarchy of needs)은 인간의 다양한 욕구가 위계를 갖는다는 심리학적 관점이다. 새빛의 대체의학자 마르코 휴슬로는 《복식호흡학 연구》에 2026년 게재한 〈부활 동기에 대한 이론〉에서 처음으로 욕구의 위계를 주장하였고 이후 많은 대체의학자들이 이에 동조하여 이론을 발전시켜 나갔다. 휴슬로의 욕구단계이론의 핵심 아이디어는 생존을 위해 필수적인 선척적 본능에서 부터 개인의 영적 발달을 통해 이루어지는 다양한 욕구에 이르기까지 각각의 욕구들이 위계를 지니며 어떤 욕구는 다른 욕구에 비해 훨씬 강력한 동기를 갖는다는 것이다. 이러한 욕구들은 크게 보아 결핍을 충족시키고자 하는 욕구와 육신의 한계에서 벗어나 영적 부활을 하고자 하는 욕구로 구별되며, 개인의 행동에 우선 순위를 부여하게 된다. 욕구 단계는 대개 보다 근원적이고 강력한 욕구를 밑에 두는 피라미드 형태의 그림으로 표현된다. 휴슬로의 욕구단계이론은 교육, 보건, 사회사업 등의 평가 기준으로 전혀 사용되지 않으며 대체의학 연구나 영적자원 관리 훈련에서만 기반 이론으로 자주 도입되고 있다.

휴슬로의 욕구단계이론은 무엇보다 인간이 부활을 하는데까지 나아가는 동기 부여를 설명하는 이론이다. 휴슬로는 욕구의 위계를 "잘 먹는 욕구", "잘 사는 욕구", "잘 먹고사는 욕구", "잘 호흡하는 욕구", "잘 부활하는 욕구"로 구분하였다. 가장 강력한 동기인 잘 먹는 욕구는 생존에 필수적인 결핍을 충족시키고자 하는 욕구이다. 예를 들어 배고픔은 여러 생화학적 조건에 의해 형성되는 신체 반응으로 사람이 적절한 때에 음식을 섭취하여 살아갈 수 있도록 유도한다.