Figma color picker components

A color picker turns up wherever a product lets someone make something their own: theme settings, chart and label colors, calendar categories, a CMS editor, the brand panel of a website builder. It is also one of the few controls where the value is the interface, so a picker that looks slightly wrong makes every color chosen through it look slightly wrong too.

The 6 color picker components and 26 variants above cover the full range, from a two-row swatch grid to a spectrum with hue and transparency sliders.

Offer swatches first and the spectrum second

Most products do not want users choosing any color at all. A support agent picking a tag color, a marketer setting a chart series, an admin labelling a project: all of them are better served by a constrained grid than by a saturation square where 90% of the results clash with the rest of the product.

This set is built for that opinion. Brand swatches, gray swatches, and saved swatches in two sizes exist as their own variants, alongside a minimal picker for cases where the grid is the entire control.

Keep the full spectrum for the one place that genuinely needs it, usually behind a Custom option. Your color styles already define the palette worth offering.

Solid, gradient, and image

When you do need the real thing, three picker bodies cover it. The solid color picker pairs a color area with hue and transparency sliders, and those two sliders also exist as standalone 312px components, so you can drop just the transparency control into a panel with no room for the rest.

The gradient stops picker handles multi-stop gradients and comes with its own input type for editing a single stop. And there is an image upload version, for pickers that take their color from an image the user provides.

Every swatch has default, hover, and focused states, and the draggable handle exists in two forms, a 20px one for the color area and a 16px one for the sliders, so the two never get confused for each other.

Six color models in one input row

Underneath sits a 280 by 36 pixel input row that switches between hex, RGB, HSL, HSB, CSS, and gradient stop values. That mirrors what designers already have in front of them, since Figma’s own picker supports five color models through the same kind of dropdown.

Which one you show by default is worth an actual decision rather than a default: hex is what people paste from a brand guide, RGB is what they paste from a screenshot tool, and HSL is the only one where dragging a single number produces a predictable result.

Ship hex, keep the others one click away, and accept pasted values with or without the leading hash. The input field styles are shared with the rest of the kit, so validation states look the same here as everywhere else.

Trigger, dropdown, or modal

The picker has to attach to something, and the trigger family covers six: a 20px swatch, a 28px swatch, a swatch button, a swatch link, a hex input, and a select-style field, each with open and closed states. For the heavier cases there is a full modal version in 1,440px desktop and 375px mobile layouts.

One thing no picker can do for you: WCAG asks for 4.5:1 contrast on body text, and a user who picks a pale yellow for a label will produce unreadable text unless your design does something about it. Showing the contrast ratio next to the value is cheap and it prevents the support ticket.

When it is time to build, the same pickers exist in code. Untitled UI React color pickers are open source, built with Tailwind CSS and React Aria, with color area and slider dragging, keyboard adjustment, and value parsing handled for you.