Color picker

Pick a value in a continuous space and see it as HEX, RGB, and HSL.

← Back to Utilities

Color picker

Pick a colorHEX

rgb(37, 99, 235) · hsl(221 83% 53%)

Hue221°

Saturation83%

Lightness53%

Red37

Green99

Blue235

Patterns

picker

Picker

Purpose: Pick a value in a continuous space and see it in several representations.
Anatomy: Header → preview → HEX/RGB/HSL fields → sliders → copy.
Interaction: One source of truth (the color). Representations stay in sync.
Components: UtilityShell, UtilityInput, UtilitySlider, UtilityControlGroup, UtilityPrimaryAction