नया
कलर पिकरSwatch Grid Picker
A radiogroup of preset colour swatches where the choice is marked by a ring and a check, not colour alone.
#color#swatch#grid
3 फ्रेमवर्कशुरुआती
Loading…
A ten-step tint and shade ramp generated from one base colour by walking lightness.
<!--
A 10-step tint/shade ramp derived from one base colour by holding H and S and
walking lightness. Every step is a button whose label is its own hex, so the scale
is legible without hovering and each swatch announces its value. Static snapshot.
-->
<div class="w-full max-w-sm">
<div class="mb-3 flex items-center gap-3">
<input type="color" value="#3b82f6" aria-label="Base color" class="h-9 w-9 shrink-0 cursor-pointer rounded-lg border border-black/10 bg-transparent dark:border-white/15" />
<span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">Base #3b82f6</span>
</div>
<div class="grid grid-cols-5 gap-1.5 sm:grid-cols-10">
<button type="button" aria-label="#eff6ff" class="flex aspect-square items-end justify-center rounded-md border border-black/10 pb-0.5 text-[9px] font-medium text-gray-700 dark:border-white/15" style="background-color:#eff6ff">50</button>
<button type="button" aria-label="#3b82f6" class="flex aspect-square items-end justify-center rounded-md border border-black/10 pb-0.5 text-[9px] font-medium text-white dark:border-white/15" style="background-color:#3b82f6">500</button>
<button type="button" aria-label="#1e3a8a" class="flex aspect-square items-end justify-center rounded-md border border-black/10 pb-0.5 text-[9px] font-medium text-white dark:border-white/15" style="background-color:#1e3a8a">900</button>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
base | string | '#3b82f6' | Base |
onSelect | (hex: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
Pick a `base` and read chosen steps from `onSelect`. Hue and saturation are held from the base while only lightness moves, which is what keeps the ten swatches reading as one family rather than unrelated colours.