Color Palette

import { AXColorPaletteModule } from '@acorex/components/color-palette';

Color Palette component simplifies color selection in the UI with predefined and custom color sets. It supports interaction via click, tap, or keyboard navigation, and allows color retrieval through events or two-way binding. Commonly used for tasks like selecting product colors in e-commerce platforms.

Overview

In this section, you can test different options of this component and see the output in real time

hex

Preview

Picker

Swatches

Inputs

Readonly

Disabled

Value: #9c27b0

Usage

A simple example of using ax-color-palette

Preview

Code

Swatches

Show swatches by ax-color-palette-swatches

Preview

Code

Inputs

Show input control by ax-color-palette-input

Preview

Code

Preview

You can show color preview by using ax-color-palette-preview tag.

Preview

Code

Full options

An example of using all tags in ax-color-palette

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-color-palette-color-sample-width	3.5rem	Width of each color sample in the palette.
--ax-comp-color-palette-transparent-color	unset	Color used to represent transparency in the palette.

Props

disabled	boolean	false	Disables the color palette, preventing any interaction with it.
readonly	boolean	false	Determines if the color palette is read-only, meaning the user cannot change the selected color.
tabIndex	number	0	Sets the tab index of the color palette, determining its position in the tab order.
value	-	-	Specifies the current selected color value of the color palette.
state	AXComponentState	clear	Indicates the state of the color palette
name	string	-	Specifies the name of the color palette, used for identification purposes.
checked	-	-	Shows whether the color palette is checked or selected, if applicable.

Methods

onBlur	AXFocusEvent	Specifies the function to be called when the color palette loses focus.
onFocus	AXFocusEvent	Specifies the function to be called when the color palette gains focus.
stateChange	AXComponentState	Invokes the function when the state of the color palette changes.
readonlyChange	boolean	Calls the function when the readonly state of the color palette changes.
valueChange	any	Calls the function when the value of the color palette changes.
onValueChanged	AXValueChangedEvent<any>	Triggers the function when the value of the color palette changes.
disabledChange	boolean	Calls the function when the disabled state of the color palette changes.
validationRulesChange	AXFormValidationRule[]	Invokes the function when the validation rules for the color palette change.
onOptionChanged	AXOptionChangedEvent	Triggers the function when an option related to the color palette changes.