--- title: "Color picker UI: anatomy, variants and examples | Kombai" description: "A color picker lets people choose a color from preset swatches, a spectrum or a typed hex code." canonical_url: https://kombai.com/glossary/color-picker/ author: "The Kombai Team" --- # Color picker A color picker lets people choose a color from preset swatches, a spectrum or a typed hex code. - Also called: colour picker, swatch picker - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/color-picker/), [30 mobile designs](https://kombai.com/gallery/mobile/color-picker/) - [Colours](https://kombai.com/gallery/inspirations/color-picker-ios-18/) (Mobile) - [Guest List](https://kombai.com/gallery/inspirations/color-picker-web-32/) (Web) - [Clepsydrine](https://kombai.com/gallery/inspirations/color-picker-ios-25/) (Mobile) ## What is a color picker? A color picker is a control for choosing a color. Most offer a short row or grid of preset swatches, and some add a spectrum, a hue slider and a hex field for any exact color. The choice shows right away on whatever it colors: a tag, a card, a theme or a shape. - The selected swatch gets a ring or a check, not only a color change. - Custom pickers pair a saturation square with a hue slider and a hex field. ## When to use color picker - **Color-coding.** Tags, stages, calendars and projects that people spot by color. - **Personalizing.** Accent colors, themes, cards and avatars. - **Design and editing.** Fill, text and backdrop colors in canvas, photo and video tools. ## When not to use one - **Color as the only signal.** A status still needs a label or an icon for people who can't tell colors apart. - **Fixed brand palettes.** Offer only the brand swatches, not a full spectrum. - **Unchecked text colors.** If people pick text and background colors, check the contrast or limit the choices. ## Anatomy 1. **Preview**: The color in use 2. **Swatches**: Preset colors 3. **Selected swatch**: Ring and check 4. **Hex field**: Any exact color 5. **Contrast check**: Text stays readable 6. **States**: Default, selected, focus, invalid hex ## Variants We sorted every color picker design in the Kombai gallery and found five patterns. ### 1. Swatch rows The default. A single line of four to twelve circles, for an accent, a label or an ink color. - [Skepwright](https://kombai.com/gallery/inspirations/color-picker-web-44/) (Web) - [Tourbillage](https://kombai.com/gallery/inspirations/color-picker-ios-22/) (Mobile) - [Squallmark](https://kombai.com/gallery/inspirations/color-picker-ios-8/) (Mobile) ### 2. Swatch grids Rows of tiles or circles in tints and shades, for backgrounds and palettes with more choices. - [Background](https://kombai.com/gallery/inspirations/color-picker-ios-2/) (Mobile) - [Quernstone](https://kombai.com/gallery/inspirations/color-picker-web-46/) (Web) - [Fill colour](https://kombai.com/gallery/inspirations/color-picker-web-48/) (Web) ### 3. Spectrum and wheel pickers A saturation square with a hue slider and a hex field, or a round color wheel, for any color at all. - [Canvas](https://kombai.com/gallery/inspirations/color-picker-web-3/) (Web) - [Tidereach Studio](https://kombai.com/gallery/inspirations/color-picker-web-43/) (Web) - [Halofrost](https://kombai.com/gallery/inspirations/color-picker-ios-11/) (Mobile) ### 4. Named color lists Rows that pair each swatch with a name, like Oxblood or Glacier, when the name matters as much as the color. - [Quoinfield](https://kombai.com/gallery/inspirations/color-picker-ios-28/) (Mobile) - [Kyanite](https://kombai.com/gallery/inspirations/color-picker-ios-3/) (Mobile) - [Gunwale](https://kombai.com/gallery/inspirations/color-picker-web-12/) (Web) ### 5. Presets with a custom option A set of swatches ending in a rainbow button or an eyedropper that opens a full picker. - [Deckle](https://kombai.com/gallery/inspirations/color-picker-web-17/) (Web) - [Role settings](https://kombai.com/gallery/inspirations/color-picker-web-21/) (Web) - [Bracteole](https://kombai.com/gallery/inspirations/color-picker-ios-19/) (Mobile) ## Where color pickers show up ### Tags, stages and categories Each pipeline stage, status or category gets a color in settings, often from a swatch popover with a hex field. - [Marver](https://kombai.com/gallery/inspirations/color-picker-web-36/) (Web) - [Achromat](https://kombai.com/gallery/inspirations/color-picker-web-33/) (Web) - [Nutation](https://kombai.com/gallery/inspirations/color-picker-web-23/) (Web) ### Photo and video editors A row of colors for captions, markup and frame tints, sitting right above the photo. - [Chasework](https://kombai.com/gallery/inspirations/color-picker-ios-27/) (Mobile) - [Emquad](https://kombai.com/gallery/inspirations/color-picker-ios-29/) (Mobile) - [Warpline](https://kombai.com/gallery/inspirations/color-picker-web-13/) (Web) ### Product colorways Swatches on a product page switch the colorway, with the name of the chosen color beside them. - [Contourline](https://kombai.com/gallery/inspirations/color-picker-ios-15/) (Mobile) - [Varve](https://kombai.com/gallery/inspirations/color-picker-web-20/) (Web) - [Alderfell](https://kombai.com/gallery/inspirations/color-picker-web-41/) (Web) ### Filtering by color A swatch matrix or a hex field narrows a shop or an inspiration feed to one color. - [Hazelrow](https://kombai.com/gallery/inspirations/color-picker-web-40/) (Web) - [Latitudine](https://kombai.com/gallery/inspirations/color-picker-ios-14/) (Mobile) - [Voussoir](https://kombai.com/gallery/inspirations/color-picker-web-15/) (Web) ## Color picker vs similar components | | [Color picker](https://kombai.com/glossary/color-picker/) | [Radio button](https://kombai.com/glossary/radio-button/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Slider](https://kombai.com/glossary/slider/) | |---|---|---|---|---| | Picks | A color | One of a few visible options | One option from a hidden list | A value on a range | | Shows | Swatches, a spectrum or a hex | Every option with a label | Options after a click | A track and a thumb | | Best for | Tags, themes, design tools | Short exclusive choices | Long lists of options | Volume, price, size | ## Build notes - Treat a set of swatches as a radio group: role="radiogroup", and role="radio" with aria-checked on each swatch. - Name every swatch, like aria-label="Teal". A color on its own is not a label. - Arrow keys move through the swatches and select as they go. Tab moves into and out of the group. - Mark the selected swatch with a ring or a check, not only a change of color. - For a quick custom color, opens the browser or system picker. - When people pick text or background colors, check the contrast: at least 4.5:1 for normal text. ## FAQ ### Swatches or a full color picker? Start with swatches. A curated set keeps colors on brand, readable and easy to tell apart, and it takes one tap. Add a spectrum or a hex field only when people need exact colors, like in a design tool or a brand settings page. ### How many swatches should a color picker show? Enough to cover distinct hues without near-duplicates. For labels and accents, the swatch rows in the gallery mostly hold four to twelve colors. Grids with tints and shades suit backgrounds and design work. ### How do I make a color picker accessible? Give every swatch a text name, make the set a radio group so arrow keys move through it, and show the selection with a ring or a check. If the color will sit behind text, show the contrast ratio and warn below 4.5:1. ### Should a color picker accept hex codes? Yes, when people bring colors from somewhere else, like a brand guide. Accept codes with or without the #, in upper or lower case, and say what is wrong if the code is not six characters from 0 to 9 and A to F. ## Related terms - [Radio button](https://kombai.com/glossary/radio-button/) - [Slider](https://kombai.com/glossary/slider/) - [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) - [Popover](https://kombai.com/glossary/popover/) ## References - [MDN: The color input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color) - [WAI-ARIA Authoring Practices: Radio group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) - [WCAG 2.2: Understanding contrast (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)