Dowe

FORM

Color

Color gives people a typed picker with live format details, semantic schemes, and a string Signal contract.

PLAYGROUND

Build a color token

bind keeps the selected hex value available to the rest of the view. The format rows are opt-in so a compact field can stay focused.

Brand color#3B82F6hex: #3b82f6rgb: rgb(59, 130, 246)oklch: target-derived

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

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 source value. RGB, CMYK, and OKLCH summaries can be shown together for design tools and color handoff.

Product accent#14B8A6hex: #14b8a6rgb: rgb(20, 184, 166)cmyk: cmyk(89%, 0%, 10%, 28%)oklch: target-derived

Campaign highlight#A855F7hex: #a855f7oklch: target-derived

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#3B82F6hex: #3b82f6Used for the active campaign palette.

Needs review#EF4444hex: #ef4444Choose a color with enough contrast for body text.

Small#0EA5E9

Medium#F59E0B

Large#22C55E

BEHAVIOR

One portable color model

Dowe lowers the same hex value, format summaries, labels, and feedback text to web, SwiftUI, and Compose targets.

BINDING

String Signal

bind reads and writes a validated hex string without executing user JavaScript.

FORMATS

Opt-in details

showHex, showRgb, showCmyk, and showOklch add deterministic summaries below the picker.

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

No data