Kern 0.12.0 GitHub
Forms

<kern-color-picker>

Colour field for smart-home lights, form-associated. mode="color": value is #rrggbb; the popover has a saturation/brightness area, a hue bar and swatches. mode="temperature": value is a colour temperature in Kelvin (min-kelvin–max-kelvin) on a warm-to-cold bar. The hex or Kelvin text can be typed (Enter or leaving applies it). Area and bars work with pointer and keys (Arrows, Shift = larger steps, Home/End on bars).

Examples

Light colour

mode="color" (default): value is #rrggbb. The popover has a saturation/brightness area, a hue bar and swatches. The hex text can be typed (Enter or leaving applies it). Area and bar work with the arrow keys; Shift takes larger steps.

kernChange → …
<div style="display:grid;gap:16px;max-width:280px"> <kern-color-picker name="color" label="Light colour" value="#3cc8cc" swatches="#ff8a3c,#ffd23c,#3cc8cc,#7fa8ff,#e58bbf,#ffffff"></kern-color-picker> <kern-color-picker label="Status LED" value="#ff8a3c" size="sm" disabled></kern-color-picker> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div> const picker = root.querySelector('kern-color-picker'); const out = root.querySelector('output'); picker.addEventListener('kernInput', (e) => (out.textContent = 'kernInput → ' + e.detail.value)); picker.addEventListener('kernChange', (e) => (out.textContent = 'kernChange → ' + e.detail.value));

Color temperature

mode="temperature": value is a colour temperature in Kelvin between min-kelvin and max-kelvin on a warm-to-cold bar, in steps of kelvin-step. Swatches are Kelvin values.

<div style="display:grid;gap:16px;max-width:280px"> <kern-color-picker name="white" label="White tone" mode="temperature" value="3000" swatches="2700,3000,4000,5000,6500"></kern-color-picker> <kern-color-picker label="Desk lamp" mode="temperature" value="4000" min-kelvin="3000" max-kelvin="5000" kelvin-step="250" readonly></kern-color-picker> </div>

Properties

ariaLabelTextattribute aria-label-text
string | undefined

Accessible name when there is no visible label.

disabledreflectsdefault false
boolean
error
string | undefined
hint
string | undefined
kelvinStepattribute kelvin-step · default 100
number
label
string | undefined
labelAreaattribute label-area · default Saturation and brightness · de Sättigung und Helligkeit
string | undefined
labelHueattribute label-hue · default Hue · de Farbton
string | undefined
labelInvalidattribute label-invalid · default Not a valid color · de Keine gültige Farbe
string | undefined
labelOpenattribute label-open · default Choose color · de Farbe wählen
string | undefined
labelTemperatureattribute label-temperature · default Color temperature · de Farbtemperatur
string | undefined
maxKelvinattribute max-kelvin · default 6500
number
minKelvinattribute min-kelvin · default 2700
number
modereflectsdefault 'color'
"color" | "temperature"
name
string | undefined
noImplicitSubmitattribute no-implicit-submit · default false
boolean

Enter does not submit the surrounding form.

readonlydefault false
boolean
requireddefault false
boolean
sizereflectsdefault 'md'
"md" | "sm"
swatchesdefault ''
string | string[]

Presets: hex colours, or Kelvin values with mode="temperature", e.g. #ff8a3c,#3cc8cc or 2700,4000,6500.

valuemutabledefault ''
number | string

#rrggbb, or Kelvin with mode="temperature".

Events

kernChange
CustomEvent<{ value: string | number; }>

When a colour is applied (drag end, key, swatch, typed text).

kernInput
CustomEvent<{ value: string | number; }>

While dragging or stepping.

Methods

hide()
hide() => Promise<void>

Closes the colour panel.

show()
show() => Promise<void>

Opens the colour panel.

CSS parts

control

The field box

panel

The popover