Skip to content

Gallery of color pickers

Every picker takes a ColoringMode. Independent shows each channel's full range; Contextual previews the resulting color at every slider position. A picker over a space with a hue defaults to Independent; the RGB, Lab, Oklab and CMYK pickers default to Contextual.

Space Independent Contextual
RGB
RgbColorPicker		 RGB color picker, independent coloring RGB color picker, contextual coloring
HSL
HslColorPicker		 HSL color picker, independent coloring HSL color picker, contextual coloring
HSV
HsvColorPicker		 HSV color picker, independent coloring HSV color picker, contextual coloring
HWB
HwbColorPicker		 HWB color picker, independent coloring HWB color picker, contextual coloring
Lab
LabColorPicker		 Lab color picker, independent coloring Lab color picker, contextual coloring
LCH
LchColorPicker		 LCH color picker, independent coloring LCH color picker, contextual coloring
Oklab
OklabColorPicker		 Oklab color picker, independent coloring Oklab color picker, contextual coloring
OkLCh
OklchColorPicker		 OkLCh color picker, independent coloring OkLCh color picker, contextual coloring
Okhsl
OkhslColorPicker		 Okhsl color picker, independent coloring Okhsl color picker, contextual coloring
Okhsv
OkhsvColorPicker		 Okhsv color picker, independent coloring Okhsv color picker, contextual coloring
CMYK
CmykColorPicker		 CMYK color picker, independent coloring CMYK color picker, contextual coloring

Color swatch, Color planes and Color picker dialog show the other components.

These images are copies of the Compose Preview Screenshot Testing references, rendered from the library's own components. CI checks the references, not these copies: ./gradlew :screenshot-tests:updateDebugScreenshotTest rewrites the references and copies them to docs/images.