PageSourceSearch

https://tailcolors.com/

html tailcolors.com collected 2026-10-07 18:48:26 UTC 169,126 bytes, 1,628 lines download raw bytes

1<!doctype html>
2<html lang="en" class="bg-white text-sm text-stone-700">
3  <head>
4    <title>Tailwind v4 Color Palette • tailcolors</title>
5<meta charset="utf-8">
6<meta http-equiv="x-ua-compatible" content="ie=edge">
7<meta name="viewport" content="width=device-width, initial-scale=1" />
8<meta name="title" content="Tailwind v4 Color Palette • tailcolors" />
9<meta name="description" content="Copy any Tailwind color with our beautiful Tailwind 4 color palette. Click to copy any HEX, OKLCH, or Tailwind 4 color class." />
10<meta property="og:title" content="Tailwind v4 Color Palette • tailcolors" />
11<meta property="og:image" content=https://tailcolors.com/images/tailcolors_og-1711b5c0.png />
12<meta property="og:site_name" content="Tailwind CSS Color Palette" />
13<meta name="twitter:title" content="Tailwind v4 Color Palette • tailcolors" />
14<meta name="twitter:description" content="Copy any Tailwind color with our beautiful Tailwind 4 color palette. Click to copy any HEX, OKLCH, or Tailwind 4 color class.">
15<meta name="twitter:image" content="https://tailcolors.com/images/tailcolors_og-1711b5c0.png">
16<meta name="twitter:card" content="summary_large_image">
17<link href="https://tailcolors.com/images/favicon.ico" rel="icon" type="image/ico" />
18<script defer src="https://api.pirsch.io/pa.js"
19    id="pianjs"
20    data-code="gSvFrrAsWK31sVqykNJiiM51MXMbiP04"></script>
vendor: 1 bytes, line 20
20
21<script src="
22https://cdn.jsdelivr.net/npm/[email protected]/nearestColor.min.js
23"></script>
23
24
25    <link href="/stylesheets/tailwind-0225721e.css" rel="stylesheet" />
26    
26<script src="/javascripts/colors-23aada23.js"></script>
26
27    
27<script src="/javascripts/tools/closest-tailwind-color-21e6c586.js"></script>
27
28    
28<script src="/javascripts/site-57150d88.js"></script>
28
29  </head>
30  <body class="mx-auto flex flex-col px-4 pt-4 sm:pt-8 sm:px-8">
31    <div class="flex flex-col md:h-screen min-h-screen">
32  <div class="flex md:flex-row flex-col justify-between md:items-center space-y-2 md:space-y-0">
33    <div class="ml-0.5">
34      <h1 class="font-medium text-stone-900 text-2xl">
35        Tailwind v4 Color Palette
36      </h1>
37      <h2 class="mt-1">Click to copy Tailwind CSS v4.2 colors. Supports OKLCH, HEX, & Tailwind classes.</h2>
38    </div>
39    <p class="hidden md:block"><a href="/tools" class="hover:text-stone-950 hover:underline cursor-pointer">more tools ↗</a></p>
40  </div>
41  <div class="flex md:flex-row flex-col flex-1 items-stretch md:gap-x-0.5 my-6">
42      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
43        <a href="/red" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Red</a>
44          <button ontouchstart="" data-color="bg-red-950" data-hex="#450a0a" data-oklch="oklch(0.258 0.092 26.042)" aria-label="bg-red-950" class="transition-all duration-200 font-display text-lg bg-red-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
45            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
46              950
47            </span>
48          </button>
49          <button ontouchstart="" data-color="bg-red-900" data-hex="#7f1d1d" data-oklch="oklch(0.396 0.141 25.723)" aria-label="bg-red-900" class="transition-all duration-200 font-display text-lg bg-red-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
50            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
51              900
52            </span>
53          </button>
54          <button ontouchstart="" data-color="bg-red-800" data-hex="#991b1b" data-oklch="oklch(0.444 0.177 26.899)" aria-label="bg-red-800" class="transition-all duration-200 font-display text-lg bg-red-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
55            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
56              800
57            </span>
58          </button>
59          <button ontouchstart="" data-color="bg-red-700" data-hex="#b91c1c" data-oklch="oklch(0.505 0.213 27.518)" aria-label="bg-red-700" class="transition-all duration-200 font-display text-lg bg-red-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
60            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
61              700
62            </span>
63          </button>
64          <button ontouchstart="" data-color="bg-red-600" data-hex="#dc2626" data-oklch="oklch(0.577 0.245 27.325)" aria-label="bg-red-600" class="transition-all duration-200 font-display text-lg bg-red-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
65            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
66              600
67            </span>
68          </button>
69          <button ontouchstart="" data-color="bg-red-500" data-hex="#ef4444" data-oklch="oklch(0.637 0.237 25.331)" aria-label="bg-red-500" class="transition-all duration-200 font-display text-lg bg-red-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
70            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
71              500
72            </span>
73          </button>
74          <button ontouchstart="" data-color="bg-red-400" data-hex="#f87171" data-oklch="oklch(0.704 0.191 22.216)" aria-label="bg-red-400" class="transition-all duration-200 font-display text-lg bg-red-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
75            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-red-800 opacity-80">
76              400
77            </span>
78          </button>
79          <button ontouchstart="" data-color="bg-red-300" data-hex="#fca5a5" data-oklch="oklch(0.808 0.114 19.571)" aria-label="bg-red-300" class="transition-all duration-200 font-display text-lg bg-red-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
80            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-red-700 opacity-80">
81              300
82            </span>
83          </button>
84          <button ontouchstart="" data-color="bg-red-200" data-hex="#fecaca" data-oklch="oklch(0.885 0.062 18.334)" aria-label="bg-red-200" class="transition-all duration-200 font-display text-lg bg-red-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
85            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-red-600 opacity-80">
86              200
87            </span>
88          </button>
89          <button ontouchstart="" data-color="bg-red-100" data-hex="#fee2e2" data-oklch="oklch(0.936 0.032 17.717)" aria-label="bg-red-100" class="transition-all duration-200 font-display text-lg bg-red-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
90            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-red-500 opacity-80">
91              100
92            </span>
93          </button>
94          <button ontouchstart="" data-color="bg-red-50" data-hex="#fef2f2" data-oklch="oklch(0.971 0.013 17.38)" aria-label="bg-red-50" class="transition-all duration-200 font-display text-lg bg-red-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
95            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-red-400 opacity-80">
96              50
97            </span>
98          </button>
99      </div>
100      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
101        <a href="/orange" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Orange</a>
102          <button ontouchstart="" data-color="bg-orange-950" data-hex="#431407" data-oklch="oklch(0.266 0.079 36.259)" aria-label="bg-orange-950" class="transition-all duration-200 font-display text-lg bg-orange-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
103            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
104              950
105            </span>
106          </button>
107          <button ontouchstart="" data-color="bg-orange-900" data-hex="#7c2d12" data-oklch="oklch(0.408 0.123 38.172)" aria-label="bg-orange-900" class="transition-all duration-200 font-display text-lg bg-orange-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
108            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
109              900
110            </span>
111          </button>
112          <button ontouchstart="" data-color="bg-orange-800" data-hex="#9a3412" data-oklch="oklch(0.47 0.157 37.304)" aria-label="bg-orange-800" class="transition-all duration-200 font-display text-lg bg-orange-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
113            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
114              800
115            </span>
116          </button>
117          <button ontouchstart="" data-color="bg-orange-700" data-hex="#c2410c" data-oklch="oklch(0.553 0.195 38.402)" aria-label="bg-orange-700" class="transition-all duration-200 font-display text-lg bg-orange-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
118            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
119              700
120            </span>
121          </button>
122          <button ontouchstart="" data-color="bg-orange-600" data-hex="#ea580c" data-oklch="oklch(0.646 0.222 41.116)" aria-label="bg-orange-600" class="transition-all duration-200 font-display text-lg bg-orange-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
123            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
124              600
125            </span>
126          </button>
127          <button ontouchstart="" data-color="bg-orange-500" data-hex="#f97316" data-oklch="oklch(0.705 0.213 47.604)" aria-label="bg-orange-500" class="transition-all duration-200 font-display text-lg bg-orange-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
128            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
129              500
130            </span>
131          </button>
132          <button ontouchstart="" data-color="bg-orange-400" data-hex="#fb923c" data-oklch="oklch(0.75 0.183 55.934)" aria-label="bg-orange-400" class="transition-all duration-200 font-display text-lg bg-orange-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
133            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-orange-800 opacity-80">
134              400
135            </span>
136          </button>
137          <button ontouchstart="" data-color="bg-orange-300" data-hex="#fdba74" data-oklch="oklch(0.837 0.128 66.29)" aria-label="bg-orange-300" class="transition-all duration-200 font-display text-lg bg-orange-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
138            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-orange-700 opacity-80">
139              300
140            </span>
141          </button>
142          <button ontouchstart="" data-color="bg-orange-200" data-hex="#fed7aa" data-oklch="oklch(0.901 0.076 70.697)" aria-label="bg-orange-200" class="transition-all duration-200 font-display text-lg bg-orange-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
143            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-orange-600 opacity-80">
144              200
145            </span>
146          </button>
147          <button ontouchstart="" data-color="bg-orange-100" data-hex="#ffedd5" data-oklch="oklch(0.954 0.038 75.164)" aria-label="bg-orange-100" class="transition-all duration-200 font-display text-lg bg-orange-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
148            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-orange-500 opacity-80">
149              100
150            </span>
151          </button>
152          <button ontouchstart="" data-color="bg-orange-50" data-hex="#fff7ed" data-oklch="oklch(0.98 0.016 73.684)" aria-label="bg-orange-50" class="transition-all duration-200 font-display text-lg bg-orange-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
153            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-orange-400 opacity-80">
154              50
155            </span>
156          </button>
157      </div>
158      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
159        <a href="/amber" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Amber</a>
160          <button ontouchstart="" data-color="bg-amber-950" data-hex="#451a03" data-oklch="oklch(0.279 0.077 45.635)" aria-label="bg-amber-950" class="transition-all duration-200 font-display text-lg bg-amber-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
161            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
162              950
163            </span>
164          </button>
165          <button ontouchstart="" data-color="bg-amber-900" data-hex="#78350f" data-oklch="oklch(0.414 0.112 45.904)" aria-label="bg-amber-900" class="transition-all duration-200 font-display text-lg bg-amber-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
166            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
167              900
168            </span>
169          </button>
170          <button ontouchstart="" data-color="bg-amber-800" data-hex="#92400e" data-oklch="oklch(0.473 0.137 46.201)" aria-label="bg-amber-800" class="transition-all duration-200 font-display text-lg bg-amber-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
171            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
172              800
173            </span>
174          </button>
175          <button ontouchstart="" data-color="bg-amber-700" data-hex="#b45309" data-oklch="oklch(0.555 0.163 48.998)" aria-label="bg-amber-700" class="transition-all duration-200 font-display text-lg bg-amber-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
176            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
177              700
178            </span>
179          </button>
180          <button ontouchstart="" data-color="bg-amber-600" data-hex="#d97706" data-oklch="oklch(0.666 0.179 58.318)" aria-label="bg-amber-600" class="transition-all duration-200 font-display text-lg bg-amber-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
181            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
182              600
183            </span>
184          </button>
185          <button ontouchstart="" data-color="bg-amber-500" data-hex="#f59e0b" data-oklch="oklch(0.769 0.188 70.08)" aria-label="bg-amber-500" class="transition-all duration-200 font-display text-lg bg-amber-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
186            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
187              500
188            </span>
189          </button>
190          <button ontouchstart="" data-color="bg-amber-400" data-hex="#fbbf24" data-oklch="oklch(0.828 0.189 84.429)" aria-label="bg-amber-400" class="transition-all duration-200 font-display text-lg bg-amber-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
191            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-amber-800 opacity-80">
192              400
193            </span>
194          </button>
195          <button ontouchstart="" data-color="bg-amber-300" data-hex="#fcd34d" data-oklch="oklch(0.879 0.169 91.605)" aria-label="bg-amber-300" class="transition-all duration-200 font-display text-lg bg-amber-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
196            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-amber-700 opacity-80">
197              300
198            </span>
199          </button>
200          <button ontouchstart="" data-color="bg-amber-200" data-hex="#fde68a" data-oklch="oklch(0.924 0.12 95.746)" aria-label="bg-amber-200" class="transition-all duration-200 font-display text-lg bg-amber-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
201            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-amber-600 opacity-80">
202              200
203            </span>
204          </button>
205          <button ontouchstart="" data-color="bg-amber-100" data-hex="#fef3c7" data-oklch="oklch(0.962 0.059 95.617)" aria-label="bg-amber-100" class="transition-all duration-200 font-display text-lg bg-amber-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
206            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-amber-500 opacity-80">
207              100
208            </span>
209          </button>
210          <button ontouchstart="" data-color="bg-amber-50" data-hex="#fffbeb" data-oklch="oklch(0.987 0.022 95.277)" aria-label="bg-amber-50" class="transition-all duration-200 font-display text-lg bg-amber-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
211            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-amber-400 opacity-80">
212              50
213            </span>
214          </button>
215      </div>
216      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
217        <a href="/yellow" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Yellow</a>
218          <button ontouchstart="" data-color="bg-yellow-950" data-hex="#422006" data-oklch="oklch(0.286 0.066 53.813)" aria-label="bg-yellow-950" class="transition-all duration-200 font-display text-lg bg-yellow-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
219            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
220              950
221            </span>
222          </button>
223          <button ontouchstart="" data-color="bg-yellow-900" data-hex="#713f12" data-oklch="oklch(0.421 0.095 57.708)" aria-label="bg-yellow-900" class="transition-all duration-200 font-display text-lg bg-yellow-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
224            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
225              900
226            </span>
227          </button>
228          <button ontouchstart="" data-color="bg-yellow-800" data-hex="#854d0e" data-oklch="oklch(0.476 0.114 61.907)" aria-label="bg-yellow-800" class="transition-all duration-200 font-display text-lg bg-yellow-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
229            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
230              800
231            </span>
232          </button>
233          <button ontouchstart="" data-color="bg-yellow-700" data-hex="#a16207" data-oklch="oklch(0.554 0.135 66.442)" aria-label="bg-yellow-700" class="transition-all duration-200 font-display text-lg bg-yellow-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
234            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
235              700
236            </span>
237          </button>
238          <button ontouchstart="" data-color="bg-yellow-600" data-hex="#ca8a04" data-oklch="oklch(0.681 0.162 75.834)" aria-label="bg-yellow-600" class="transition-all duration-200 font-display text-lg bg-yellow-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
239            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
240              600
241            </span>
242          </button>
243          <button ontouchstart="" data-color="bg-yellow-500" data-hex="#eab308" data-oklch="oklch(0.795 0.184 86.047)" aria-label="bg-yellow-500" class="transition-all duration-200 font-display text-lg bg-yellow-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
244            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
245              500
246            </span>
247          </button>
248          <button ontouchstart="" data-color="bg-yellow-400" data-hex="#facc15" data-oklch="oklch(0.852 0.199 91.936)" aria-label="bg-yellow-400" class="transition-all duration-200 font-display text-lg bg-yellow-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
249            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-yellow-800 opacity-80">
250              400
251            </span>
252          </button>
253          <button ontouchstart="" data-color="bg-yellow-300" data-hex="#fde047" data-oklch="oklch(0.905 0.182 98.111)" aria-label="bg-yellow-300" class="transition-all duration-200 font-display text-lg bg-yellow-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
254            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-yellow-700 opacity-80">
255              300
256            </span>
257          </button>
258          <button ontouchstart="" data-color="bg-yellow-200" data-hex="#fef08a" data-oklch="oklch(0.945 0.129 101.54)" aria-label="bg-yellow-200" class="transition-all duration-200 font-display text-lg bg-yellow-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
259            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-yellow-600 opacity-80">
260              200
261            </span>
262          </button>
263          <button ontouchstart="" data-color="bg-yellow-100" data-hex="#fef9c3" data-oklch="oklch(0.973 0.071 103.193)" aria-label="bg-yellow-100" class="transition-all duration-200 font-display text-lg bg-yellow-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
264            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-yellow-500 opacity-80">
265              100
266            </span>
267          </button>
268          <button ontouchstart="" data-color="bg-yellow-50" data-hex="#fefce8" data-oklch="oklch(0.987 0.026 102.212)" aria-label="bg-yellow-50" class="transition-all duration-200 font-display text-lg bg-yellow-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
269            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-yellow-400 opacity-80">
270              50
271            </span>
272          </button>
273      </div>
274      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
275        <a href="/lime" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Lime</a>
276          <button ontouchstart="" data-color="bg-lime-950" data-hex="#1a2e05" data-oklch="oklch(0.274 0.072 132.109)" aria-label="bg-lime-950" class="transition-all duration-200 font-display text-lg bg-lime-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
277            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
278              950
279            </span>
280          </button>
281          <button ontouchstart="" data-color="bg-lime-900" data-hex="#365314" data-oklch="oklch(0.405 0.101 131.063)" aria-label="bg-lime-900" class="transition-all duration-200 font-display text-lg bg-lime-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
282            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
283              900
284            </span>
285          </button>
286          <button ontouchstart="" data-color="bg-lime-800" data-hex="#3f6212" data-oklch="oklch(0.453 0.124 130.933)" aria-label="bg-lime-800" class="transition-all duration-200 font-display text-lg bg-lime-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
287            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
288              800
289            </span>
290          </button>
291          <button ontouchstart="" data-color="bg-lime-700" data-hex="#4d7c0f" data-oklch="oklch(0.532 0.157 131.589)" aria-label="bg-lime-700" class="transition-all duration-200 font-display text-lg bg-lime-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
292            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
293              700
294            </span>
295          </button>
296          <button ontouchstart="" data-color="bg-lime-600" data-hex="#65a30d" data-oklch="oklch(0.648 0.2 131.684)" aria-label="bg-lime-600" class="transition-all duration-200 font-display text-lg bg-lime-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
297            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
298              600
299            </span>
300          </button>
301          <button ontouchstart="" data-color="bg-lime-500" data-hex="#84cc16" data-oklch="oklch(0.768 0.233 130.85)" aria-label="bg-lime-500" class="transition-all duration-200 font-display text-lg bg-lime-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
302            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
303              500
304            </span>
305          </button>
306          <button ontouchstart="" data-color="bg-lime-400" data-hex="#a3e635" data-oklch="oklch(0.841 0.238 128.85)" aria-label="bg-lime-400" class="transition-all duration-200 font-display text-lg bg-lime-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
307            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-lime-800 opacity-80">
308              400
309            </span>
310          </button>
311          <button ontouchstart="" data-color="bg-lime-300" data-hex="#bef264" data-oklch="oklch(0.897 0.196 126.665)" aria-label="bg-lime-300" class="transition-all duration-200 font-display text-lg bg-lime-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
312            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-lime-700 opacity-80">
313              300
314            </span>
315          </button>
316          <button ontouchstart="" data-color="bg-lime-200" data-hex="#d9f99d" data-oklch="oklch(0.938 0.127 124.321)" aria-label="bg-lime-200" class="transition-all duration-200 font-display text-lg bg-lime-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
317            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-lime-600 opacity-80">
318              200
319            </span>
320          </button>
321          <button ontouchstart="" data-color="bg-lime-100" data-hex="#ecfccb" data-oklch="oklch(0.967 0.067 122.328)" aria-label="bg-lime-100" class="transition-all duration-200 font-display text-lg bg-lime-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
322            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-lime-500 opacity-80">
323              100
324            </span>
325          </button>
326          <button ontouchstart="" data-color="bg-lime-50" data-hex="#f7fee7" data-oklch="oklch(0.986 0.031 120.757)" aria-label="bg-lime-50" class="transition-all duration-200 font-display text-lg bg-lime-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
327            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-lime-400 opacity-80">
328              50
329            </span>
330          </button>
331      </div>
332      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
333        <a href="/green" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Green</a>
334          <button ontouchstart="" data-color="bg-green-950" data-hex="#052e16" data-oklch="oklch(0.266 0.065 152.934)" aria-label="bg-green-950" class="transition-all duration-200 font-display text-lg bg-green-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
335            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
336              950
337            </span>
338          </button>
339          <button ontouchstart="" data-color="bg-green-900" data-hex="#14532d" data-oklch="oklch(0.393 0.095 152.535)" aria-label="bg-green-900" class="transition-all duration-200 font-display text-lg bg-green-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
340            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
341              900
342            </span>
343          </button>
344          <button ontouchstart="" data-color="bg-green-800" data-hex="#166534" data-oklch="oklch(0.448 0.119 151.328)" aria-label="bg-green-800" class="transition-all duration-200 font-display text-lg bg-green-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
345            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
346              800
347            </span>
348          </button>
349          <button ontouchstart="" data-color="bg-green-700" data-hex="#15803d" data-oklch="oklch(0.527 0.154 150.069)" aria-label="bg-green-700" class="transition-all duration-200 font-display text-lg bg-green-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
350            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
351              700
352            </span>
353          </button>
354          <button ontouchstart="" data-color="bg-green-600" data-hex="#16a34a" data-oklch="oklch(0.627 0.194 149.214)" aria-label="bg-green-600" class="transition-all duration-200 font-display text-lg bg-green-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
355            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
356              600
357            </span>
358          </button>
359          <button ontouchstart="" data-color="bg-green-500" data-hex="#22c55e" data-oklch="oklch(0.723 0.219 149.579)" aria-label="bg-green-500" class="transition-all duration-200 font-display text-lg bg-green-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
360            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
361              500
362            </span>
363          </button>
364          <button ontouchstart="" data-color="bg-green-400" data-hex="#4ade80" data-oklch="oklch(0.792 0.209 151.711)" aria-label="bg-green-400" class="transition-all duration-200 font-display text-lg bg-green-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
365            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-green-800 opacity-80">
366              400
367            </span>
368          </button>
369          <button ontouchstart="" data-color="bg-green-300" data-hex="#86efac" data-oklch="oklch(0.871 0.15 154.449)" aria-label="bg-green-300" class="transition-all duration-200 font-display text-lg bg-green-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
370            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-green-700 opacity-80">
371              300
372            </span>
373          </button>
374          <button ontouchstart="" data-color="bg-green-200" data-hex="#bbf7d0" data-oklch="oklch(0.925 0.084 155.995)" aria-label="bg-green-200" class="transition-all duration-200 font-display text-lg bg-green-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
375            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-green-600 opacity-80">
376              200
377            </span>
378          </button>
379          <button ontouchstart="" data-color="bg-green-100" data-hex="#dcfce7" data-oklch="oklch(0.962 0.044 156.743)" aria-label="bg-green-100" class="transition-all duration-200 font-display text-lg bg-green-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
380            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-green-500 opacity-80">
381              100
382            </span>
383          </button>
384          <button ontouchstart="" data-color="bg-green-50" data-hex="#f0fdf4" data-oklch="oklch(0.982 0.018 155.826)" aria-label="bg-green-50" class="transition-all duration-200 font-display text-lg bg-green-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
385            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-green-400 opacity-80">
386              50
387            </span>
388          </button>
389      </div>
390      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
391        <a href="/emerald" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Emerald</a>
392          <button ontouchstart="" data-color="bg-emerald-950" data-hex="#022c22" data-oklch="oklch(0.262 0.051 172.552)" aria-label="bg-emerald-950" class="transition-all duration-200 font-display text-lg bg-emerald-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
393            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
394              950
395            </span>
396          </button>
397          <button ontouchstart="" data-color="bg-emerald-900" data-hex="#064e3b" data-oklch="oklch(0.378 0.077 168.94)" aria-label="bg-emerald-900" class="transition-all duration-200 font-display text-lg bg-emerald-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
398            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
399              900
400            </span>
401          </button>
402          <button ontouchstart="" data-color="bg-emerald-800" data-hex="#065f46" data-oklch="oklch(0.432 0.095 166.913)" aria-label="bg-emerald-800" class="transition-all duration-200 font-display text-lg bg-emerald-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
403            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
404              800
405            </span>
406          </button>
407          <button ontouchstart="" data-color="bg-emerald-700" data-hex="#047857" data-oklch="oklch(0.508 0.118 165.612)" aria-label="bg-emerald-700" class="transition-all duration-200 font-display text-lg bg-emerald-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
408            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
409              700
410            </span>
411          </button>
412          <button ontouchstart="" data-color="bg-emerald-600" data-hex="#059669" data-oklch="oklch(0.596 0.145 163.225)" aria-label="bg-emerald-600" class="transition-all duration-200 font-display text-lg bg-emerald-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
413            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
414              600
415            </span>
416          </button>
417          <button ontouchstart="" data-color="bg-emerald-500" data-hex="#10b981" data-oklch="oklch(0.696 0.17 162.48)" aria-label="bg-emerald-500" class="transition-all duration-200 font-display text-lg bg-emerald-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
418            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
419              500
420            </span>
421          </button>
422          <button ontouchstart="" data-color="bg-emerald-400" data-hex="#34d399" data-oklch="oklch(0.765 0.177 163.223)" aria-label="bg-emerald-400" class="transition-all duration-200 font-display text-lg bg-emerald-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
423            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-emerald-800 opacity-80">
424              400
425            </span>
426          </button>
427          <button ontouchstart="" data-color="bg-emerald-300" data-hex="#6ee7b7" data-oklch="oklch(0.845 0.143 164.978)" aria-label="bg-emerald-300" class="transition-all duration-200 font-display text-lg bg-emerald-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
428            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-emerald-700 opacity-80">
429              300
430            </span>
431          </button>
432          <button ontouchstart="" data-color="bg-emerald-200" data-hex="#a7f3d0" data-oklch="oklch(0.905 0.093 164.15)" aria-label="bg-emerald-200" class="transition-all duration-200 font-display text-lg bg-emerald-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
433            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-emerald-600 opacity-80">
434              200
435            </span>
436          </button>
437          <button ontouchstart="" data-color="bg-emerald-100" data-hex="#d1fae5" data-oklch="oklch(0.95 0.052 163.051)" aria-label="bg-emerald-100" class="transition-all duration-200 font-display text-lg bg-emerald-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
438            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-emerald-500 opacity-80">
439              100
440            </span>
441          </button>
442          <button ontouchstart="" data-color="bg-emerald-50" data-hex="#ecfdf5" data-oklch="oklch(0.979 0.021 166.113)" aria-label="bg-emerald-50" class="transition-all duration-200 font-display text-lg bg-emerald-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
443            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-emerald-400 opacity-80">
444              50
445            </span>
446          </button>
447      </div>
448      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
449        <a href="/teal" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Teal</a>
450          <button ontouchstart="" data-color="bg-teal-950" data-hex="#042f2e" data-oklch="oklch(0.277 0.046 192.524)" aria-label="bg-teal-950" class="transition-all duration-200 font-display text-lg bg-teal-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
451            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
452              950
453            </span>
454          </button>
455          <button ontouchstart="" data-color="bg-teal-900" data-hex="#134e4a" data-oklch="oklch(0.386 0.063 188.416)" aria-label="bg-teal-900" class="transition-all duration-200 font-display text-lg bg-teal-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
456            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
457              900
458            </span>
459          </button>
460          <button ontouchstart="" data-color="bg-teal-800" data-hex="#115e59" data-oklch="oklch(0.437 0.078 188.216)" aria-label="bg-teal-800" class="transition-all duration-200 font-display text-lg bg-teal-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
461            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
462              800
463            </span>
464          </button>
465          <button ontouchstart="" data-color="bg-teal-700" data-hex="#0f766e" data-oklch="oklch(0.511 0.096 186.391)" aria-label="bg-teal-700" class="transition-all duration-200 font-display text-lg bg-teal-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
466            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
467              700
468            </span>
469          </button>
470          <button ontouchstart="" data-color="bg-teal-600" data-hex="#0d9488" data-oklch="oklch(0.6 0.118 184.704)" aria-label="bg-teal-600" class="transition-all duration-200 font-display text-lg bg-teal-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
471            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
472              600
473            </span>
474          </button>
475          <button ontouchstart="" data-color="bg-teal-500" data-hex="#14b8a6" data-oklch="oklch(0.704 0.14 182.503)" aria-label="bg-teal-500" class="transition-all duration-200 font-display text-lg bg-teal-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
476            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
477              500
478            </span>
479          </button>
480          <button ontouchstart="" data-color="bg-teal-400" data-hex="#2dd4bf" data-oklch="oklch(0.777 0.152 181.912)" aria-label="bg-teal-400" class="transition-all duration-200 font-display text-lg bg-teal-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
481            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-teal-800 opacity-80">
482              400
483            </span>
484          </button>
485          <button ontouchstart="" data-color="bg-teal-300" data-hex="#5eead4" data-oklch="oklch(0.855 0.138 181.071)" aria-label="bg-teal-300" class="transition-all duration-200 font-display text-lg bg-teal-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
486            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-teal-700 opacity-80">
487              300
488            </span>
489          </button>
490          <button ontouchstart="" data-color="bg-teal-200" data-hex="#99f6e4" data-oklch="oklch(0.91 0.096 180.426)" aria-label="bg-teal-200" class="transition-all duration-200 font-display text-lg bg-teal-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
491            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-teal-600 opacity-80">
492              200
493            </span>
494          </button>
495          <button ontouchstart="" data-color="bg-teal-100" data-hex="#ccfbf1" data-oklch="oklch(0.953 0.051 180.801)" aria-label="bg-teal-100" class="transition-all duration-200 font-display text-lg bg-teal-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
496            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-teal-500 opacity-80">
497              100
498            </span>
499          </button>
500          <button ontouchstart="" data-color="bg-teal-50" data-hex="#f0fdfa" data-oklch="oklch(0.984 0.014 180.72)" aria-label="bg-teal-50" class="transition-all duration-200 font-display text-lg bg-teal-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
501            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-teal-400 opacity-80">
502              50
503            </span>
504          </button>
505      </div>
506      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
507        <a href="/cyan" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Cyan</a>
508          <button ontouchstart="" data-color="bg-cyan-950" data-hex="#083344" data-oklch="oklch(0.302 0.056 229.695)" aria-label="bg-cyan-950" class="transition-all duration-200 font-display text-lg bg-cyan-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
509            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
510              950
511            </span>
512          </button>
513          <button ontouchstart="" data-color="bg-cyan-900" data-hex="#164e63" data-oklch="oklch(0.398 0.07 227.392)" aria-label="bg-cyan-900" class="transition-all duration-200 font-display text-lg bg-cyan-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
514            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
515              900
516            </span>
517          </button>
518          <button ontouchstart="" data-color="bg-cyan-800" data-hex="#155e75" data-oklch="oklch(0.45 0.085 224.283)" aria-label="bg-cyan-800" class="transition-all duration-200 font-display text-lg bg-cyan-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
519            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
520              800
521            </span>
522          </button>
523          <button ontouchstart="" data-color="bg-cyan-700" data-hex="#0e7490" data-oklch="oklch(0.52 0.105 223.128)" aria-label="bg-cyan-700" class="transition-all duration-200 font-display text-lg bg-cyan-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
524            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
525              700
526            </span>
527          </button>
528          <button ontouchstart="" data-color="bg-cyan-600" data-hex="#0891b2" data-oklch="oklch(0.609 0.126 221.723)" aria-label="bg-cyan-600" class="transition-all duration-200 font-display text-lg bg-cyan-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
529            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
530              600
531            </span>
532          </button>
533          <button ontouchstart="" data-color="bg-cyan-500" data-hex="#06b6d4" data-oklch="oklch(0.715 0.143 215.221)" aria-label="bg-cyan-500" class="transition-all duration-200 font-display text-lg bg-cyan-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
534            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
535              500
536            </span>
537          </button>
538          <button ontouchstart="" data-color="bg-cyan-400" data-hex="#22d3ee" data-oklch="oklch(0.789 0.154 211.53)" aria-label="bg-cyan-400" class="transition-all duration-200 font-display text-lg bg-cyan-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
539            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-cyan-800 opacity-80">
540              400
541            </span>
542          </button>
543          <button ontouchstart="" data-color="bg-cyan-300" data-hex="#67e8f9" data-oklch="oklch(0.865 0.127 207.078)" aria-label="bg-cyan-300" class="transition-all duration-200 font-display text-lg bg-cyan-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
544            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-cyan-700 opacity-80">
545              300
546            </span>
547          </button>
548          <button ontouchstart="" data-color="bg-cyan-200" data-hex="#a5f3fc" data-oklch="oklch(0.917 0.08 205.041)" aria-label="bg-cyan-200" class="transition-all duration-200 font-display text-lg bg-cyan-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
549            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-cyan-600 opacity-80">
550              200
551            </span>
552          </button>
553          <button ontouchstart="" data-color="bg-cyan-100" data-hex="#cffafe" data-oklch="oklch(0.956 0.045 203.388)" aria-label="bg-cyan-100" class="transition-all duration-200 font-display text-lg bg-cyan-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
554            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-cyan-500 opacity-80">
555              100
556            </span>
557          </button>
558          <button ontouchstart="" data-color="bg-cyan-50" data-hex="#ecfeff" data-oklch="oklch(0.984 0.019 200.873)" aria-label="bg-cyan-50" class="transition-all duration-200 font-display text-lg bg-cyan-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
559            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-cyan-400 opacity-80">
560              50
561            </span>
562          </button>
563      </div>
564      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
565        <a href="/sky" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Sky</a>
566          <button ontouchstart="" data-color="bg-sky-950" data-hex="#082f49" data-oklch="oklch(0.293 0.066 243.157)" aria-label="bg-sky-950" class="transition-all duration-200 font-display text-lg bg-sky-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
567            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
568              950
569            </span>
570          </button>
571          <button ontouchstart="" data-color="bg-sky-900" data-hex="#0c4a6e" data-oklch="oklch(0.391 0.09 240.876)" aria-label="bg-sky-900" class="transition-all duration-200 font-display text-lg bg-sky-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
572            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
573              900
574            </span>
575          </button>
576          <button ontouchstart="" data-color="bg-sky-800" data-hex="#075985" data-oklch="oklch(0.443 0.11 240.79)" aria-label="bg-sky-800" class="transition-all duration-200 font-display text-lg bg-sky-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
577            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
578              800
579            </span>
580          </button>
581          <button ontouchstart="" data-color="bg-sky-700" data-hex="#0369a1" data-oklch="oklch(0.5 0.134 242.749)" aria-label="bg-sky-700" class="transition-all duration-200 font-display text-lg bg-sky-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
582            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
583              700
584            </span>
585          </button>
586          <button ontouchstart="" data-color="bg-sky-600" data-hex="#0284c7" data-oklch="oklch(0.588 0.158 241.966)" aria-label="bg-sky-600" class="transition-all duration-200 font-display text-lg bg-sky-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
587            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
588              600
589            </span>
590          </button>
591          <button ontouchstart="" data-color="bg-sky-500" data-hex="#0ea5e9" data-oklch="oklch(0.685 0.169 237.323)" aria-label="bg-sky-500" class="transition-all duration-200 font-display text-lg bg-sky-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
592            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
593              500
594            </span>
595          </button>
596          <button ontouchstart="" data-color="bg-sky-400" data-hex="#38bdf8" data-oklch="oklch(0.746 0.16 232.661)" aria-label="bg-sky-400" class="transition-all duration-200 font-display text-lg bg-sky-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
597            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-sky-800 opacity-80">
598              400
599            </span>
600          </button>
601          <button ontouchstart="" data-color="bg-sky-300" data-hex="#7dd3fc" data-oklch="oklch(0.828 0.111 230.318)" aria-label="bg-sky-300" class="transition-all duration-200 font-display text-lg bg-sky-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
602            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-sky-700 opacity-80">
603              300
604            </span>
605          </button>
606          <button ontouchstart="" data-color="bg-sky-200" data-hex="#bae6fd" data-oklch="oklch(0.901 0.058 230.902)" aria-label="bg-sky-200" class="transition-all duration-200 font-display text-lg bg-sky-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
607            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-sky-600 opacity-80">
608              200
609            </span>
610          </button>
611          <button ontouchstart="" data-color="bg-sky-100" data-hex="#e0f2fe" data-oklch="oklch(0.951 0.026 236.824)" aria-label="bg-sky-100" class="transition-all duration-200 font-display text-lg bg-sky-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
612            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-sky-500 opacity-80">
613              100
614            </span>
615          </button>
616          <button ontouchstart="" data-color="bg-sky-50" data-hex="#f0f9ff" data-oklch="oklch(0.977 0.013 236.62)" aria-label="bg-sky-50" class="transition-all duration-200 font-display text-lg bg-sky-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
617            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-sky-400 opacity-80">
618              50
619            </span>
620          </button>
621      </div>
622      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
623        <a href="/blue" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Blue</a>
624          <button ontouchstart="" data-color="bg-blue-950" data-hex="#172554" data-oklch="oklch(0.282 0.091 267.935)" aria-label="bg-blue-950" class="transition-all duration-200 font-display text-lg bg-blue-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
625            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
626              950
627            </span>
628          </button>
629          <button ontouchstart="" data-color="bg-blue-900" data-hex="#1e3a8a" data-oklch="oklch(0.379 0.146 265.522)" aria-label="bg-blue-900" class="transition-all duration-200 font-display text-lg bg-blue-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
630            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
631              900
632            </span>
633          </button>
634          <button ontouchstart="" data-color="bg-blue-800" data-hex="#1e40af" data-oklch="oklch(0.424 0.199 265.638)" aria-label="bg-blue-800" class="transition-all duration-200 font-display text-lg bg-blue-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
635            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
636              800
637            </span>
638          </button>
639          <button ontouchstart="" data-color="bg-blue-700" data-hex="#1d4ed8" data-oklch="oklch(0.488 0.243 264.376)" aria-label="bg-blue-700" class="transition-all duration-200 font-display text-lg bg-blue-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
640            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
641              700
642            </span>
643          </button>
644          <button ontouchstart="" data-color="bg-blue-600" data-hex="#2563eb" data-oklch="oklch(0.546 0.245 262.881)" aria-label="bg-blue-600" class="transition-all duration-200 font-display text-lg bg-blue-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
645            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
646              600
647            </span>
648          </button>
649          <button ontouchstart="" data-color="bg-blue-500" data-hex="#3b82f6" data-oklch="oklch(0.623 0.214 259.815)" aria-label="bg-blue-500" class="transition-all duration-200 font-display text-lg bg-blue-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
650            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
651              500
652            </span>
653          </button>
654          <button ontouchstart="" data-color="bg-blue-400" data-hex="#60a5fa" data-oklch="oklch(0.707 0.165 254.624)" aria-label="bg-blue-400" class="transition-all duration-200 font-display text-lg bg-blue-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
655            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-blue-800 opacity-80">
656              400
657            </span>
658          </button>
659          <button ontouchstart="" data-color="bg-blue-300" data-hex="#93c5fd" data-oklch="oklch(0.809 0.105 251.813)" aria-label="bg-blue-300" class="transition-all duration-200 font-display text-lg bg-blue-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
660            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-blue-700 opacity-80">
661              300
662            </span>
663          </button>
664          <button ontouchstart="" data-color="bg-blue-200" data-hex="#bfdbfe" data-oklch="oklch(0.882 0.059 254.128)" aria-label="bg-blue-200" class="transition-all duration-200 font-display text-lg bg-blue-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
665            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-blue-600 opacity-80">
666              200
667            </span>
668          </button>
669          <button ontouchstart="" data-color="bg-blue-100" data-hex="#dbeafe" data-oklch="oklch(0.932 0.032 255.585)" aria-label="bg-blue-100" class="transition-all duration-200 font-display text-lg bg-blue-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
670            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-blue-500 opacity-80">
671              100
672            </span>
673          </button>
674          <button ontouchstart="" data-color="bg-blue-50" data-hex="#eff6ff" data-oklch="oklch(0.97 0.014 254.604)" aria-label="bg-blue-50" class="transition-all duration-200 font-display text-lg bg-blue-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
675            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-blue-400 opacity-80">
676              50
677            </span>
678          </button>
679      </div>
680      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
681        <a href="/indigo" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Indigo</a>
682          <button ontouchstart="" data-color="bg-indigo-950" data-hex="#1e1b4b" data-oklch="oklch(0.257 0.09 281.288)" aria-label="bg-indigo-950" class="transition-all duration-200 font-display text-lg bg-indigo-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
683            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
684              950
685            </span>
686          </button>
687          <button ontouchstart="" data-color="bg-indigo-900" data-hex="#312e81" data-oklch="oklch(0.359 0.144 278.697)" aria-label="bg-indigo-900" class="transition-all duration-200 font-display text-lg bg-indigo-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
688            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
689              900
690            </span>
691          </button>
692          <button ontouchstart="" data-color="bg-indigo-800" data-hex="#3730a3" data-oklch="oklch(0.398 0.195 277.366)" aria-label="bg-indigo-800" class="transition-all duration-200 font-display text-lg bg-indigo-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
693            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
694              800
695            </span>
696          </button>
697          <button ontouchstart="" data-color="bg-indigo-700" data-hex="#4338ca" data-oklch="oklch(0.457 0.24 277.023)" aria-label="bg-indigo-700" class="transition-all duration-200 font-display text-lg bg-indigo-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
698            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
699              700
700            </span>
701          </button>
702          <button ontouchstart="" data-color="bg-indigo-600" data-hex="#4f46e5" data-oklch="oklch(0.511 0.262 276.966)" aria-label="bg-indigo-600" class="transition-all duration-200 font-display text-lg bg-indigo-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
703            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
704              600
705            </span>
706          </button>
707          <button ontouchstart="" data-color="bg-indigo-500" data-hex="#6366f1" data-oklch="oklch(0.585 0.233 277.117)" aria-label="bg-indigo-500" class="transition-all duration-200 font-display text-lg bg-indigo-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
708            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
709              500
710            </span>
711          </button>
712          <button ontouchstart="" data-color="bg-indigo-400" data-hex="#818cf8" data-oklch="oklch(0.673 0.182 276.935)" aria-label="bg-indigo-400" class="transition-all duration-200 font-display text-lg bg-indigo-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
713            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-indigo-800 opacity-80">
714              400
715            </span>
716          </button>
717          <button ontouchstart="" data-color="bg-indigo-300" data-hex="#a5b4fc" data-oklch="oklch(0.785 0.115 274.713)" aria-label="bg-indigo-300" class="transition-all duration-200 font-display text-lg bg-indigo-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
718            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-indigo-700 opacity-80">
719              300
720            </span>
721          </button>
722          <button ontouchstart="" data-color="bg-indigo-200" data-hex="#c7d2fe" data-oklch="oklch(0.87 0.065 274.039)" aria-label="bg-indigo-200" class="transition-all duration-200 font-display text-lg bg-indigo-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
723            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-indigo-600 opacity-80">
724              200
725            </span>
726          </button>
727          <button ontouchstart="" data-color="bg-indigo-100" data-hex="#e0e7ff" data-oklch="oklch(0.93 0.034 272.788)" aria-label="bg-indigo-100" class="transition-all duration-200 font-display text-lg bg-indigo-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
728            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-indigo-500 opacity-80">
729              100
730            </span>
731          </button>
732          <button ontouchstart="" data-color="bg-indigo-50" data-hex="#eef2ff" data-oklch="oklch(0.962 0.018 272.314)" aria-label="bg-indigo-50" class="transition-all duration-200 font-display text-lg bg-indigo-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
733            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-indigo-400 opacity-80">
734              50
735            </span>
736          </button>
737      </div>
738      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
739        <a href="/violet" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Violet</a>
740          <button ontouchstart="" data-color="bg-violet-950" data-hex="#2e1065" data-oklch="oklch(0.283 0.141 291.089)" aria-label="bg-violet-950" class="transition-all duration-200 font-display text-lg bg-violet-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
741            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
742              950
743            </span>
744          </button>
745          <button ontouchstart="" data-color="bg-violet-900" data-hex="#4c1d95" data-oklch="oklch(0.38 0.189 293.745)" aria-label="bg-violet-900" class="transition-all duration-200 font-display text-lg bg-violet-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
746            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
747              900
748            </span>
749          </button>
750          <button ontouchstart="" data-color="bg-violet-800" data-hex="#5b21b6" data-oklch="oklch(0.432 0.232 292.759)" aria-label="bg-violet-800" class="transition-all duration-200 font-display text-lg bg-violet-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
751            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
752              800
753            </span>
754          </button>
755          <button ontouchstart="" data-color="bg-violet-700" data-hex="#6d28d9" data-oklch="oklch(0.491 0.27 292.581)" aria-label="bg-violet-700" class="transition-all duration-200 font-display text-lg bg-violet-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
756            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
757              700
758            </span>
759          </button>
760          <button ontouchstart="" data-color="bg-violet-600" data-hex="#7c3aed" data-oklch="oklch(0.541 0.281 293.009)" aria-label="bg-violet-600" class="transition-all duration-200 font-display text-lg bg-violet-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
761            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
762              600
763            </span>
764          </button>
765          <button ontouchstart="" data-color="bg-violet-500" data-hex="#8b5cf6" data-oklch="oklch(0.606 0.25 292.717)" aria-label="bg-violet-500" class="transition-all duration-200 font-display text-lg bg-violet-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
766            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
767              500
768            </span>
769          </button>
770          <button ontouchstart="" data-color="bg-violet-400" data-hex="#a78bfa" data-oklch="oklch(0.702 0.183 293.541)" aria-label="bg-violet-400" class="transition-all duration-200 font-display text-lg bg-violet-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
771            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-violet-800 opacity-80">
772              400
773            </span>
774          </button>
775          <button ontouchstart="" data-color="bg-violet-300" data-hex="#c4b5fd" data-oklch="oklch(0.811 0.111 293.571)" aria-label="bg-violet-300" class="transition-all duration-200 font-display text-lg bg-violet-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
776            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-violet-700 opacity-80">
777              300
778            </span>
779          </button>
780          <button ontouchstart="" data-color="bg-violet-200" data-hex="#ddd6fe" data-oklch="oklch(0.894 0.057 293.283)" aria-label="bg-violet-200" class="transition-all duration-200 font-display text-lg bg-violet-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
781            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-violet-600 opacity-80">
782              200
783            </span>
784          </button>
785          <button ontouchstart="" data-color="bg-violet-100" data-hex="#ede9fe" data-oklch="oklch(0.943 0.029 294.588)" aria-label="bg-violet-100" class="transition-all duration-200 font-display text-lg bg-violet-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
786            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-violet-500 opacity-80">
787              100
788            </span>
789          </button>
790          <button ontouchstart="" data-color="bg-violet-50" data-hex="#f5f3ff" data-oklch="oklch(0.969 0.016 293.756)" aria-label="bg-violet-50" class="transition-all duration-200 font-display text-lg bg-violet-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
791            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-violet-400 opacity-80">
792              50
793            </span>
794          </button>
795      </div>
796      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
797        <a href="/purple" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Purple</a>
798          <button ontouchstart="" data-color="bg-purple-950" data-hex="#3b0764" data-oklch="oklch(0.291 0.149 302.717)" aria-label="bg-purple-950" class="transition-all duration-200 font-display text-lg bg-purple-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
799            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
800              950
801            </span>
802          </button>
803          <button ontouchstart="" data-color="bg-purple-900" data-hex="#581c87" data-oklch="oklch(0.381 0.176 304.987)" aria-label="bg-purple-900" class="transition-all duration-200 font-display text-lg bg-purple-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
804            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
805              900
806            </span>
807          </button>
808          <button ontouchstart="" data-color="bg-purple-800" data-hex="#6b21a8" data-oklch="oklch(0.438 0.218 303.724)" aria-label="bg-purple-800" class="transition-all duration-200 font-display text-lg bg-purple-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
809            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
810              800
811            </span>
812          </button>
813          <button ontouchstart="" data-color="bg-purple-700" data-hex="#7e22ce" data-oklch="oklch(0.496 0.265 301.924)" aria-label="bg-purple-700" class="transition-all duration-200 font-display text-lg bg-purple-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
814            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
815              700
816            </span>
817          </button>
818          <button ontouchstart="" data-color="bg-purple-600" data-hex="#9333ea" data-oklch="oklch(0.558 0.288 302.321)" aria-label="bg-purple-600" class="transition-all duration-200 font-display text-lg bg-purple-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
819            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
820              600
821            </span>
822          </button>
823          <button ontouchstart="" data-color="bg-purple-500" data-hex="#a855f7" data-oklch="oklch(0.627 0.265 303.9)" aria-label="bg-purple-500" class="transition-all duration-200 font-display text-lg bg-purple-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
824            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
825              500
826            </span>
827          </button>
828          <button ontouchstart="" data-color="bg-purple-400" data-hex="#c084fc" data-oklch="oklch(0.714 0.203 305.504)" aria-label="bg-purple-400" class="transition-all duration-200 font-display text-lg bg-purple-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
829            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-purple-800 opacity-80">
830              400
831            </span>
832          </button>
833          <button ontouchstart="" data-color="bg-purple-300" data-hex="#d8b4fe" data-oklch="oklch(0.827 0.119 306.383)" aria-label="bg-purple-300" class="transition-all duration-200 font-display text-lg bg-purple-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
834            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-purple-700 opacity-80">
835              300
836            </span>
837          </button>
838          <button ontouchstart="" data-color="bg-purple-200" data-hex="#e9d5ff" data-oklch="oklch(0.902 0.063 306.703)" aria-label="bg-purple-200" class="transition-all duration-200 font-display text-lg bg-purple-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
839            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-purple-600 opacity-80">
840              200
841            </span>
842          </button>
843          <button ontouchstart="" data-color="bg-purple-100" data-hex="#f3e8ff" data-oklch="oklch(0.946 0.033 307.174)" aria-label="bg-purple-100" class="transition-all duration-200 font-display text-lg bg-purple-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
844            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-purple-500 opacity-80">
845              100
846            </span>
847          </button>
848          <button ontouchstart="" data-color="bg-purple-50" data-hex="#faf5ff" data-oklch="oklch(0.977 0.014 308.299)" aria-label="bg-purple-50" class="transition-all duration-200 font-display text-lg bg-purple-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
849            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-purple-400 opacity-80">
850              50
851            </span>
852          </button>
853      </div>
854      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
855        <a href="/fuchsia" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Fuchsia</a>
856          <button ontouchstart="" data-color="bg-fuchsia-950" data-hex="#4a044e" data-oklch="oklch(0.293 0.136 325.661)" aria-label="bg-fuchsia-950" class="transition-all duration-200 font-display text-lg bg-fuchsia-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
857            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
858              950
859            </span>
860          </button>
861          <button ontouchstart="" data-color="bg-fuchsia-900" data-hex="#701a75" data-oklch="oklch(0.401 0.17 325.612)" aria-label="bg-fuchsia-900" class="transition-all duration-200 font-display text-lg bg-fuchsia-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
862            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
863              900
864            </span>
865          </button>
866          <button ontouchstart="" data-color="bg-fuchsia-800" data-hex="#86198f" data-oklch="oklch(0.452 0.211 324.591)" aria-label="bg-fuchsia-800" class="transition-all duration-200 font-display text-lg bg-fuchsia-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
867            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
868              800
869            </span>
870          </button>
871          <button ontouchstart="" data-color="bg-fuchsia-700" data-hex="#a21caf" data-oklch="oklch(0.518 0.253 323.949)" aria-label="bg-fuchsia-700" class="transition-all duration-200 font-display text-lg bg-fuchsia-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
872            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
873              700
874            </span>
875          </button>
876          <button ontouchstart="" data-color="bg-fuchsia-600" data-hex="#c026d3" data-oklch="oklch(0.591 0.293 322.896)" aria-label="bg-fuchsia-600" class="transition-all duration-200 font-display text-lg bg-fuchsia-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
877            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
878              600
879            </span>
880          </button>
881          <button ontouchstart="" data-color="bg-fuchsia-500" data-hex="#d946ef" data-oklch="oklch(0.667 0.295 322.15)" aria-label="bg-fuchsia-500" class="transition-all duration-200 font-display text-lg bg-fuchsia-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
882            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
883              500
884            </span>
885          </button>
886          <button ontouchstart="" data-color="bg-fuchsia-400" data-hex="#e879f9" data-oklch="oklch(0.74 0.238 322.16)" aria-label="bg-fuchsia-400" class="transition-all duration-200 font-display text-lg bg-fuchsia-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
887            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-fuchsia-800 opacity-80">
888              400
889            </span>
890          </button>
891          <button ontouchstart="" data-color="bg-fuchsia-300" data-hex="#f0abfc" data-oklch="oklch(0.833 0.145 321.434)" aria-label="bg-fuchsia-300" class="transition-all duration-200 font-display text-lg bg-fuchsia-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
892            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-fuchsia-700 opacity-80">
893              300
894            </span>
895          </button>
896          <button ontouchstart="" data-color="bg-fuchsia-200" data-hex="#f5d0fe" data-oklch="oklch(0.903 0.076 319.62)" aria-label="bg-fuchsia-200" class="transition-all duration-200 font-display text-lg bg-fuchsia-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
897            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-fuchsia-600 opacity-80">
898              200
899            </span>
900          </button>
901          <button ontouchstart="" data-color="bg-fuchsia-100" data-hex="#fae8ff" data-oklch="oklch(0.952 0.037 318.852)" aria-label="bg-fuchsia-100" class="transition-all duration-200 font-display text-lg bg-fuchsia-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
902            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-fuchsia-500 opacity-80">
903              100
904            </span>
905          </button>
906          <button ontouchstart="" data-color="bg-fuchsia-50" data-hex="#fdf4ff" data-oklch="oklch(0.977 0.017 320.058)" aria-label="bg-fuchsia-50" class="transition-all duration-200 font-display text-lg bg-fuchsia-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
907            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-fuchsia-400 opacity-80">
908              50
909            </span>
910          </button>
911      </div>
912      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
913        <a href="/pink" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Pink</a>
914          <button ontouchstart="" data-color="bg-pink-950" data-hex="#500724" data-oklch="oklch(0.284 0.109 3.907)" aria-label="bg-pink-950" class="transition-all duration-200 font-display text-lg bg-pink-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
915            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
916              950
917            </span>
918          </button>
919          <button ontouchstart="" data-color="bg-pink-900" data-hex="#831843" data-oklch="oklch(0.408 0.153 2.432)" aria-label="bg-pink-900" class="transition-all duration-200 font-display text-lg bg-pink-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
920            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
921              900
922            </span>
923          </button>
924          <button ontouchstart="" data-color="bg-pink-800" data-hex="#9d174d" data-oklch="oklch(0.459 0.187 3.815)" aria-label="bg-pink-800" class="transition-all duration-200 font-display text-lg bg-pink-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
925            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
926              800
927            </span>
928          </button>
929          <button ontouchstart="" data-color="bg-pink-700" data-hex="#be185d" data-oklch="oklch(0.525 0.223 3.958)" aria-label="bg-pink-700" class="transition-all duration-200 font-display text-lg bg-pink-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
930            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
931              700
932            </span>
933          </button>
934          <button ontouchstart="" data-color="bg-pink-600" data-hex="#db2777" data-oklch="oklch(0.592 0.249 0.584)" aria-label="bg-pink-600" class="transition-all duration-200 font-display text-lg bg-pink-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
935            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
936              600
937            </span>
938          </button>
939          <button ontouchstart="" data-color="bg-pink-500" data-hex="#ec4899" data-oklch="oklch(0.656 0.241 354.308)" aria-label="bg-pink-500" class="transition-all duration-200 font-display text-lg bg-pink-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
940            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
941              500
942            </span>
943          </button>
944          <button ontouchstart="" data-color="bg-pink-400" data-hex="#f472b6" data-oklch="oklch(0.718 0.202 349.761)" aria-label="bg-pink-400" class="transition-all duration-200 font-display text-lg bg-pink-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
945            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-pink-800 opacity-80">
946              400
947            </span>
948          </button>
949          <button ontouchstart="" data-color="bg-pink-300" data-hex="#f9a8d4" data-oklch="oklch(0.823 0.12 346.018)" aria-label="bg-pink-300" class="transition-all duration-200 font-display text-lg bg-pink-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
950            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-pink-700 opacity-80">
951              300
952            </span>
953          </button>
954          <button ontouchstart="" data-color="bg-pink-200" data-hex="#fbcfe8" data-oklch="oklch(0.899 0.061 343.231)" aria-label="bg-pink-200" class="transition-all duration-200 font-display text-lg bg-pink-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
955            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-pink-600 opacity-80">
956              200
957            </span>
958          </button>
959          <button ontouchstart="" data-color="bg-pink-100" data-hex="#fce7f3" data-oklch="oklch(0.948 0.028 342.258)" aria-label="bg-pink-100" class="transition-all duration-200 font-display text-lg bg-pink-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
960            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-pink-500 opacity-80">
961              100
962            </span>
963          </button>
964          <button ontouchstart="" data-color="bg-pink-50" data-hex="#fdf2f8" data-oklch="oklch(0.971 0.014 343.198)" aria-label="bg-pink-50" class="transition-all duration-200 font-display text-lg bg-pink-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
965            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-pink-400 opacity-80">
966              50
967            </span>
968          </button>
969      </div>
970      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
971        <a href="/rose" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Rose</a>
972          <button ontouchstart="" data-color="bg-rose-950" data-hex="#4c0519" data-oklch="oklch(0.271 0.105 12.094)" aria-label="bg-rose-950" class="transition-all duration-200 font-display text-lg bg-rose-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
973            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
974              950
975            </span>
976          </button>
977          <button ontouchstart="" data-color="bg-rose-900" data-hex="#881337" data-oklch="oklch(0.41 0.159 10.272)" aria-label="bg-rose-900" class="transition-all duration-200 font-display text-lg bg-rose-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
978            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
979              900
980            </span>
981          </button>
982          <button ontouchstart="" data-color="bg-rose-800" data-hex="#9f1239" data-oklch="oklch(0.455 0.188 13.697)" aria-label="bg-rose-800" class="transition-all duration-200 font-display text-lg bg-rose-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
983            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
984              800
985            </span>
986          </button>
987          <button ontouchstart="" data-color="bg-rose-700" data-hex="#be123c" data-oklch="oklch(0.514 0.222 16.935)" aria-label="bg-rose-700" class="transition-all duration-200 font-display text-lg bg-rose-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
988            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
989              700
990            </span>
991          </button>
992          <button ontouchstart="" data-color="bg-rose-600" data-hex="#e11d48" data-oklch="oklch(0.586 0.253 17.585)" aria-label="bg-rose-600" class="transition-all duration-200 font-display text-lg bg-rose-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
993            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
994              600
995            </span>
996          </button>
997          <button ontouchstart="" data-color="bg-rose-500" data-hex="#f43f5e" data-oklch="oklch(0.645 0.246 16.439)" aria-label="bg-rose-500" class="transition-all duration-200 font-display text-lg bg-rose-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
998            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
999              500
1000            </span>
1001          </button>
1002          <button ontouchstart="" data-color="bg-rose-400" data-hex="#fb7185" data-oklch="oklch(0.712 0.194 13.428)" aria-label="bg-rose-400" class="transition-all duration-200 font-display text-lg bg-rose-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1003            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-rose-800 opacity-80">
1004              400
1005            </span>
1006          </button>
1007          <button ontouchstart="" data-color="bg-rose-300" data-hex="#fda4af" data-oklch="oklch(0.81 0.117 11.638)" aria-label="bg-rose-300" class="transition-all duration-200 font-display text-lg bg-rose-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1008            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-rose-700 opacity-80">
1009              300
1010            </span>
1011          </button>
1012          <button ontouchstart="" data-color="bg-rose-200" data-hex="#fecdd3" data-oklch="oklch(0.892 0.058 10.001)" aria-label="bg-rose-200" class="transition-all duration-200 font-display text-lg bg-rose-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1013            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-rose-600 opacity-80">
1014              200
1015            </span>
1016          </button>
1017          <button ontouchstart="" data-color="bg-rose-100" data-hex="#ffe4e6" data-oklch="oklch(0.941 0.03 12.58)" aria-label="bg-rose-100" class="transition-all duration-200 font-display text-lg bg-rose-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1018            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-rose-500 opacity-80">
1019              100
1020            </span>
1021          </button>
1022          <button ontouchstart="" data-color="bg-rose-50" data-hex="#fff1f2" data-oklch="oklch(0.969 0.015 12.422)" aria-label="bg-rose-50" class="transition-all duration-200 font-display text-lg bg-rose-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1023            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-rose-400 opacity-80">
1024              50
1025            </span>
1026          </button>
1027      </div>
1028      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1029        <a href="/slate" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Slate</a>
1030          <button ontouchstart="" data-color="bg-slate-950" data-hex="#020617" data-oklch="oklch(0.129 0.042 264.695)" aria-label="bg-slate-950" class="transition-all duration-200 font-display text-lg bg-slate-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1031            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1032              950
1033            </span>
1034          </button>
1035          <button ontouchstart="" data-color="bg-slate-900" data-hex="#0f172a" data-oklch="oklch(0.208 0.042 265.755)" aria-label="bg-slate-900" class="transition-all duration-200 font-display text-lg bg-slate-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1036            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1037              900
1038            </span>
1039          </button>
1040          <button ontouchstart="" data-color="bg-slate-800" data-hex="#1e293b" data-oklch="oklch(0.279 0.041 260.031)" aria-label="bg-slate-800" class="transition-all duration-200 font-display text-lg bg-slate-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1041            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1042              800
1043            </span>
1044          </button>
1045          <button ontouchstart="" data-color="bg-slate-700" data-hex="#334155" data-oklch="oklch(0.372 0.044 257.287)" aria-label="bg-slate-700" class="transition-all duration-200 font-display text-lg bg-slate-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1046            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1047              700
1048            </span>
1049          </button>
1050          <button ontouchstart="" data-color="bg-slate-600" data-hex="#475569" data-oklch="oklch(0.446 0.043 257.281)" aria-label="bg-slate-600" class="transition-all duration-200 font-display text-lg bg-slate-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1051            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1052              600
1053            </span>
1054          </button>
1055          <button ontouchstart="" data-color="bg-slate-500" data-hex="#64748b" data-oklch="oklch(0.554 0.046 257.417)" aria-label="bg-slate-500" class="transition-all duration-200 font-display text-lg bg-slate-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1056            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1057              500
1058            </span>
1059          </button>
1060          <button ontouchstart="" data-color="bg-slate-400" data-hex="#94a3b8" data-oklch="oklch(0.704 0.04 256.788)" aria-label="bg-slate-400" class="transition-all duration-200 font-display text-lg bg-slate-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1061            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-slate-800 opacity-80">
1062              400
1063            </span>
1064          </button>
1065          <button ontouchstart="" data-color="bg-slate-300" data-hex="#cbd5e1" data-oklch="oklch(0.869 0.022 252.894)" aria-label="bg-slate-300" class="transition-all duration-200 font-display text-lg bg-slate-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1066            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-slate-700 opacity-80">
1067              300
1068            </span>
1069          </button>
1070          <button ontouchstart="" data-color="bg-slate-200" data-hex="#e2e8f0" data-oklch="oklch(0.929 0.013 255.508)" aria-label="bg-slate-200" class="transition-all duration-200 font-display text-lg bg-slate-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1071            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-slate-600 opacity-80">
1072              200
1073            </span>
1074          </button>
1075          <button ontouchstart="" data-color="bg-slate-100" data-hex="#f1f5f9" data-oklch="oklch(0.968 0.007 247.896)" aria-label="bg-slate-100" class="transition-all duration-200 font-display text-lg bg-slate-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1076            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-slate-500 opacity-80">
1077              100
1078            </span>
1079          </button>
1080          <button ontouchstart="" data-color="bg-slate-50" data-hex="#f8fafc" data-oklch="oklch(0.984 0.003 247.858)" aria-label="bg-slate-50" class="transition-all duration-200 font-display text-lg bg-slate-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1081            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-slate-400 opacity-80">
1082              50
1083            </span>
1084          </button>
1085      </div>
1086      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1087        <a href="/gray" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Gray</a>
1088          <button ontouchstart="" data-color="bg-gray-950" data-hex="#030712" data-oklch="oklch(0.13 0.028 261.692)" aria-label="bg-gray-950" class="transition-all duration-200 font-display text-lg bg-gray-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1089            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1090              950
1091            </span>
1092          </button>
1093          <button ontouchstart="" data-color="bg-gray-900" data-hex="#111827" data-oklch="oklch(0.21 0.034 264.665)" aria-label="bg-gray-900" class="transition-all duration-200 font-display text-lg bg-gray-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1094            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1095              900
1096            </span>
1097          </button>
1098          <button ontouchstart="" data-color="bg-gray-800" data-hex="#1f2937" data-oklch="oklch(0.278 0.033 256.848)" aria-label="bg-gray-800" class="transition-all duration-200 font-display text-lg bg-gray-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1099            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1100              800
1101            </span>
1102          </button>
1103          <button ontouchstart="" data-color="bg-gray-700" data-hex="#374151" data-oklch="oklch(0.373 0.034 259.733)" aria-label="bg-gray-700" class="transition-all duration-200 font-display text-lg bg-gray-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1104            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1105              700
1106            </span>
1107          </button>
1108          <button ontouchstart="" data-color="bg-gray-600" data-hex="#4b5563" data-oklch="oklch(0.446 0.03 256.802)" aria-label="bg-gray-600" class="transition-all duration-200 font-display text-lg bg-gray-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1109            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1110              600
1111            </span>
1112          </button>
1113          <button ontouchstart="" data-color="bg-gray-500" data-hex="#6b7280" data-oklch="oklch(0.551 0.027 264.364)" aria-label="bg-gray-500" class="transition-all duration-200 font-display text-lg bg-gray-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1114            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1115              500
1116            </span>
1117          </button>
1118          <button ontouchstart="" data-color="bg-gray-400" data-hex="#9ca3af" data-oklch="oklch(0.707 0.022 261.325)" aria-label="bg-gray-400" class="transition-all duration-200 font-display text-lg bg-gray-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1119            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-gray-800 opacity-80">
1120              400
1121            </span>
1122          </button>
1123          <button ontouchstart="" data-color="bg-gray-300" data-hex="#d1d5db" data-oklch="oklch(0.872 0.01 258.338)" aria-label="bg-gray-300" class="transition-all duration-200 font-display text-lg bg-gray-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1124            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-gray-700 opacity-80">
1125              300
1126            </span>
1127          </button>
1128          <button ontouchstart="" data-color="bg-gray-200" data-hex="#e5e7eb" data-oklch="oklch(0.928 0.006 264.531)" aria-label="bg-gray-200" class="transition-all duration-200 font-display text-lg bg-gray-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1129            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-gray-600 opacity-80">
1130              200
1131            </span>
1132          </button>
1133          <button ontouchstart="" data-color="bg-gray-100" data-hex="#f3f4f6" data-oklch="oklch(0.967 0.003 264.542)" aria-label="bg-gray-100" class="transition-all duration-200 font-display text-lg bg-gray-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1134            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-gray-500 opacity-80">
1135              100
1136            </span>
1137          </button>
1138          <button ontouchstart="" data-color="bg-gray-50" data-hex="#f9fafb" data-oklch="oklch(0.985 0.002 247.839)" aria-label="bg-gray-50" class="transition-all duration-200 font-display text-lg bg-gray-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1139            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-gray-400 opacity-80">
1140              50
1141            </span>
1142          </button>
1143      </div>
1144      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1145        <a href="/zinc" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Zinc</a>
1146          <button ontouchstart="" data-color="bg-zinc-950" data-hex="#09090b" data-oklch="oklch(0.141 0.005 285.823)" aria-label="bg-zinc-950" class="transition-all duration-200 font-display text-lg bg-zinc-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1147            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1148              950
1149            </span>
1150          </button>
1151          <button ontouchstart="" data-color="bg-zinc-900" data-hex="#18181b" data-oklch="oklch(0.21 0.006 285.885)" aria-label="bg-zinc-900" class="transition-all duration-200 font-display text-lg bg-zinc-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1152            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1153              900
1154            </span>
1155          </button>
1156          <button ontouchstart="" data-color="bg-zinc-800" data-hex="#27272a" data-oklch="oklch(0.274 0.006 286.033)" aria-label="bg-zinc-800" class="transition-all duration-200 font-display text-lg bg-zinc-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1157            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1158              800
1159            </span>
1160          </button>
1161          <button ontouchstart="" data-color="bg-zinc-700" data-hex="#3f3f46" data-oklch="oklch(0.37 0.013 285.805)" aria-label="bg-zinc-700" class="transition-all duration-200 font-display text-lg bg-zinc-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1162            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1163              700
1164            </span>
1165          </button>
1166          <button ontouchstart="" data-color="bg-zinc-600" data-hex="#52525b" data-oklch="oklch(0.442 0.017 285.786)" aria-label="bg-zinc-600" class="transition-all duration-200 font-display text-lg bg-zinc-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1167            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1168              600
1169            </span>
1170          </button>
1171          <button ontouchstart="" data-color="bg-zinc-500" data-hex="#71717a" data-oklch="oklch(0.552 0.016 285.938)" aria-label="bg-zinc-500" class="transition-all duration-200 font-display text-lg bg-zinc-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1172            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1173              500
1174            </span>
1175          </button>
1176          <button ontouchstart="" data-color="bg-zinc-400" data-hex="#a1a1aa" data-oklch="oklch(0.705 0.015 286.067)" aria-label="bg-zinc-400" class="transition-all duration-200 font-display text-lg bg-zinc-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1177            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-zinc-800 opacity-80">
1178              400
1179            </span>
1180          </button>
1181          <button ontouchstart="" data-color="bg-zinc-300" data-hex="#d4d4d8" data-oklch="oklch(0.871 0.006 286.286)" aria-label="bg-zinc-300" class="transition-all duration-200 font-display text-lg bg-zinc-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1182            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-zinc-700 opacity-80">
1183              300
1184            </span>
1185          </button>
1186          <button ontouchstart="" data-color="bg-zinc-200" data-hex="#e4e4e7" data-oklch="oklch(0.92 0.004 286.32)" aria-label="bg-zinc-200" class="transition-all duration-200 font-display text-lg bg-zinc-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1187            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-zinc-600 opacity-80">
1188              200
1189            </span>
1190          </button>
1191          <button ontouchstart="" data-color="bg-zinc-100" data-hex="#f4f4f5" data-oklch="oklch(0.967 0.001 286.375)" aria-label="bg-zinc-100" class="transition-all duration-200 font-display text-lg bg-zinc-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1192            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-zinc-500 opacity-80">
1193              100
1194            </span>
1195          </button>
1196          <button ontouchstart="" data-color="bg-zinc-50" data-hex="#fafafa" data-oklch="oklch(0.985 0 0)" aria-label="bg-zinc-50" class="transition-all duration-200 font-display text-lg bg-zinc-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1197            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-zinc-400 opacity-80">
1198              50
1199            </span>
1200          </button>
1201      </div>
1202      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1203        <a href="/neutral" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Neutral</a>
1204          <button ontouchstart="" data-color="bg-neutral-950" data-hex="#0a0a0a" data-oklch="oklch(0.145 0 0)" aria-label="bg-neutral-950" class="transition-all duration-200 font-display text-lg bg-neutral-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1205            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1206              950
1207            </span>
1208          </button>
1209          <button ontouchstart="" data-color="bg-neutral-900" data-hex="#171717" data-oklch="oklch(0.205 0 0)" aria-label="bg-neutral-900" class="transition-all duration-200 font-display text-lg bg-neutral-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1210            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1211              900
1212            </span>
1213          </button>
1214          <button ontouchstart="" data-color="bg-neutral-800" data-hex="#262626" data-oklch="oklch(0.269 0 0)" aria-label="bg-neutral-800" class="transition-all duration-200 font-display text-lg bg-neutral-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1215            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1216              800
1217            </span>
1218          </button>
1219          <button ontouchstart="" data-color="bg-neutral-700" data-hex="#404040" data-oklch="oklch(0.371 0 0)" aria-label="bg-neutral-700" class="transition-all duration-200 font-display text-lg bg-neutral-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1220            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1221              700
1222            </span>
1223          </button>
1224          <button ontouchstart="" data-color="bg-neutral-600" data-hex="#525252" data-oklch="oklch(0.439 0 0)" aria-label="bg-neutral-600" class="transition-all duration-200 font-display text-lg bg-neutral-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1225            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1226              600
1227            </span>
1228          </button>
1229          <button ontouchstart="" data-color="bg-neutral-500" data-hex="#737373" data-oklch="oklch(0.556 0 0)" aria-label="bg-neutral-500" class="transition-all duration-200 font-display text-lg bg-neutral-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1230            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1231              500
1232            </span>
1233          </button>
1234          <button ontouchstart="" data-color="bg-neutral-400" data-hex="#a3a3a3" data-oklch="oklch(0.708 0 0)" aria-label="bg-neutral-400" class="transition-all duration-200 font-display text-lg bg-neutral-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1235            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-neutral-800 opacity-80">
1236              400
1237            </span>
1238          </button>
1239          <button ontouchstart="" data-color="bg-neutral-300" data-hex="#d4d4d4" data-oklch="oklch(0.87 0 0)" aria-label="bg-neutral-300" class="transition-all duration-200 font-display text-lg bg-neutral-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1240            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-neutral-700 opacity-80">
1241              300
1242            </span>
1243          </button>
1244          <button ontouchstart="" data-color="bg-neutral-200" data-hex="#e5e5e5" data-oklch="oklch(0.922 0 0)" aria-label="bg-neutral-200" class="transition-all duration-200 font-display text-lg bg-neutral-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1245            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-neutral-600 opacity-80">
1246              200
1247            </span>
1248          </button>
1249          <button ontouchstart="" data-color="bg-neutral-100" data-hex="#f5f5f5" data-oklch="oklch(0.97 0 0)" aria-label="bg-neutral-100" class="transition-all duration-200 font-display text-lg bg-neutral-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1250            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-neutral-500 opacity-80">
1251              100
1252            </span>
1253          </button>
1254          <button ontouchstart="" data-color="bg-neutral-50" data-hex="#fafafa" data-oklch="oklch(0.985 0 0)" aria-label="bg-neutral-50" class="transition-all duration-200 font-display text-lg bg-neutral-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1255            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-neutral-400 opacity-80">
1256              50
1257            </span>
1258          </button>
1259      </div>
1260      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1261        <a href="/stone" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Stone</a>
1262          <button ontouchstart="" data-color="bg-stone-950" data-hex="#0c0a09" data-oklch="oklch(0.147 0.004 49.25)" aria-label="bg-stone-950" class="transition-all duration-200 font-display text-lg bg-stone-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1263            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1264              950
1265            </span>
1266          </button>
1267          <button ontouchstart="" data-color="bg-stone-900" data-hex="#1c1917" data-oklch="oklch(0.216 0.006 56.043)" aria-label="bg-stone-900" class="transition-all duration-200 font-display text-lg bg-stone-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1268            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1269              900
1270            </span>
1271          </button>
1272          <button ontouchstart="" data-color="bg-stone-800" data-hex="#292524" data-oklch="oklch(0.268 0.007 34.298)" aria-label="bg-stone-800" class="transition-all duration-200 font-display text-lg bg-stone-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1273            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1274              800
1275            </span>
1276          </button>
1277          <button ontouchstart="" data-color="bg-stone-700" data-hex="#44403c" data-oklch="oklch(0.374 0.01 67.558)" aria-label="bg-stone-700" class="transition-all duration-200 font-display text-lg bg-stone-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1278            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1279              700
1280            </span>
1281          </button>
1282          <button ontouchstart="" data-color="bg-stone-600" data-hex="#57534e" data-oklch="oklch(0.444 0.011 73.639)" aria-label="bg-stone-600" class="transition-all duration-200 font-display text-lg bg-stone-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1283            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1284              600
1285            </span>
1286          </button>
1287          <button ontouchstart="" data-color="bg-stone-500" data-hex="#78716c" data-oklch="oklch(0.553 0.013 58.071)" aria-label="bg-stone-500" class="transition-all duration-200 font-display text-lg bg-stone-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1288            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1289              500
1290            </span>
1291          </button>
1292          <button ontouchstart="" data-color="bg-stone-400" data-hex="#a8a29e" data-oklch="oklch(0.709 0.01 56.259)" aria-label="bg-stone-400" class="transition-all duration-200 font-display text-lg bg-stone-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1293            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-stone-800 opacity-80">
1294              400
1295            </span>
1296          </button>
1297          <button ontouchstart="" data-color="bg-stone-300" data-hex="#d6d3d1" data-oklch="oklch(0.869 0.005 56.366)" aria-label="bg-stone-300" class="transition-all duration-200 font-display text-lg bg-stone-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1298            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-stone-700 opacity-80">
1299              300
1300            </span>
1301          </button>
1302          <button ontouchstart="" data-color="bg-stone-200" data-hex="#e7e5e4" data-oklch="oklch(0.923 0.003 48.717)" aria-label="bg-stone-200" class="transition-all duration-200 font-display text-lg bg-stone-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1303            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-stone-600 opacity-80">
1304              200
1305            </span>
1306          </button>
1307          <button ontouchstart="" data-color="bg-stone-100" data-hex="#f5f5f4" data-oklch="oklch(0.97 0.001 106.424)" aria-label="bg-stone-100" class="transition-all duration-200 font-display text-lg bg-stone-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1308            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-stone-500 opacity-80">
1309              100
1310            </span>
1311          </button>
1312          <button ontouchstart="" data-color="bg-stone-50" data-hex="#fafaf9" data-oklch="oklch(0.985 0.001 106.423)" aria-label="bg-stone-50" class="transition-all duration-200 font-display text-lg bg-stone-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1313            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-stone-400 opacity-80">
1314              50
1315            </span>
1316          </button>
1317      </div>
1318      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1319        <a href="/taupe" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Taupe</a>
1320          <button ontouchstart="" data-color="bg-taupe-950" data-hex="#0c0a09" data-oklch="oklch(0.147 0.004 49.3)" aria-label="bg-taupe-950" class="transition-all duration-200 font-display text-lg bg-taupe-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1321            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1322              950
1323            </span>
1324          </button>
1325          <button ontouchstart="" data-color="bg-taupe-900" data-hex="#1d1816" data-oklch="oklch(0.214 0.009 43.1)" aria-label="bg-taupe-900" class="transition-all duration-200 font-display text-lg bg-taupe-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1326            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1327              900
1328            </span>
1329          </button>
1330          <button ontouchstart="" data-color="bg-taupe-800" data-hex="#2b2422" data-oklch="oklch(0.268 0.011 36.5)" aria-label="bg-taupe-800" class="transition-all duration-200 font-display text-lg bg-taupe-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1331            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1332              800
1333            </span>
1334          </button>
1335          <button ontouchstart="" data-color="bg-taupe-700" data-hex="#473c39" data-oklch="oklch(0.367 0.016 35.7)" aria-label="bg-taupe-700" class="transition-all duration-200 font-display text-lg bg-taupe-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1336            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1337              700
1338            </span>
1339          </button>
1340          <button ontouchstart="" data-color="bg-taupe-600" data-hex="#5b4f4b" data-oklch="oklch(0.438 0.017 39.3)" aria-label="bg-taupe-600" class="transition-all duration-200 font-display text-lg bg-taupe-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1341            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1342              600
1343            </span>
1344          </button>
1345          <button ontouchstart="" data-color="bg-taupe-500" data-hex="#7c6d67" data-oklch="oklch(0.547 0.021 43.1)" aria-label="bg-taupe-500" class="transition-all duration-200 font-display text-lg bg-taupe-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1346            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1347              500
1348            </span>
1349          </button>
1350          <button ontouchstart="" data-color="bg-taupe-400" data-hex="#aba09c" data-oklch="oklch(0.714 0.014 41.2)" aria-label="bg-taupe-400" class="transition-all duration-200 font-display text-lg bg-taupe-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1351            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-taupe-800 opacity-80">
1352              400
1353            </span>
1354          </button>
1355          <button ontouchstart="" data-color="bg-taupe-300" data-hex="#d8d2d0" data-oklch="oklch(0.868 0.007 39.5)" aria-label="bg-taupe-300" class="transition-all duration-200 font-display text-lg bg-taupe-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1356            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-taupe-700 opacity-80">
1357              300
1358            </span>
1359          </button>
1360          <button ontouchstart="" data-color="bg-taupe-200" data-hex="#e8e4e3" data-oklch="oklch(0.922 0.005 34.3)" aria-label="bg-taupe-200" class="transition-all duration-200 font-display text-lg bg-taupe-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1361            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-taupe-600 opacity-80">
1362              200
1363            </span>
1364          </button>
1365          <button ontouchstart="" data-color="bg-taupe-100" data-hex="#f3f1f1" data-oklch="oklch(0.96 0.002 17.2)" aria-label="bg-taupe-100" class="transition-all duration-200 font-display text-lg bg-taupe-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1366            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-taupe-500 opacity-80">
1367              100
1368            </span>
1369          </button>
1370          <button ontouchstart="" data-color="bg-taupe-50" data-hex="#fbfaf9" data-oklch="oklch(0.986 0.002 67.8)" aria-label="bg-taupe-50" class="transition-all duration-200 font-display text-lg bg-taupe-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1371            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-taupe-400 opacity-80">
1372              50
1373            </span>
1374          </button>
1375      </div>
1376      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1377        <a href="/mauve" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Mauve</a>
1378          <button ontouchstart="" data-color="bg-mauve-950" data-hex="#0c090c" data-oklch="oklch(0.145 0.008 326)" aria-label="bg-mauve-950" class="transition-all duration-200 font-display text-lg bg-mauve-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1379            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1380              950
1381            </span>
1382          </button>
1383          <button ontouchstart="" data-color="bg-mauve-900" data-hex="#1d161e" data-oklch="oklch(0.212 0.019 322.12)" aria-label="bg-mauve-900" class="transition-all duration-200 font-display text-lg bg-mauve-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1384            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1385              900
1386            </span>
1387          </button>
1388          <button ontouchstart="" data-color="bg-mauve-800" data-hex="#2a212c" data-oklch="oklch(0.263 0.024 320.12)" aria-label="bg-mauve-800" class="transition-all duration-200 font-display text-lg bg-mauve-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1389            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1390              800
1391            </span>
1392          </button>
1393          <button ontouchstart="" data-color="bg-mauve-700" data-hex="#463947" data-oklch="oklch(0.364 0.029 323.89)" aria-label="bg-mauve-700" class="transition-all duration-200 font-display text-lg bg-mauve-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1394            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1395              700
1396            </span>
1397          </button>
1398          <button ontouchstart="" data-color="bg-mauve-600" data-hex="#594c5b" data-oklch="oklch(0.435 0.029 321.78)" aria-label="bg-mauve-600" class="transition-all duration-200 font-display text-lg bg-mauve-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1399            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1400              600
1401            </span>
1402          </button>
1403          <button ontouchstart="" data-color="bg-mauve-500" data-hex="#79697b" data-oklch="oklch(0.542 0.034 322.5)" aria-label="bg-mauve-500" class="transition-all duration-200 font-display text-lg bg-mauve-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1404            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1405              500
1406            </span>
1407          </button>
1408          <button ontouchstart="" data-color="bg-mauve-400" data-hex="#a89ea9" data-oklch="oklch(0.711 0.019 323.02)" aria-label="bg-mauve-400" class="transition-all duration-200 font-display text-lg bg-mauve-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1409            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mauve-800 opacity-80">
1410              400
1411            </span>
1412          </button>
1413          <button ontouchstart="" data-color="bg-mauve-300" data-hex="#d7d0d7" data-oklch="oklch(0.865 0.012 325.68)" aria-label="bg-mauve-300" class="transition-all duration-200 font-display text-lg bg-mauve-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1414            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mauve-700 opacity-80">
1415              300
1416            </span>
1417          </button>
1418          <button ontouchstart="" data-color="bg-mauve-200" data-hex="#e7e4e7" data-oklch="oklch(0.922 0.005 325.62)" aria-label="bg-mauve-200" class="transition-all duration-200 font-display text-lg bg-mauve-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1419            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mauve-600 opacity-80">
1420              200
1421            </span>
1422          </button>
1423          <button ontouchstart="" data-color="bg-mauve-100" data-hex="#f3f1f3" data-oklch="oklch(0.96 0.003 325.6)" aria-label="bg-mauve-100" class="transition-all duration-200 font-display text-lg bg-mauve-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1424            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mauve-500 opacity-80">
1425              100
1426            </span>
1427          </button>
1428          <button ontouchstart="" data-color="bg-mauve-50" data-hex="#fafafa" data-oklch="oklch(0.985 0 0)" aria-label="bg-mauve-50" class="transition-all duration-200 font-display text-lg bg-mauve-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1429            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mauve-400 opacity-80">
1430              50
1431            </span>
1432          </button>
1433      </div>
1434      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1435        <a href="/mist" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Mist</a>
1436          <button ontouchstart="" data-color="bg-mist-950" data-hex="#090b0c" data-oklch="oklch(0.148 0.004 228.8)" aria-label="bg-mist-950" class="transition-all duration-200 font-display text-lg bg-mist-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1437            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1438              950
1439            </span>
1440          </button>
1441          <button ontouchstart="" data-color="bg-mist-900" data-hex="#161b1d" data-oklch="oklch(0.218 0.008 223.9)" aria-label="bg-mist-900" class="transition-all duration-200 font-display text-lg bg-mist-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1442            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1443              900
1444            </span>
1445          </button>
1446          <button ontouchstart="" data-color="bg-mist-800" data-hex="#22292b" data-oklch="oklch(0.275 0.011 216.9)" aria-label="bg-mist-800" class="transition-all duration-200 font-display text-lg bg-mist-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1447            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1448              800
1449            </span>
1450          </button>
1451          <button ontouchstart="" data-color="bg-mist-700" data-hex="#394447" data-oklch="oklch(0.378 0.015 216)" aria-label="bg-mist-700" class="transition-all duration-200 font-display text-lg bg-mist-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1452            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1453              700
1454            </span>
1455          </button>
1456          <button ontouchstart="" data-color="bg-mist-600" data-hex="#4b585b" data-oklch="oklch(0.45 0.017 213.2)" aria-label="bg-mist-600" class="transition-all duration-200 font-display text-lg bg-mist-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1457            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1458              600
1459            </span>
1460          </button>
1461          <button ontouchstart="" data-color="bg-mist-500" data-hex="#67787c" data-oklch="oklch(0.56 0.021 213.5)" aria-label="bg-mist-500" class="transition-all duration-200 font-display text-lg bg-mist-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1462            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1463              500
1464            </span>
1465          </button>
1466          <button ontouchstart="" data-color="bg-mist-400" data-hex="#9ca8ab" data-oklch="oklch(0.723 0.014 214.4)" aria-label="bg-mist-400" class="transition-all duration-200 font-display text-lg bg-mist-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1467            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mist-800 opacity-80">
1468              400
1469            </span>
1470          </button>
1471          <button ontouchstart="" data-color="bg-mist-300" data-hex="#d0d6d8" data-oklch="oklch(0.872 0.007 219.6)" aria-label="bg-mist-300" class="transition-all duration-200 font-display text-lg bg-mist-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1472            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mist-700 opacity-80">
1473              300
1474            </span>
1475          </button>
1476          <button ontouchstart="" data-color="bg-mist-200" data-hex="#e3e7e8" data-oklch="oklch(0.925 0.005 214.3)" aria-label="bg-mist-200" class="transition-all duration-200 font-display text-lg bg-mist-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1477            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mist-600 opacity-80">
1478              200
1479            </span>
1480          </button>
1481          <button ontouchstart="" data-color="bg-mist-100" data-hex="#f1f3f3" data-oklch="oklch(0.963 0.002 197.1)" aria-label="bg-mist-100" class="transition-all duration-200 font-display text-lg bg-mist-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1482            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mist-500 opacity-80">
1483              100
1484            </span>
1485          </button>
1486          <button ontouchstart="" data-color="bg-mist-50" data-hex="#f9fbfb" data-oklch="oklch(0.987 0.002 197.1)" aria-label="bg-mist-50" class="transition-all duration-200 font-display text-lg bg-mist-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1487            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-mist-400 opacity-80">
1488              50
1489            </span>
1490          </button>
1491      </div>
1492      <div class="flex flex-row md:flex-col flex-1 space-y-1 md:space-y-0 h-full">
1493        <a href="/olive" class="hidden md:block hover:bg-stone-100 mb-2 px-0.5 rounded-md w-fit w-full font-display text-stone-900 hover:text-stone-950 text-center hover:underline tracking-tight">Olive</a>
1494          <button ontouchstart="" data-color="bg-olive-950" data-hex="#0c0c09" data-oklch="oklch(0.153 0.006 107.1)" aria-label="bg-olive-950" class="transition-all duration-200 font-display text-lg bg-olive-950 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1495            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1496              950
1497            </span>
1498          </button>
1499          <button ontouchstart="" data-color="bg-olive-900" data-hex="#1d1d16" data-oklch="oklch(0.228 0.013 107.4)" aria-label="bg-olive-900" class="transition-all duration-200 font-display text-lg bg-olive-900 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1500            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1501              900
1502            </span>
1503          </button>
1504          <button ontouchstart="" data-color="bg-olive-800" data-hex="#2b2b22" data-oklch="oklch(0.286 0.016 107.4)" aria-label="bg-olive-800" class="transition-all duration-200 font-display text-lg bg-olive-800 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1505            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1506              800
1507            </span>
1508          </button>
1509          <button ontouchstart="" data-color="bg-olive-700" data-hex="#474739" data-oklch="oklch(0.394 0.023 107.4)" aria-label="bg-olive-700" class="transition-all duration-200 font-display text-lg bg-olive-700 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1510            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1511              700
1512            </span>
1513          </button>
1514          <button ontouchstart="" data-color="bg-olive-600" data-hex="#5b5b4b" data-oklch="oklch(0.466 0.025 107.3)" aria-label="bg-olive-600" class="transition-all duration-200 font-display text-lg bg-olive-600 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1515            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1516              600
1517            </span>
1518          </button>
1519          <button ontouchstart="" data-color="bg-olive-500" data-hex="#7c7c67" data-oklch="oklch(0.58 0.031 107.3)" aria-label="bg-olive-500" class="transition-all duration-200 font-display text-lg bg-olive-500 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative text-white/85">
1520            <span class="hidden absolute inset-0 group-hover:flex justify-center items-center font-bold tracking-tight mix-blend-overlay">
1521              500
1522            </span>
1523          </button>
1524          <button ontouchstart="" data-color="bg-olive-400" data-hex="#abab9c" data-oklch="oklch(0.737 0.021 106.9)" aria-label="bg-olive-400" class="transition-all duration-200 font-display text-lg bg-olive-400 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1525            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-olive-800 opacity-80">
1526              400
1527            </span>
1528          </button>
1529          <button ontouchstart="" data-color="bg-olive-300" data-hex="#d8d8d0" data-oklch="oklch(0.88 0.011 106.6)" aria-label="bg-olive-300" class="transition-all duration-200 font-display text-lg bg-olive-300 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1530            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-olive-700 opacity-80">
1531              300
1532            </span>
1533          </button>
1534          <button ontouchstart="" data-color="bg-olive-200" data-hex="#e8e8e3" data-oklch="oklch(0.93 0.007 106.5)" aria-label="bg-olive-200" class="transition-all duration-200 font-display text-lg bg-olive-200 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1535            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-olive-600 opacity-80">
1536              200
1537            </span>
1538          </button>
1539          <button ontouchstart="" data-color="bg-olive-100" data-hex="#f4f4f0" data-oklch="oklch(0.966 0.005 106.5)" aria-label="bg-olive-100" class="transition-all duration-200 font-display text-lg bg-olive-100 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1540            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-olive-500 opacity-80">
1541              100
1542            </span>
1543          </button>
1544          <button ontouchstart="" data-color="bg-olive-50" data-hex="#fbfbf9" data-oklch="oklch(0.988 0.003 106.5)" aria-label="bg-olive-50" class="transition-all duration-200 font-display text-lg bg-olive-50 group flex-grow active:scale-80 min-h-10 flex items-center justify-center cursor-pointer relative">
1545            <span class="hidden group-hover:flex tracking-tight absolute inset-0 items-center justify-center font-bold text-transparent bg-clip-text bg-olive-400 opacity-80">
1546              50
1547            </span>
1548          </button>
1549      </div>
1550  </div>
1551  <div class="min-h-24">
1552    <div class="flex md:flex-row flex-col justify-between items-between md:items-center space-y-2 mt-8 py-2 md:py-0">
1553  <div class="flex md:flex-row flex-col items-start md:items-center gap-x-4 space-y-2 md:space-y-0">
1554    <div class="">
1555      <label class="font-medium" for="copyFormat">copy:</label>
1556      <select id="copyFormat" class="bg-stone-100 hover:bg-stone-200 px-2 py-1 rounded focus:outline-0 font-mono">
1557        <option data-hotkey="t" value="tailwind">ⓣ tailwind</option>
1558        <option data-hotkey="h" value="hex">ⓗ hex</option>
1559        <option data-hotkey="o" value="oklch">ⓞ oklch</option>
1560      </select>
1561    </div>
1562    <span class="hidden md:block">//</span>
1563    <div id="copySection" class="flex items-center gap-x-2 font-medium md:z-3">
1564      <div id="copySwatch" class="rounded-xs size-4" hidden></div>
1565      <p id="copyText" class="flex-1">🎨 Click any Tailwind CSS color to copy it.</p>
1566    </div>
1567  </div>
1568  <div class="">
1569      <a class="hover:text-stone-950 hover:underline cursor-pointer" target="_blank" href="https://tailwindcss.com/docs/colors">
1570        tailwindcss v4 color docs ↗
1571      </a>
1572  </div>
1573</div>
1574
1575  </div>
1576</div>
1577<footer class="mx-auto mt-4 md:mt-8 border-stone-200 border-t rounded-t-sm w-full">
1578  <div class="md:flex space-x-8 space-y-8 mx-auto py-6">
1579    <div  class='flex flex-col'>
1580      <p class="mb-1 font-medium text-stone-700 text-xs tracking-wide">Home</p>
1581        <a href="/" target="_blank" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind 4 Color Palette</a>
1582        <a href="/tools/closest-tailwind-color" target="_blank" class="text-stone-500 text-xs hover:underline tracking-tight">
1582Closest Tailwind Color Finder</a>
1583        <a href="https://chromewebstore.google.com/detail/tailcolors-tailwind-css-c/agjdmlmepbilagimjkmffoinkoackego" target="_blank" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Color Palette Chrome Extension</a>
1584        <a href="https://startupfa.me/s/tailcolors?utm_source=tailcolors.com" target="_blank" class="text-stone-500 text-xs hover:underline tracking-tight">Featured on Startup Fame</a>
1585        <a href="https://twelve.tools" target="_blank" class="text-stone-500 text-xs hover:underline tracking-tight">Featured on Twelve Tools</a>
1586        <a href="https://attendlist.com" target="_blank" class="text-stone-500 text-xs hover:underline tracking-tight">AttendList: Google Meet Attendance Tracker</a>
1587    </div>
1588    <div class="flex flex-col">
1589      <p class="mb-1 font-medium text-stone-700 text-xs tracking-wide">Tailwind Colors (gradient & ui examples):</p>
1590      <div class="gap-x-3 grid grid-cols-2 md:grid-cols-4">
1591          <a href="/red" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Red Color</a>
1592          <a href="/orange" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Orange Color</a>
1593          <a href="/amber" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Amber Color</a>
1594          <a href="/yellow" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Yellow Color</a>
1595          <a href="/lime" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Lime Color</a>
1596          <a href="/green" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Green Color</a>
1597          <a href="/emerald" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Emerald Color</a>
1598          <a href="/teal" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Teal Color</a>
1599          <a href="/cyan" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Cyan Color</a>
1600          <a href="/sky" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Sky Color</a>
1601          <a href="/blue" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Blue Color</a>
1602          <a href="/indigo" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Indigo Color</a>
1603          <a href="/violet" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Violet Color</a>
1604          <a href="/purple" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Purple Color</a>
1605          <a href="/fuchsia" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Fuchsia Color</a>
1606          <a href="/pink" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Pink Color</a>
1607          <a href="/rose" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Rose Color</a>
1608          <a href="/slate" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Slate Color</a>
1609          <a href="/gray" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Gray Color</a>
1610          <a href="/zinc" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Zinc Color</a>
1611          <a href="/neutral" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Neutral Color</a>
1612          <a href="/stone" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Stone Color</a>
1613          <a href="/taupe" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Taupe Color</a>
1614          <a href="/mauve" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Mauve Color</a>
1615          <a href="/mist" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Mist Color</a>
1616          <a href="/olive" class="text-stone-500 text-xs hover:underline tracking-tight">Tailwind Olive Color</a>
1617      </div>
1618    </div>
1619  </div>
1620  <div class="flex flex-col">
1621    <p class="mb-1 text-stone-700 text-xs">&copy; 2026 // TailwindCSS OKLCH color palette & tools by Tailcolors. Built with <3 by <a target="_blank" href="https://harrisonbroadbent.com/about"><span class="font-medium">harrison</span>.</a> </p>
1622  </div>
1623</footer>
1624
1625
1626  
1626<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"8fd034f5789041f4a683dd799aaf95c4","r":1,"spa":2}' crossorigin="anonymous"></script>
1626
1627</body>
1628</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.