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