Color Components

A suite of color picking primitives: sliders, 2D areas, wheels, text fields, swatches, and a full-featured editor. All are keyboard accessible and support multiple color formats.

Import

// Headless primitives (solidaria-components):
import { ColorSlider, ColorSliderTrack, ColorSliderThumb } from '@proyecto-viviana/solidaria-components';
import { ColorArea, ColorAreaGradient, ColorAreaThumb } from '@proyecto-viviana/solidaria-components';
import { ColorWheel, ColorWheelTrack, ColorWheelThumb } from '@proyecto-viviana/solidaria-components';
import { ColorField, ColorFieldInput, ColorSwatch } from '@proyecto-viviana/solidaria-components';

// Styled components (ui):
import { ColorSwatchPicker, ColorSwatchPickerItem, ColorEditor } from '@proyecto-viviana/solid-spectrum';

// Utilities:
import { parseColor, type Color } from '@proyecto-viviana/solid-stately';

ColorSlider

Adjust a single color channel (hue, saturation, lightness, red, green, blue, alpha). The primitives ship no paint, so the track and thumb below are sized by your own CSS.

Hue200°

hsl(200, 100%, 50%)

<ColorSlider channel="hue" value={color()} onChange={setColor}>
  {() => (
    <ColorSliderTrack class="slider-track">
      {() => <ColorSliderThumb class="slider-thumb" />}
    </ColorSliderTrack>
  )}
</ColorSlider>

ColorArea

A 2D picker for two channels simultaneously (e.g., saturation + brightness).

rgb(0, 170, 255)

<ColorArea value={color()} onChange={setColor} xChannel="saturation" yChannel="brightness">
  {() => (
    <>
      <ColorAreaGradient class="area-gradient" />
      <ColorAreaThumb class="slider-thumb" />
    </>
  )}
</ColorArea>

ColorWheel

A circular hue selector.

Hue: 200°

<ColorWheel value={color()} onChange={setColor}>
  {() => (
    <>
      <ColorWheelTrack class="wheel-track" />
      <ColorWheelThumb class="slider-thumb" />
    </>
  )}
</ColorWheel>

ColorField

A text input for entering color values in hex, RGB, HSL, or other formats.

Color

<ColorField label="Color" value={color()} onChange={setColor}>
  {() => (
    <div class="row">
      <div class="swatch" style={{ background: color()?.toString('css') }} />
      <ColorFieldInput class="color-input" />
    </div>
  )}
</ColorField>

ColorSwatch

A simple color preview square.

<ColorSwatch color={parseColor('#3b82f6')} class="swatch" />

ColorSwatchPicker

An accessible palette picker — a group of ColorSwatchPickerItems with selection state.

rgb(59, 130, 246)

<ColorSwatchPicker value={color()} onChange={setColor} aria-label="Pick a color">
  <ColorSwatchPickerItem color={parseColor('#ef4444')} />
  <ColorSwatchPickerItem color={parseColor('#3b82f6')} />
</ColorSwatchPicker>

ColorEditor

A full-featured, styled color editor combining area, wheel, sliders, and format input.

hsl(200, 100%, 50%)

<ColorEditor value={color()} onChange={setColor} />

Accessibility

All color pickers support full keyboard navigation
ColorSlider: Arrow keys adjust the value; Page Up/Down for larger steps
ColorArea: Arrow keys move the 2D thumb
ColorWheel: Arrow keys rotate the hue
ColorField: Standard text input semantics with format validation
ColorSwatchPicker: Arrow keys navigate swatches, Enter/Space selects
Current color value is announced via aria-valuetext