ColorPicker | Neural UI v2

Usage

value is a colour string. mode controls its editable notation; showAlpha enables transparency and showChannels exposes numeric channels. valueChange updates the model during editing; valueCommitted identifies a completed edit. A colour value is data, not an automatic theme update.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Current value: "#175d95"

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Current value: "#175d95"

Events: 0

disabled

readonly

invalid

showAlpha

showChannels

Advanced options · 9

<neu-color-picker
  [value]="value()"
  (valueChange)="value.set($event)"
  [mode]="'hex'"
  [showAlpha]="false"
  [showChannels]="true"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  (valueCommitted)="record('valueCommitted', $event)"
  [ariaLabel]="'Accent colour'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const value = signal("#175d95");

Data, callback and structured configuration inputs

State and events

value is a colour string. mode controls its editable notation; showAlpha enables transparency and showChannels exposes numeric channels. valueChange updates the model during editing; valueCommitted identifies a completed edit. A colour value is data, not an automatic theme update.

Accessibility and keyboard

Tab reaches the colour trigger and channel fields. Open the picker with Enter/Space and dismiss it with Escape.

Key	Action
`Tab`	Move between the trigger and available colour fields.
`Enter`	On the trigger, open the colour picker.
`Space`	On the trigger, open the colour picker.
`Escape`	Close the open picker.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs of elements describing the control, separated by spaces.
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Accessible name of the control or region.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	IDs of existing elements naming this control or region.
`dirty`	`boolean`	`false`	`[dirty]`	Form state indicating that the user has changed the value.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents interaction with this control.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Validation errors supplied by the form or the application.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the control according to the form state.
`inputId`	`string`	`''`	`[inputId]`	Stable control id, generated when omitted; use it to associate labels or descriptions.
`invalid`	`boolean`	`false`	`[invalid]`	Displays the invalid state; it does not add a validation rule.
`mode`	`NeuColorMode`	`'hex'`	`[mode]`	Colour notation used by the editors: hex, rgb, hsl or oklch.
`pending`	`boolean`	`false`	`[pending]`	Form state indicating that asynchronous validation is pending.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps the applied value visible but prevents user edits.
`required`	`boolean`	`false`	`[required]`	Marks the field as required; use a form validator to enforce it.
`showAlpha`	`boolean`	`false`	`[showAlpha]`	Enable transparency editing in the colour picker.
`showChannels`	`boolean`	`false`	`[showChannels]`	Show numeric colour-channel editors for the selected notation.
`touched`	`boolean`	`false`	`[touched]`	Form state indicating that the control has been visited.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Name	Type	Default	Template binding	Description
`value`	`string`	`DEFAULT_COLOR_VALUE`Derived default	`[(value)]`	Applied colour string in a supported CSS notation.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`closed`	`void`	`(closed)="onClosed($event)"`	Reports closure of this component. Consult the payload type for the emitted data.
`opened`	`void`	`(opened)="onOpened($event)"`	Reports opening of this component. Consult the payload type for the emitted data.
`touch`	`void`	`(touch)="onTouch($event)"`	Notifies the form that the control has been touched; not a value change.
`valueCommitted`	`string`	`(valueCommitted)="onValueCommitted($event)"`	Reports a completed edit. Inspect its payload type: some controls emit the value, while InlineEditor emits previousValue and value.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuColorModeTypeScript

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-border-color`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-border)`
`--neu-info-text`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#1d4ed8`
`--neu-radius-sm`	Corner radius	Shared by other Core consumers; scope the override.	`6px`
`--neu-radius-xl`	Corner radius	Shared by other Core consumers; scope the override.	`16px`

Related components

Use related components when your task requires a different interaction or a composed control.