Color Picker

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.

Basic usage

When to use

Use wje-color-picker when users need to enter values, choose options, or trigger form-related actions.

When not to use

Do not use it as a decorative element without interaction. Prefer presentational components in that case.

Accessibility

Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.

Best Practices

• 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.

Attributes and Properties

inputEditable

Description	Enables manual color typing into the input field.
Attribute	input-editable
Type	boolean
Default	-

Events

Name	Description
wje-color-picker:select	Emitted when an item is selected.

Methods

parseSwatches

Description	Normalizes swatch colors from a string to an array. Supports comma and semicolon separators.
Signature	(value: string) => string[]

createSwatches

Description	Sets the hue.
Signature	(node: any) => void

setSliders

Description	Sets the sliders to the given color.
Signature	(color: any) => void

dimension

Description	Retrieves the dimensions and position of the color area element relative to the viewport.
Signature	() => object

getPointerPosition

Description	Gets the pointer position in client coordinates (viewport-relative).
Signature	(e: any) => \{x: number, y: number\}

setMarkerPosition

Description	Sets the position of the marker.
Signature	(x: any, y: any) => void

clampMarkerPosition

Description	Clamps marker coordinates to the color area boundaries.
Signature	(x: number, y: number) => \{x: number, y: number\}

setColorAtPosition

Description	Sets the color at the given position.
Signature	(x: any, y: any, alpha: any) => *｜tinycolor

getHueAreaColor

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

CSS Shadow Parts

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.

CSS Custom Properties

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.

Slots

Name	Description
default	The card header main content.