Styling & Customization

Theming

The <color-input> component supports three theme modes:

auto (default) - Follows system preferences (prefers-color-scheme)
light - Always uses light theme
dark - Always uses dark theme

Setting Themes

Use the theme attribute:

<color-input theme="auto"></color-input>
<color-input theme="light"></color-input>
<color-input theme="dark"></color-input>

Or set via JavaScript:

picker.theme = "dark";

Value: oklch(65% 20% 280)
Color Space: oklch
Gamut: —
Contrast Color: —

View Code

<color-input value="oklch(65% 20% 280)"></color-input>

Respects your system preference

Value: oklch(65% 20% 280)
Color Space: oklch
Gamut: —
Contrast Color: —

View Code

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

Always light, regardless of system

Value: oklch(65% 20% 280)
Color Space: oklch
Gamut: —
Contrast Color: —

View Code

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

Always dark, regardless of system

CSS Parts

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
input - Text input field for entering color values
panel - Popover container
output - CSS color string display
gamut - Gamut badge (srgb/p3/rec2020/xyz)
controls - Container for channel sliders and inputs

Styling Examples

Circle Swatch

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(trigger):active {
  transform: scale(1.05);
}

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

/* Hide the text input for a pure swatch look */
.circle-swatch::part(input) {
  display: none;
}

<color-input class="circle-swatch" value="#ef4444"></color-input>
<color-input class="circle-swatch" value="#f59e0b"></color-input>
<color-input class="circle-swatch" value="#10b981"></color-input>
<color-input class="circle-swatch" value="#3b82f6"></color-input>
<color-input class="circle-swatch" value="#8b5cf6"></color-input>

Theme-Specific Styling

Customize parts based on the current theme:

.circle-swatch::part(trigger) {
  width: 48px;
  height: 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);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.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(trigger):active {
  transform: scale(1.05);
}

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

/* Hide the text input for a pure swatch look */
.circle-swatch::part(input) {
  display: none;
}

Parts Reference

Part	Description
`trigger`	Button that opens the picker
`chip`	Color swatch preview
`input`	Text input for entering colors
`panel`	Popover container
`output`	Current color value display
`gamut`	Gamut badge
`controls`	Sliders and inputs container