Recipe: Color picker design

1. Layout

Use a 2-column grid on desktop. Left: preview swatch (160×160, rounded-xl, shadow-2xl). Right: hue slider + hex input stacked vertically with 12px gap.

2. Hue slider

Render a 100% width, 12px tall div with a linear-gradient background cycling through HSL hues at full saturation and 50% lightness. Overlay a white thumb (20×20 circle, border-2 border-[#8B5CF6]) positioned via percentage.

3. Hex input

Single-line text input, monospace font, 7-char maxlength. Prefix with a # glyph in zinc-500. Validate on blur: must match /^#[0-9a-fA-F]6$/. Show a 1px red border on invalid.

4. Preset swatches

Below the main controls, render a row of 8 small circles (28×28, gap-2). Fill with Meridian brand colors: #8B5CF6, #F472B6, #0A0612, #1E1B2E, #A78BFA, #F9A8D4, #7C3AED, #EC4899. Clicking a swatch sets the current color.

5. Accessibility

• All interactive elements receive focus-visible ring in #8B5CF6.
• Slider thumb is keyboard-operable (arrow keys ±5° hue).
• Hex input announces validity via aria-invalid.
• Contrast ratio ≥ 4.5:1 for all text against #0A0612.

6. State management

Keep hue (0–360), hex string, and selected preset index in a single useReducer. Derive HSL and RGB values with pure functions. Debounce hex input by 150ms before updating the preview swatch.