ColorPicker Component

The ColorPicker component provides a comprehensive color selection interface that supports all modern CSS color formats including hex, RGB, HSL, named colors, HWB, Lab, LCH, OKLab, and OKLCH. It features bidirectional color format conversion and intelligent alpha transparency handling.

Table of Contents

Examples

Basic Usage
Supported Color Formats
Alpha Transparency
Format Selection
Form Integration
JavaScript Usage
Event Handling

JavaScript Reference

Constructor
Requirements
Properties
Methods
Events
Static Members

Basic Usage

<k-color-picker></k-color-picker>

Supported Color Formats

The ColorPicker supports all modern CSS color formats with automatic detection and conversion:

Hex Colors

<k-color-picker value="#ff0000"></k-color-picker>
<k-color-picker value="#ff000080"></k-color-picker>

RGB/RGBA Colors

<k-color-picker value="rgb(255, 0, 0)"></k-color-picker>
<k-color-picker value="rgba(255, 0, 0, 0.5)"></k-color-picker>

HSL/HSLA Colors

<k-color-picker value="hsl(0, 100%, 50%)"></k-color-picker>
<k-color-picker value="hsla(0, 100%, 50%, 0.5)"></k-color-picker>

Named Colors

<k-color-picker value="red"></k-color-picker>
<k-color-picker value="dodgerblue"></k-color-picker>

HWB Colors

<k-color-picker value="hwb(0 0% 0%)"></k-color-picker>
<k-color-picker value="hwb(240 0% 0% / 0.5)"></k-color-picker>

Lab Colors

<k-color-picker value="lab(50% 50 50)"></k-color-picker>
<k-color-picker value="lab(50% 50 50 / 0.5)"></k-color-picker>

LCH Colors

<k-color-picker value="lch(50% 50 0)"></k-color-picker>
<k-color-picker value="lch(50% 50 0 / 0.5)"></k-color-picker>

OKLab Colors

<k-color-picker value="oklab(50% 0.1 0.1)"></k-color-picker>
<k-color-picker value="oklab(50% 0.1 0.1 / 0.5)"></k-color-picker>

OKLCH Colors

<k-color-picker value="oklch(50% 0.1 0)"></k-color-picker>
<k-color-picker value="oklch(50% 0.1 0 / 0.5)"></k-color-picker>

Alpha Transparency

The ColorPicker intelligently handles alpha transparency. When you set a color without alpha, it preserves the existing alpha value. Only when you explicitly provide an alpha value does it update the transparency.

<k-color-picker id="alphaPicker" value="rgba(255, 0, 0, 0.5)"></k-color-picker>
<button id="setOpaque">Set to Blue (preserves alpha)</button>
<button id="setTransparent">Set to Green with Alpha</button>
<script>
  const picker = document.getElementById('alphaPicker');
  document.getElementById('setOpaque').addEventListener('click', ()=>{
    picker.value = '#0000ff'; // Alpha preserved at 0.5
  });
  document.getElementById('setTransparent').addEventListener('click', ()=>{
    picker.value = 'rgba(0, 255, 0, 0.3)'; // Alpha updated to 0.3
  });
</script>

Format Selection

You can specify the output format using the format attribute. The component will convert colors to the specified format when displaying the value.

<k-color-picker format="hsl" value="#ff0000"></k-color-picker>
<k-color-picker format="lab" value="#00ff00"></k-color-picker>

Form Integration

The ColorPicker component is form-associated and works seamlessly with native HTML forms using the name attribute. The component uses the ElementInternals API to participate in form submission, validation, and reset operations.

<form id="colorForm">
  <label for="bgColor">Background Color:</label>
  <k-color-picker name="bgColor" value="#3498db"></k-color-picker>
  <label for="textColor">Text Color:</label>
  <k-color-picker name="textColor" format="rgb" value="#ffffff"></k-color-picker>
  <button type="submit">Submit</button>
</form>
<p id="formOutput">Submit the form to see values</p>
<script>
  document.getElementById('colorForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const output = Array.from(formData.entries())
      .map(([key, value]) => `${key}: ${value}`)
      .join(', ');
    document.getElementById('formOutput').textContent = output;
  });
</script>

Submit the form to see values

JavaScript Usage

<k-color-picker id="jsPicker"></k-color-picker>
<button id="setColor">Set Color</button>
<button id="getColor">Get Color</button>
<button id="changeFormat">Change Format</button>
<p id="colorValue">Color value will appear here</p>
<script>
  const picker = document.getElementById('jsPicker');
  const valueDisplay = document.getElementById('colorValue');
  document.getElementById('setColor').addEventListener('click', ()=>{
    picker.value = 'oklch(70% 0.2 180)';
  });
  document.getElementById('getColor').addEventListener('click', ()=>{
    valueDisplay.textContent = `Current color: ${picker.value}`;
  });
  document.getElementById('changeFormat').addEventListener('click', ()=>{
    picker.format = 'hex';
    valueDisplay.textContent = `Switched to hex format: ${picker.value}`;
  });
</script>

Color value will appear here

Event Handling

The ColorPicker component forwards DOM events from its internal form elements (select, text input, and color input), allowing you to listen for user interactions. The following events are forwarded: change, input, focus, and blur.

Change Event

Fired when the user commits a color change through any of the internal inputs.

<k-color-picker id="changeEventPicker" value="#3498db"></k-color-picker>
<p id="changeOutput">Change the color to see the event</p>
<script>
  const picker = document.getElementById('changeEventPicker');
  picker.addEventListener('change', (e) => {
    const output = document.getElementById('changeOutput');
    output.textContent = `Changed to: ${picker.value}`;
  });
</script>

Change the color to see the event

Input Event

Fired as the user types or modifies the color value, providing real-time updates.

<k-color-picker id="inputEventPicker" value="#e74c3c"></k-color-picker>
<div id="colorPreview" style="width:100%; height:50px; background:#e74c3c; border-radius:4px;"></div>
<script>
  const picker = document.getElementById('inputEventPicker');
  const preview = document.getElementById('colorPreview');
  picker.addEventListener('input', (e) => {
    preview.style.backgroundColor = picker.value;
  });
</script>

Focus and Blur Events

Track when the user focuses on or leaves any of the color picker's input elements.

<k-color-picker id="focusEventPicker" value="#2ecc71"></k-color-picker>
<p id="focusOutput">Click on the color picker to see focus/blur events</p>
<script>
  const picker = document.getElementById('focusEventPicker');
  const output = document.getElementById('focusOutput');
  picker.addEventListener('focus', (e) => {
    output.textContent = 'Color picker focused';
    output.style.color = '#2ecc71';
  });
  picker.addEventListener('blur', (e) => {
    output.textContent = 'Color picker blurred';
    output.style.color = '#95a5a6';
  });
</script>

Click on the color picker to see focus/blur events

Multiple Events Example

Combining multiple event listeners to create an interactive color picking experience with event logging.

<k-color-picker id="multiEventPicker" value="#9b59b6"></k-color-picker>
<pre id="eventLog"></pre>
<script>
  const picker = document.getElementById('multiEventPicker');
  const log = document.getElementById('eventLog');
  const logEvent = (type, value) => {
    const time = new Date().toLocaleTimeString();
    const entry = document.createElement('div');
    entry.textContent = `${time} - ${type}: ${value}`;
    log.insertBefore(entry, log.firstChild);
    if (log.children.length > 10) log.lastChild.remove();
  };
  picker.addEventListener('change', () => logEvent('change', picker.value));
  picker.addEventListener('input', () => logEvent('input', picker.value));
  picker.addEventListener('focus', () => logEvent('focus', 'focused'));
  picker.addEventListener('blur', () => logEvent('blur', 'blurred'));
</script>

JavaScript Reference

Constructor

Extends ShadowComponent

`new ColorPicker()`

Requirements

ShadowComponent

Properties

`name: string`

The name of the form control, used for form submission. When set, the component will participate in form data collection. Syncs to name attribute.

`format: string`

The output color format. Supported values: 'hex', 'rgba', 'hsla', 'named', 'hwb', 'lab', 'lch', 'oklab', 'oklch'. Default is 'hex'. Syncs to format attribute.

`value: string`

The current color value as a string in the current format. Accepts any supported color format and converts it internally to RGB. When setting a color without alpha, the existing alpha value is preserved. Only colors with explicit alpha values will update the transparency. Syncs to value attribute.

`red: number`

The red component of the color (0-255).

`green: number`

The green component of the color (0-255).

`blue: number`

The blue component of the color (0-255).

`alpha: number`

The alpha transparency component (0-1).

Methods

`toHexColor(red, green, blue): string`

Converts RGB values to a hex color string for the native color input.

Events

`change`

Fired when the user commits a color change through any of the internal inputs (select, text input, or color input). This event is forwarded from the native DOM elements.

`input`

Fired when the user types or modifies values in the text input or interacts with the format selector. This event is forwarded from the native DOM elements and provides real-time updates.

`focus`

Fired when any of the internal form elements (select, text input, or color input) receives focus. This event is forwarded from the native DOM elements.

`blur`

Fired when any of the internal form elements (select, text input, or color input) loses focus. This event is forwarded from the native DOM elements.

Static Members

`namedColors: object`

An object containing 147 named CSS colors mapped to their hex values.

`formats: object`

An object containing format definitions for all supported color formats. Each format has detect(), parse(), and toString() methods.

Kempo UI

Components

Base Components

Utils

ColorPicker Component

Examples

Hex Colors

RGB/RGBA Colors

HSL/HSLA Colors

Named Colors

HWB Colors

Lab Colors

LCH Colors

OKLab Colors

OKLCH Colors

Change Event

Input Event

Focus and Blur Events

Multiple Events Example

Extends ShadowComponent

new ColorPicker()

name: string

format: string

value: string

red: number

green: number

blue: number

alpha: number

toHexColor(red, green, blue): string

change

input

focus

blur

namedColors: object

formats: object