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% 0.2 280)
Color Space: oklch
Gamut: —
Contrast Color: —

View Code

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

Respects your system preference

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

View Code

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

Always light, regardless of system

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

View Code

<color-input
  value="oklch(65% 0.2 280)"
  colorspace="oklch"
  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
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

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 label for a pure swatch look */
.circle-swatch::part(label) {
  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>

.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(trigger):hover {
  border-color: oklch(60% 0.2 280);
  background: oklch(90% 0.08 280);
}

.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);
}

.pill-style::part(panel) {
  border-radius: 0px;
}

Minimal Flat Design

Result
CSS

.minimal-style::part(trigger) {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  background: transparent;
  box-shadow: 0 0 0 1px oklch(80% 0.02 280);
}

.minimal-style::part(trigger):hover {
  background: oklch(96% 0.02 280);
}

.minimal-style::part(chip) {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid oklch(85% 0.02 280);
}

.minimal-style::part(panel) {
  border-radius: 8px;
  border: 1px solid oklch(85% 0.02 280);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.minimal-style::part(output) {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  color: oklch(40% 0.05 280);
}

Bold Gradient Style

Result
CSS

.gradient-style::part(trigger) {
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  background: linear-gradient(135deg,
    oklch(75% 0.15 300),
    oklch(65% 0.18 260)
  );
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gradient-style::part(trigger):hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.gradient-style::part(chip) {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gradient-style::part(panel) {
  border-radius: 16px;
  border: 2px solid oklch(70% 0.15 280);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  background: linear-gradient(
    to bottom,
    oklch(98% 0.02 280),
    oklch(96% 0.03 280)
  );
}

.gradient-style::part(gamut) {
  background: oklch(70% 0.15 280);
  color: white;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

Theme-Specific Styling

Customize parts based on the current theme:

/* Light theme customization */
color-input[theme="light"]::part(panel) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Dark theme customization */
color-input[theme="dark"]::part(panel) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Auto adapts to system */
@media (prefers-color-scheme: dark) {
  color-input[theme="auto"]::part(panel) {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}

Parts Reference

Part	Description
`trigger`	Button that opens the picker
`chip`	Color swatch preview
`label`	Text label (if any)
`panel`	Popover container
`output`	Current color value display
`gamut`	Gamut badge
`controls`	Sliders and inputs container