LayoutUI
Theme Presets
Browse Components

Color Picker

A color swatch and hex value in one clear field.

Basic

Choose a color with the area and hue slider. Focus the color area and use arrow keys to adjust saturation and brightness.

Choose a color or enter a six-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="brand-color">
    Brand color
  </label>
  <div class="color-picker" data-color-picker data-basic>
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="brand-color"
      name="brand"
      value="#294cda"
      pattern="#[0-9a-fA-F]{6}"
      maxlength="7"
      spellcheck="false"
      autocomplete="off"
      required
      aria-describedby="brand-color-help"
    >
  </div>
  <p class="muted" id="brand-color-help">
    Choose a color or enter a six-digit hex value, such as #294cda.
  </p>
</div>

Full picker

Use the color area, individual sliders, format selector, and Palette together. Eyedropper is available in supporting browsers.

Choose a color or enter a six-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="full-color">
    Brand color
  </label>
  <div class="color-picker" data-color-picker>
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="full-color"
      name="brand"
      value="#294cda"
      pattern="#[0-9a-fA-F]{6}"
      maxlength="7"
      spellcheck="false"
      autocomplete="off"
      required
      aria-describedby="full-color-help"
    >
  </div>
  <p class="muted" id="full-color-help">
    Choose a color or enter a six-digit hex value, such as #294cda.
  </p>
</div>

With opacity

Add data-alpha to allow transparency. The field accepts six- or eight-digit hex; the last two digits store opacity.

Choose a color or enter a six- or eight-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="alpha-color">
    Brand color
  </label>
  <div class="color-picker" data-color-picker data-alpha>
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="alpha-color"
      name="brand"
      value="#294cda80"
      pattern="#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?"
      maxlength="9"
      spellcheck="false"
      autocomplete="off"
      required
      aria-describedby="alpha-color-help"
    >
  </div>
  <p class="muted" id="alpha-color-help">
    Choose a color or enter a six- or eight-digit hex value, such as #294cda.
  </p>
</div>

Basic with opacity

A simpler picker for translucent colors. Adjust hue and opacity below the color area; use arrow keys in the area to adjust saturation and brightness.

Choose a color or enter a six- or eight-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="basic-alpha-color">
    Brand color
  </label>
  <div class="color-picker" data-color-picker data-alpha data-basic>
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="basic-alpha-color"
      name="brand"
      value="#294cda80"
      pattern="#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?"
      maxlength="9"
      spellcheck="false"
      autocomplete="off"
      required
      aria-describedby="basic-alpha-color-help"
    >
  </div>
  <p class="muted" id="basic-alpha-color-help">
    Choose a color or enter a six- or eight-digit hex value, such as #294cda.
  </p>
</div>

Optional color

Clear the text to remove an optional color. A slash marks the empty swatch until a value is chosen.

Choose a color or enter a six-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="optional-color">
    Secondary color (optional)
  </label>
  <div class="color-picker" data-color-picker>
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="optional-color"
      name="secondary"
      value=""
      placeholder="#216b47"
      pattern="#[0-9a-fA-F]{6}"
      maxlength="7"
      spellcheck="false"
      autocomplete="off"
      aria-describedby="optional-color-help"
    >
  </div>
  <p class="muted" id="optional-color-help">
    Choose a color or enter a six-digit hex value, such as #294cda.
  </p>
</div>

Disabled and readonly

Disabled fields cannot be changed or submitted. Readonly values remain available to select and copy.

Choose a color or enter a six-digit hex value, such as #294cda.

Choose a color or enter a six-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="disabled-color">
    Brand color
  </label>
  <div class="color-picker" data-color-picker>
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="disabled-color"
      name="brand"
      value="#294cda"
      pattern="#[0-9a-fA-F]{6}"
      maxlength="7"
      spellcheck="false"
      autocomplete="off"
      disabled
      aria-describedby="disabled-color-help"
    >
  </div>
  <p class="muted" id="disabled-color-help">
    Choose a color or enter a six-digit hex value, such as #294cda.
  </p>
</div>
<div class="field">
  <label for="readonly-color">
    Brand color
  </label>
  <div class="color-picker" data-color-picker>
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="readonly-color"
      name="brand"
      value="#294cda"
      pattern="#[0-9a-fA-F]{6}"
      maxlength="7"
      spellcheck="false"
      autocomplete="off"
      readonly
      aria-describedby="readonly-color-help"
    >
  </div>
  <p class="muted" id="readonly-color-help">
    Choose a color or enter a six-digit hex value, such as #294cda.
  </p>
</div>

Form reset

Choose a color, then reset to restore the original value.

Choose a color or enter a six-digit hex value, such as #294cda.

View Code
HTML
<form class="stack">
  <div class="field">
    <label for="reset-color">
      Brand color
    </label>
    <div class="color-picker" data-color-picker>
      <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
      </button>
      <input
        class="input"
        dir="ltr"
        id="reset-color"
        name="brand"
        value="#294cda"
        pattern="#[0-9a-fA-F]{6}"
        maxlength="7"
        spellcheck="false"
        autocomplete="off"
        required
        aria-describedby="reset-color-help"
      >
    </div>
    <p class="muted" id="reset-color-help">
      Choose a color or enter a six-digit hex value, such as #294cda.
    </p>
  </div>
  <div class="cluster">
    <button class="btn secondary" type="reset">
      Reset Color
    </button>
  </div>
</form>

Right-to-left

The swatch and spacing follow the text direction.

בחרו צבע או הזינו ערך הקסדצימלי בן שש ספרות.

View Code
HTML
<div dir="rtl" lang="he">
  <div class="field">
    <label for="rtl-color">
      צבע מותג
    </label>
    <div
      class="color-picker"
      data-color-picker
      data-title="בחירת צבע"
      data-close="סגירה"
      data-hue="גוון"
      data-saturation="רוויה"
      data-brightness="בהירות"
      data-hex="הקס"
      data-presets="צבעים מוצעים"
    >
      <button type="button" data-color-swatch aria-label="בחירת צבע מותג" hidden>
      </button>
      <input
        class="input"
        dir="ltr"
        id="rtl-color"
        name="brand"
        value="#294cda"
        pattern="#[0-9a-fA-F]{6}"
        maxlength="7"
        spellcheck="false"
        autocomplete="off"
        required
        aria-describedby="rtl-color-help"
      >
    </div>
    <p class="muted" id="rtl-color-help">
      בחרו צבע או הזינו ערך הקסדצימלי בן שש ספרות.
    </p>
  </div>
</div>

Slider with swatch

Adjust hue directly; the adjacent swatch opens the full picker. The hex field remains available without JavaScript.

Choose a color or enter a six-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="hue-color">
    Brand color
  </label>
  <div
    class="color-picker"
    data-color-picker
    data-hue-slider
    data-slider-swatch
    data-hue="Brand hue"
  >
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="hue-color"
      name="brand"
      value="#294cda"
      pattern="#[0-9a-fA-F]{6}"
      maxlength="7"
      spellcheck="false"
      autocomplete="off"
      required
      aria-describedby="hue-color-help"
    >
  </div>
  <p class="muted" id="hue-color-help">
    Choose a color or enter a six-digit hex value, such as #294cda.
  </p>
</div>

Slider only

Use a compact hue control when saturation and brightness are already chosen. The hex field remains the form value and works without JavaScript.

Choose a color or enter a six-digit hex value, such as #294cda.

View Code
HTML
<div class="field">
  <label for="hue-only-color">
    Brand color
  </label>
  <div
    class="color-picker"
    data-color-picker
    data-hue-slider
    data-slider-only
    data-hue="Brand hue"
  >
    <button type="button" data-color-swatch aria-label="Choose Brand Color" hidden>
    </button>
    <input
      class="input"
      dir="ltr"
      id="hue-only-color"
      name="brand"
      value="#294cda"
      pattern="#[0-9a-fA-F]{6}"
      maxlength="7"
      spellcheck="false"
      autocomplete="off"
      required
      aria-describedby="hue-only-color-help"
    >
  </div>
  <p class="muted" id="hue-only-color-help">
    Choose a color or enter a six-digit hex value, such as #294cda.
  </p>
</div>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.cssbutton.cssfield.cssselect.csscolor-picker.cssselect.jscolor-picker.js
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/field.css">
<link rel="stylesheet" href="/library/assets/select.css">
<link rel="stylesheet" href="/library/assets/color-picker.css">
<script defer src="/library/assets/select.js"></script>
<script defer src="/library/assets/color-picker.js"></script>

27,596 bytes CSS including base · 34,201 bytes runtime JavaScript

Usage

Offer direct hue adjustment

Add data-swatch-only for a swatch that opens the full picker without displaying the hex field after enhancement. Add data-hue-slider for a compact inline hue rail alongside the swatch and hex field. Add data-slider-swatch for a single row with a hue rail and a swatch that opens the full picker. Add data-slider-only to display just the rail after enhancement. data-hue supplies its accessible name. Hue preserves saturation and brightness; start with a chromatic color for visible changes. The original hex field remains the named form value and no-JavaScript fallback. Native arrows, Home and End adjust hue.

Keep the value together

Use one labeled color-picker wrapper for the swatch button and editable hex value. Only the text field needs a form name.

Choose or type

Click the swatch or hex field to open the picker. Clicking the field keeps text editing focused; Tab focus alone does not open it. Use the color area with a pointer or the labeled sliders with arrow keys. Escape closes the picker and returns focus. Choose Hex, RGB, CSS, HSL, or HSB to edit in that format; the form value remains hex. Changes apply immediately. Eyedropper samples a screen color in supporting secure browsers; Escape cancels without changing the value. Palette shows the full color scales; choose a shade to return, or choose Color without changing it. Arrow keys move between shades and families.

Handle optional colors

Omit required to allow an empty value. Clear the hex field to remove the color. A slash marks an empty swatch; invalid text never silently replaces the last valid color.

Preserve native behavior

Use disabled, readonly, form reset, and linked help. Update values through input events or color-picker-sync after programmatic changes. Validate submitted colors on the server.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.