API Reference

The <color-input> element accepts three HTML attributes:

The value attribute sets the color using standard CSS color syntax.

<color-input value="oklch(70% 0.2 240)" colorspace="oklch"></color-input>

<color-input
  value="oklch(70% 0.2 240)"
  colorspace="oklch"
  theme="auto"
></color-input>

<color-input
  value="hsl(240 80% 60%)"
  colorspace="hsl"
  theme="auto"
></color-input>

<color-input
  value="#3b82f6"
  colorspace="srgb"
  theme="auto"
></color-input>

<color-input
  value="color(display-p3 0.3 0.7 0.95)"
  colorspace="display-p3"
  theme="auto"
></color-input>

The colorspace attribute specifies which color space to use for editing:

• oklch (default) - Perceptually uniform lightness/chroma/hue
• oklab - Perceptually uniform lightness/a/b
• hsl - Hue/saturation/lightness
• hwb - Hue/whiteness/blackness
• srgb - Red/green/blue (sRGB)
• lab - CIE LAB lightness/a/b
• lch - CIE LCH lightness/chroma/hue
• display-p3 - Wide-gamut Display P3 RGB
• rec2020 - Wide-gamut Rec.2020 RGB
• a98-rgb, prophoto, xyz, xyz-d50, xyz-d65

<color-input value="hsl(200 90% 50%)" colorspace="hsl"></color-input>

The theme attribute controls the visual appearance:

• auto (default) - Respects user’s system preference
• light - Always uses light theme
• dark - Always uses dark theme

<color-input
  value="oklch(65% 0.2 280)"
  colorspace="oklch"
  theme="auto"
></color-input>

<color-input
  value="oklch(65% 0.2 280)"
  colorspace="oklch"
  theme="light"
></color-input>

<color-input
  value="oklch(65% 0.2 280)"
  colorspace="oklch"
  theme="dark"
></color-input>

The <color-input> element exposes five properties:

value - Current color as a CSS string

const picker = document.querySelector('color-input');
console.log(picker.value); // "oklch(70% 0.2 240)"
picker.value = 'oklch(80% 0.15 180)';

colorspace - Current color space

console.log(picker.colorspace); // "oklch"
picker.colorspace = 'hsl';

theme - Visual theme

console.log(picker.theme); // "auto"
picker.theme = 'dark'; // "auto", "light", or "dark"

gamut - Detected gamut (smallest gamut that contains the current color)

console.log(picker.gamut); // "srgb" | "p3" | "rec2020" | "xyz"

contrastColor - Recommended text color for contrast

console.log(picker.contrastColor); // "white" or "black"

Opens the picker popover programmatically:

const picker = document.querySelector('color-input');
picker.show();

Closes the picker popover:

picker.close();

Sets a custom anchor element for popover positioning:

const customAnchor = document.querySelector('#my-anchor');
picker.setAnchor(customAnchor);

By default, the popover positions relative to the trigger button.

The <color-input> element dispatches three custom events:

Fired when the color value changes. The event detail contains:

interface ChangeDetail {
  value: string;      // CSS color string, e.g., "oklch(70% 0.2 240)"
  colorspace: string; // Current color space, e.g., "oklch"
  gamut: string;      // Detected gamut: "srgb", "p3", "rec2020", or "xyz"
}

picker.addEventListener('change', (event) => {
  const { value, colorspace, gamut } = event.detail;
  console.log(`New color: ${value}`);
  console.log(`Color space: ${colorspace}`);
  console.log(`Gamut: ${gamut}`);
});

Fired when the picker popover opens:

picker.addEventListener('open', () => {
  console.log('Picker opened');
});

Fired when the picker popover closes:

picker.addEventListener('close', () => {
  console.log('Picker closed');
});

The <color-input> element exposes several CSS parts for styling with the ::part() selector:

• trigger - The button that opens the picker
• chip - Color swatch inside the trigger button
• label - Text label inside the trigger button
• panel - Popover container
• output - CSS color string display
• gamut - Gamut badge (srgb/p3/rec2020/xyz)
• controls - Container for channel sliders and inputs

Perfect for color palettes and compact color selection:

.circle-swatch::part(trigger) {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border: 3px solid white;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

.circle-swatch::part(trigger):hover {
  transform: scale(1.1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.circle-swatch::part(chip) {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
}

.circle-swatch::part(label) {
  display: none;
}

.pill-style::part(trigger) {
  border: 2px solid oklch(70% 0.15 280);
  border-radius: 24px;
  padding: 8px 16px;
  background: oklch(95% 0.05 280);
  transition: all 0.2s ease;
}

.pill-style::part(chip) {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}