shadow
Color picker is an element that displays a color palette and allows users to select one of its colors. Displays the hex code of the selected color, which can be easily copied by the user.
This example presents the basic color selection flow without extra integrations. It is the clearest starting point for understanding the component.
Use wje-color-picker when users need to enter values, choose options, or trigger form-related actions.
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
| Description | Retrieves the color attribute of the element. |
| Attribute | color |
| Type | string |
| Default | #000000 |
| Description | Enables manual color typing into the input field. |
| Attribute | input-editable |
| Type | boolean |
| Default | false |
| Description | Sets or removes the 'no-color-area' attribute based on the provided value. |
| Attribute | no-color-area |
| Type | boolean |
| Default | false |
| Description | Sets or removes the "no-controls" attribute. |
| Attribute | no-controls |
| Type | boolean |
| Default | false |
| Description | Sets or removes the 'no-swatches' attribute on the element. If the value is truthy, the 'no-swatches' attribute is added. If the value is falsy, the 'no-swatches' attribute is removed. |
| Attribute | no-swatches |
| Type | boolean |
| Default | false |
| Description | Setter for the color swatches. |
| Attribute | swatches |
| Type | string |
| Default | - |
| Name | Description |
|---|
wje-color-picker:select | Emitted when an item is selected. |
| Description | Normalizes swatch colors from a string to an array. Supports comma and semicolon separators. |
| Signature | (value: string) => string[] |
| Description | Sets the hue. |
| Signature | (node: any) => void |
| Description | Sets the sliders to the given color. |
| Signature | (color: any) => void |
| Description | Retrieves the dimensions and position of the color area element relative to the viewport. |
| Signature | () => object |
| Description | Gets the pointer position in client coordinates (viewport-relative). |
| Signature | (e: any) => {x: number, y: number} |
| Description | Sets the position of the marker. |
| Signature | (x: any, y: any) => void |
| Description | Clamps marker coordinates to the color area boundaries. |
| Signature | (x: number, y: number) => {x: number, y: number} |
| Description | Sets the color at the given position. |
| Signature | (x: any, y: any, alpha: any) => *｜tinycolor |
| Description | Returns fully saturated and bright color for the current hue. Used as base color for the SV area so neutral grays do not black out the palette. |
| Signature | (color: string) => string |
| Name | Description |
|---|
anchor | The anchor part of the color picker. |
picker | The main part of the color picker. |
marker | The marker part of the color picker. |
color-area | The color area part of the color picker. |
hue | The hue slider part of the color picker. |
alpha | The alpha slider part of the color picker. |
color-preview | The color preview part of the color picker. |
input | The input part of the color picker. |
| Name | Description |
|---|
--wje-color-picker-area | The color of the color area background. |
--wje-color-picker-value | The value of the color picker input. |
--wje-color-picker-swatch | The color of the color swatch button. |
--wje-color-picker-size | The color of the color marker. |
--wje-color-picker-radius | The color of the color anchor. |
| Name | Description |
|---|
default | The card header main content. |