Color Picker
A 366px panel for choosing a solid or gradient colour: a fill-type collection, gradient stops, a saturation and brightness spectrum, hue and opacity sliders, a Hex, RGB or CSS field and recently used swatches. Basic or Fancy, square or pill.
Add a basic Orvain Color Picker set to a gradient fill, from transparent to “#335CFF”, with a hue and opacity slider, a Hex value, the recently used colours and a close button.
When to use#
- When people set a brand, theme or chart colour and need any value, not only a preset.
- For gradients, where each stop needs its own colour and position.
When not to use
- Use a Radio group of swatches when only a few fixed colours are allowed.
Anatomy#
Solid, Linear, Radial, Angular and Diamond in a 60px grey well; the chosen one sits in a 44px white chip.
An H5 title with add and reverse buttons, over a 40px gradient slider whose 32px thumbs are the stops.
324×232, saturation across and brightness down, with a 14px thumb ringed white.
A 48px eyedropper beside two 20px sliders.
A format picker and a value field on a 4% wash, then a row of 32px Color Dots.
States#
Three white sections split by hairlines, radius 16, a soft 8/10 shadow.
The sections become cards on #fcfcfc, with Custom and Libraries tabs and a close button on top.
The well, buttons, field and chips go fully round; the panel keeps its 16px radius.
Default; Hover shrinks the dot 2px; Selected adds a white inner ring and a 1.5px tinted halo.
Source#
Preview – final code pending
The Color Picker is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.
Get notified when the source is publishedGet notified when the source is published
Used in these blocks