Styling & Customization

Theming

The <color-input> component supports three theme modes via the theme attribute or property:

Auto (default)

Follows system preference via prefers-color-scheme

Value

oklch(65% 20% 280)

Color Space

oklch

Gamut

—

Contrast Color

—

View Code

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

Light

Always light, regardless of 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>

Dark

Always dark, regardless of system preference

Value

oklch(65% 20% 280)

Color Space

oklch

Gamut

—

Contrast Color

—

View Code

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

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

Internally the component aligns its color-scheme with the chosen mode so native rendering and form control behavior fit the picker better.

CSS Parts

Style exposed regions of the picker with ::part():

• trigger — button that opens the picker
• chip — color swatch inside the trigger
• input — inline text input
• error — parse error message
• panel — popover surface
• output — serialized color value in the preview
• gamut — gamut indicator
• controls — slider and numeric input region
• area — 2D color area container

These parts intentionally cover the major UI regions rather than every internal node, which keeps styling flexibility without making the internal shadow DOM structure part of the public API.

Common customization patterns

Compact swatch-only trigger

If you want the element to behave more like a swatch launcher, hide the text field and enlarge the trigger:

color-input.swatch::part(input) {
  display: none;
}

color-input.swatch::part(trigger) {
  inline-size: 3rem;
  block-size: 3rem;
}

Spacious panel

color-input::part(panel) {
  max-inline-size: min(90vw, 42rem);
}

color-input::part(area) {
  border-radius: 1rem;
}

Custom invalid styling

When the inline text value is invalid, the host receives data-error.

color-input[data-error]::part(input) {
  border-color: oklch(62% 0.25 25);
}

color-input[data-error]::part(error) {
  color: oklch(62% 0.25 25);
}

Example: Circle Swatches

A compact swatch style, perfect for color palettes:

Result

CSS

.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(input) {
  display: none;
}

HTML

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

Tip

Combine parts for more control. For example, hide ::part(area) for a more compact picker or hide ::part(input) for a pure swatch launcher. Theme-specific styling can target selectors like color-input[theme="dark"]::part(trigger).

Things to keep in mind

Shadow DOM boundaries

Prefer:

• ::part(...) for exposed regions
• host attributes such as [theme] and [data-error]
• layout styles on the custom element itself

Avoid depending on undocumented internal descendants in the shadow tree.

Layout behavior

The host element contains:

• the trigger button
• the inline text input wrapper
• the popover panel

That means the easiest external customizations are usually host-level spacing plus part-level styling of the trigger, input, panel, and area.

Accessibility-friendly customization

When customizing the picker:

• keep the trigger visibly interactive
• preserve visible focus treatment
• maintain readable contrast in the text field and panel
• make sure custom panel sizes still leave enough room for the area picker and controls