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>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
JavaScript Reference
Constructor
Extends ShadowComponent
new ColorPicker()
Requirements
Properties
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.
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.