Form

ColorPicker

Pick a colour with an area, a hue slider, a hex field and presets — in a popover, inline, or as a hex text field with a colour dot.

Features7

API

Theming

Basic

A button with the colour; the popover holds the area, the hue slider and the hex field.

Value: #2563eb

Inline

inline shows the panel in place.

Field

field turns the picker into a text field with a colour dot: type a hex like #3c6 or open the picker from the dot. On blur a valid colour becomes #rrggbb; anything else keeps the field invalid.

Accent colour

Buttons and links use this colour

Badge colour

14 lines

<div class="fields">  <tx-field label="Accent colour" hint="Buttons and links use this colour">    <tx-color-picker      field      placeholder="#rrggbb"      showClear      [formControl]="accent"      [presets]="presets"    />  </tx-field>  <tx-field label="Badge colour">    <tx-color-picker field placeholder="#rrggbb" [formControl]="badge" />  </tx-field></div>

Presets

Preset swatches for the colours your product uses, and a clear button.

Value: none

10 lines

<div class="stack">  <tx-color-picker    [formControl]="color"    [presets]="presets"    [showClear]="true"    [placeholder]="'No label colour'"    [ariaLabel]="'Label colour'"  />  <span class="hint">Value: {{ color.value ?? 'none' }}</span></div>

Formats

format sets the type of the value: hex text, an RGB or an HSB object.

{ "r": 236, "g": 72, "b": 153 }

{ "h": 200, "s": 80, "b": 90 }

6 lines

<div class="stack">  <tx-color-picker [(ngModel)]="rgb" [format]="'rgb'" [ariaLabel]="'RGB colour'" />  <span class="hint">{{ rgb | json }}</span>  <tx-color-picker [(ngModel)]="hsb" [format]="'hsb'" [ariaLabel]="'HSB colour'" />  <span class="hint">{{ hsb | json }}</span></div>

States

Sizes, invalid, disabled and read-only.

7 lines

<div class="flex">  <tx-color-picker [size]="'small'" [ariaLabel]="'Small'" />  <tx-color-picker [size]="'large'" [ariaLabel]="'Large'" />  <tx-color-picker [invalid]="true" [ariaLabel]="'Invalid'" />  <tx-color-picker [formControl]="locked" [ariaLabel]="'Disabled'" />  <tx-color-picker [formControl]="shown" [readonly]="true" [ariaLabel]="'Read only'" /></div>

Design tokens

dt changes the colorPicker tokens of one picker.

9 lines

<tx-color-picker    [inline]="true"    [ariaLabel]="'Colour'"    [dt]="{      panel: { width: '200px' },      area: { height: '120px', borderRadius: '50%' },      handle: { size: '20px' },    }"  />