Color Picker blocks

Color pickers turn a color into something you can point at: a saturation area for the shade, a strip for the hue, another for opacity, and a text field holding the value everything else agrees on.

Get Pro to installPro13 blocksReact, Vue and Figma

MCP

Stops

Contrast

5.4:1Text on White reads well

AAAAA

Recent

Saved

Every block in the set#

Colour picker

The picker a design tool opens: paint type, stops, area and the value field in one card

Colour picker, contrast map

Picking text colours: the area shows where text stays readable on your background

Colour picker, tokens

A picker inside a design system that steers back to the system

Fancy picker

The same picker as a panel: tabs for your own colours and the shared libraries

Gradient builder

Building a gradient you can paste: stops, positions, angle and the CSS

Gradient builder, on canvas

Editing a gradient directly on the gradient

Gradient builder, smooth

Gradients without the grey middle: sRGB and OKLCH side by side

Choose colour

A compact colour field with the parts that were missing

Choose colour, field

How a colour is chosen in a form: a field that opens a picker

Choose colour, tones

Pick a hue, then a tone from a ramp of nine

Change colour

Recolouring labels in place

Change colour, palette

Recolouring from a few colours that work together

Change colour, in place

Recolouring without a popover

When to use#

A theme editor where someone sets the colors the product will inherit
Design and diagramming tools, where color is chosen many times in a session
Building a gradient that will be pasted into a stylesheet
Recoloring a label, a calendar or a category from the row it belongs to

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in Blocks See plans