Color Picker
AI Pass+input
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Input component
About Color Picker
An iOS-style color picker with grid, spectrum, and RGB slider tabs, an opacity control, a hex input with alpha, and saved swatches — fully token-driven and design-system agnostic.
Features
- Three input modes in a segmented tab: grid palette, spectrum canvas, and RGB sliders
- Sliding tab indicator that animates between the three modes
- Spectrum canvas with draggable saturation/value cursor and a hue slider
- RGB sliders paired with numeric inputs kept in sync
- Opacity slider with a live percentage readout and checkerboard track
- Hex input with 6- or 8-digit (alpha) parsing and a copy-to-clipboard button
- Saved swatches you can add from the current color and remove via right-click
Accessibility
- ARIA labels
- Tab, slider, numeric input, copy, and swatch controls carry
aria-labelvalues - Named swatches
- Grid cells and saved swatches expose their hex value via
aria-label - Native inputs
- Range and number inputs are keyboard operable and labeled
- Decorative icons
- Inline SVG glyphs are presentational within labeled buttons
- Reduced motion
prefers-reduced-motion: reducedisables tab and panel transitions
Customise it with AI
Open Color Picker in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Spec Sheet
VanillaReact
Machined field specimens on a cool ground: boxed inputs annotated with monospace serials, type tags, and live state ticks, held by a single accent. Leading icons, clear buttons, password reveal, a counted textarea, and live per-field validation announced through aria-live.
#input#validation#password
One-Time Code Input
VanillaReact
A one-time code input for sign-ins, 2FA and email verification. Six digit boxes share one real input, a focus ring glides to the next box as you type, the texted code arrives with an Autofill chip, a wrong code shakes and clears, and the right one ripples green box by box.
#input#login#password
Text Input
VanillaReact
Token-driven text inputs with a borderless bottom-line style, animated focus underlines, leading icons, password visibility toggles, live per-field validation, dark mode, and a responsive two-column layout.
#input#password#validation
Feature Toggles
ReactVanilla
A bare token-driven group of four AI feature switches — Streaming, Memory, JSON mode, and Tool use — with design-system accent tracks, sliding thumbs, live screen-reader announcements, and clickable row labels in both light and dark.
#input#toggle#switch
Date Picker
ReactVanilla
A transit-timetable date picker with full keyboard grid navigation, typed-date entry with inline validation, min and max bounds, disabled-day skipping, and a labelled, live-announced month heading — token-driven and design-system agnostic.
#input#keyboard
Tone Pad
VanillaReact
A token-driven 2D tone XY pad — a heatmap-tinted Formal–Casual by Concise–Verbose plane with a springy gradient dot driven by pointer-captured drag and arrow keys, a live tabular readout, crosshair guides, localStorage persistence, and a `getTone`/`setTone` API — themed by AI Steppers.
#input#slider
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
