Color Picker

A color selection control. Built on native <input type="color"> with a styled swatch and hex value display.

Component Skill — components/color-picker/component-skill.md

Native basis

<input type="color"> element with label.

Web Platform APIs

<input type="color">

Classes

.color-picker .color-picker-value

Notes

• The native color picker renders a full-featured dialog — no JS needed.

• The wrapper adds a styled border and displays the current hex value.

• The color swatch is provided by the browser's native <input type="color">.

Default

Color picker with hex value display.

Background Color

#6366f1

<div class="color-picker">
  <input type="color" value="#6366f1">
  <span class="color-picker-value">#6366f1</span>
</div>

Multiple pickers

Foreground

#0a0a0a

Background

#fafafa

<div class="color-picker">
  <input type="color" value="#0a0a0a">
  <span class="color-picker-value">#0a0a0a</span>
</div>

CSS view file

/* -- Color Picker component ------------------------------------- */

@layer components {
  .color-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    box-shadow: var(--shadow-xs);

    & input[type="color"] {
      -webkit-appearance: none;
      appearance: none;
      width: 2rem;
      height: 2rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      padding: 0;
      background: none;

      &::-webkit-color-swatch-wrapper { padding: 0; }
      &::-webkit-color-swatch {
        border: none;
        border-radius: calc(var(--radius-sm) - 1px);
      }
      &::-moz-color-swatch {
        border: none;
        border-radius: calc(var(--radius-sm) - 1px);
      }
    }

    & .color-picker-value {
      font-size: 0.8125rem;
      font-family: var(--font-mono);
      color: var(--muted-foreground);
    }
  }
}

JavaScript view file

Color Picker

// -- Color Picker ---------------------------------------------
// Syncs the hex value display with the color input.

function init() {
  document.querySelectorAll('.color-picker:not([data-init])').forEach((picker) => {
  picker.dataset.init = '';
  const input = picker.querySelector('input[type="color"]');
  const display = picker.querySelector('.color-picker-value');
  if (!input || !display) return;

  display.textContent = input.value;
  input.addEventListener('input', () => {
    display.textContent = input.value;
  });
});
}

init();
new MutationObserver(init).observe(document, { childList: true, subtree: true });