FORM

Color

Color gives people one native-feeling picker across web, iOS, and Android, with live format details and a string Signal contract. Its sm, md, and lg sizes scale both trigger height and displayed value text.

PLAYGROUND

Build a color token

Open the field to adjust saturation, brightness, and hue. bind writes the canonical uppercase hex value continuously, while format rows stay opt-in.

Brand color

CURRENT VALUE

One source of truth

The same typed value can drive a theme token, an API payload, or a preview swatch without client-side string parsing.

Hex input + normalized Signal

dowe
signal brandColor value:"#3b82f6"

Color bind:brandColor label:"Brand color" labelFloating:true showHex:true showRgb:true showOklch:true variant:"outlined" scheme:"primary" size:"lg" name:"brand-color"

FORMATS

Expose the formats your workflow needs

Hex is the stored value. RGB, CMYK, and OKLCH are computed from the same selected sRGB color for design tools and handoff.

Product accent
Campaign highlight
dowe
Color value:"#14b8a6" label:"Product accent" showHex:true showRgb:true showCmyk:true showOklch:true variant:"soft" scheme:"success" size:"md" name:"product-accent"
Color value:"#a855f7" label:"Campaign highlight" showHex:true showOklch:true variant:"line" scheme:"secondary" size:"sm" name:"campaign-highlight"

STATES AND SURFACES

Make feedback part of the field

Use the same color picker contract for resting, validated, and corrective states.

Validated accent
Used for the active campaign palette.
Needs review
Choose a color with enough contrast for body text.

The base heights are 32, 40, and 48; labelFloating adds 8 logical units on every target.

Small
Medium
Large

BEHAVIOR

One portable color model

Dowe lowers the same anchored panel, saturation and brightness plane, hue slider, preview, formats, labels, and feedback to web, SwiftUI, and Compose. A floating label begins after the leading swatch so both remain readable.

BINDING

String Signal

bind reads and writes one uppercase #RRGGBB string continuously while the picker moves.

FORMATS

Opt-in details

showHex, showRgb, showCmyk, and showOklch add deterministic rows inside the anchored panel.

VALIDATION

Hex only

value and Signal values use the #RRGGBB contract so every target starts from the same color.

API

Props

Color also accepts the applicable common spacing, sizing, typography, visibility, accessibility, and shadow props.

Prop
Type
Default

No data

There are no records to display