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">© 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.