UWC Components
  • Default
  • Material
  • Fluent

On this page

ColorPicker

ColorPicker is an input component to select a color with an HSV palette, hue slider, and format inputs.

uwc-colorpicker is a full-featured color picker built on Lit. It provides an HSV color area, hue slider, alpha channel, hex/rgb/hsb format inputs, and an inline mode.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcColorPicker } from '@uwc/components/colorpicker';
customElements.define('uwc-colorpicker', UwcColorPicker);

React

import { UwcColorPicker } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-colorpicker value="#6366f1"></uwc-colorpicker>`;
  }
}

React

import React from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  return <UwcColorPicker value="#6366f1" />;
}

Angular

import { Component } from '@angular/core';
import '@uwc/colorpicker';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-colorpicker value="#6366f1"></uwc-colorpicker>`,
})
export class AppComponent {}

Vue

import '@uwc/colorpicker';

export default {
  template: `<uwc-colorpicker value="#6366f1"></uwc-colorpicker>`,
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('colorpicker-overview-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
        <uwc-colorpicker value="#6366f1"></uwc-colorpicker>
        <uwc-colorpicker value="#22c55e"></uwc-colorpicker>
        <uwc-colorpicker value="#f59e0b"></uwc-colorpicker>
      </div>
    `;
  }
}

import React from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcColorPicker value="#6366f1" />
      <UwcColorPicker value="#22c55e" />
      <UwcColorPicker value="#f59e0b" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-colorpicker value="#6366f1"></uwc-colorpicker>
      <uwc-colorpicker value="#22c55e"></uwc-colorpicker>
      <uwc-colorpicker value="#f59e0b"></uwc-colorpicker>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-colorpicker value="#6366f1"></uwc-colorpicker>
      <uwc-colorpicker value="#22c55e"></uwc-colorpicker>
      <uwc-colorpicker value="#f59e0b"></uwc-colorpicker>
    </div>
  `
};

Basic

Click the swatch to open the color picker panel. Drag within the color area and hue slider to select a color. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('colorpicker-basic-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
        <uwc-colorpicker value="#6366f1"></uwc-colorpicker>
        <uwc-colorpicker value="#22c55e"></uwc-colorpicker>
        <uwc-colorpicker value="#ef4444"></uwc-colorpicker>
        <uwc-colorpicker value="#f59e0b"></uwc-colorpicker>
      </div>
    `;
  }
}

import React from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcColorPicker value="#6366f1" />
      <UwcColorPicker value="#22c55e" />
      <UwcColorPicker value="#ef4444" />
      <UwcColorPicker value="#f59e0b" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-colorpicker value="#6366f1"></uwc-colorpicker>
      <uwc-colorpicker value="#22c55e"></uwc-colorpicker>
      <uwc-colorpicker value="#ef4444"></uwc-colorpicker>
      <uwc-colorpicker value="#f59e0b"></uwc-colorpicker>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-colorpicker value="#6366f1"></uwc-colorpicker>
      <uwc-colorpicker value="#22c55e"></uwc-colorpicker>
      <uwc-colorpicker value="#ef4444"></uwc-colorpicker>
      <uwc-colorpicker value="#f59e0b"></uwc-colorpicker>
    </div>
  `
};

Inline mode

Set inline to render the picker panel directly without a swatch trigger.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('colorpicker-inline-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-colorpicker value="#6366f1" inline></uwc-colorpicker>`;
  }
}

import React from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  return <UwcColorPicker value="#6366f1" inline />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-colorpicker value="#6366f1" inline></uwc-colorpicker>`
})
export class AppComponent {}

export default {
  template: `<uwc-colorpicker value="#6366f1" inline></uwc-colorpicker>`
};

Formats

Use the format attribute (hex, rgb, hsb) to control the output value format. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('colorpicker-formats-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;">
        <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
          <span style="font-size:.75rem;color:#64748b;">HEX</span>
          <uwc-colorpicker value="#6366f1" format="hex" inline></uwc-colorpicker>
        </div>
        <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
          <span style="font-size:.75rem;color:#64748b;">RGB</span>
          <uwc-colorpicker value="rgb(99, 102, 241)" format="rgb" inline></uwc-colorpicker>
        </div>
        <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
          <span style="font-size:.75rem;color:#64748b;">HSB</span>
          <uwc-colorpicker value="hsb(239, 59, 95)" format="hsb" inline></uwc-colorpicker>
        </div>
      </div>
    `;
  }
}

import React from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  const labelStyle = { fontSize: '.75rem', color: '#64748b' };
  const colStyle = { display: 'flex', flexDirection: 'column', gap: '.25rem', alignItems: 'center' };
  return (
    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start', flexWrap: 'wrap' }}>
      <div style={colStyle}>
        <span style={labelStyle}>HEX</span>
        <UwcColorPicker value="#6366f1" format="hex" inline />
      </div>
      <div style={colStyle}>
        <span style={labelStyle}>RGB</span>
        <UwcColorPicker value="rgb(99, 102, 241)" format="rgb" inline />
      </div>
      <div style={colStyle}>
        <span style={labelStyle}>HSB</span>
        <UwcColorPicker value="hsb(239, 59, 95)" format="hsb" inline />
      </div>
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;">
      <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
        <span style="font-size:.75rem;color:#64748b;">HEX</span>
        <uwc-colorpicker value="#6366f1" format="hex" inline></uwc-colorpicker>
      </div>
      <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
        <span style="font-size:.75rem;color:#64748b;">RGB</span>
        <uwc-colorpicker value="rgb(99, 102, 241)" format="rgb" inline></uwc-colorpicker>
      </div>
      <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
        <span style="font-size:.75rem;color:#64748b;">HSB</span>
        <uwc-colorpicker value="hsb(239, 59, 95)" format="hsb" inline></uwc-colorpicker>
      </div>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;">
      <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
        <span style="font-size:.75rem;color:#64748b;">HEX</span>
        <uwc-colorpicker value="#6366f1" format="hex" inline></uwc-colorpicker>
      </div>
      <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
        <span style="font-size:.75rem;color:#64748b;">RGB</span>
        <uwc-colorpicker value="rgb(99, 102, 241)" format="rgb" inline></uwc-colorpicker>
      </div>
      <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
        <span style="font-size:.75rem;color:#64748b;">HSB</span>
        <uwc-colorpicker value="hsb(239, 59, 95)" format="hsb" inline></uwc-colorpicker>
      </div>
    </div>
  `
};
HEX
RGB
HSB

Alpha channel

Add show-alpha to display a transparency slider.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('colorpicker-alpha-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-colorpicker value="#6366f1" show-alpha inline></uwc-colorpicker>`;
  }
}

import React from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  return <UwcColorPicker value="#6366f1" showAlpha inline />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-colorpicker value="#6366f1" show-alpha inline></uwc-colorpicker>`
})
export class AppComponent {}

export default {
  template: `<uwc-colorpicker value="#6366f1" show-alpha inline></uwc-colorpicker>`
};

Disabled

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('colorpicker-disabled-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-colorpicker value="#6366f1" disabled></uwc-colorpicker>`;
  }
}

import React from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  return <UwcColorPicker value="#6366f1" disabled />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-colorpicker value="#6366f1" disabled></uwc-colorpicker>`
})
export class AppComponent {}

export default {
  template: `<uwc-colorpicker value="#6366f1" disabled></uwc-colorpicker>`
};

Reactive

Listen to uwc-change to get the selected color as { hex, rgb, hsb, alpha }. 

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('colorpicker-reactive-demo')
export class AppDemo extends LitElement {
  @state() private _color = '#6366f1';

  render() {
    return html`
      <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;">
        <uwc-colorpicker
          .value=${this._color}
          inline
          @uwc-change=${(e) => { this._color = e.detail.hex; }}>
        </uwc-colorpicker>
        <div style="display:flex;flex-direction:column;gap:.5rem;">
          <div style="width:5rem;height:5rem;border-radius:.5rem;border:1px solid #e5e7eb;"
               .style=${'background:' + this._color}></div>
          <code style="font-size:.75rem;">${this._color}</code>
        </div>
      </div>
    `;
  }
}

import React, { useState } from 'react';
import { UwcColorPicker } from '@uwc/components/react';

export default function App() {
  const [color, setColor] = useState('#6366f1');
  const swatchStyle = {
    width: '5rem', height: '5rem', borderRadius: '.5rem',
    border: '1px solid #e5e7eb', background: color,
  };
  return (
    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcColorPicker value={color} inline onUwcChange={e => setColor(e.detail.hex)} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
        <div style={swatchStyle} />
        <code style={{ fontSize: '.75rem' }}>{color}</code>
      </div>
    </div>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;">
      <uwc-colorpicker
        [value]="color()"
        inline
        (uwc-change)="color.set($event.detail.hex)">
      </uwc-colorpicker>
      <div style="display:flex;flex-direction:column;gap:.5rem;">
        <div [style.background]="color()"
             style="width:5rem;height:5rem;border-radius:.5rem;border:1px solid #e5e7eb;">
        </div>
        <code style="font-size:.75rem;">{{ color() }}</code>
      </div>
    </div>
  `
})
export class AppComponent {
  readonly color = signal('#6366f1');
}

export default {
  data() {
    return { color: '#6366f1' };
  },
  template: `
    <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;">
      <uwc-colorpicker
        :value="color"
        inline
        @uwc-change="color = $event.detail.hex">
      </uwc-colorpicker>
      <div style="display:flex;flex-direction:column;gap:.5rem;">
        <div :style="{ background: color }"
             style="width:5rem;height:5rem;border-radius:.5rem;border:1px solid #e5e7eb;"></div>
        <code style="font-size:.75rem;">{{ color }}</code>
      </div>
    </div>
  `
};

Attributes

Name Type Default Description
value — — Current color (hex string by default).
format — — hex | rgb | hsb. Default: hex.
placement — — Panel placement. Default: bottom-start.
offset — — Gap between swatch and panel. Default: 6.
inline — — Render panel inline (no swatch trigger, always visible).
disabled — — Disable the picker.
default-color — — Fallback initial color. Default: #ff0000.
show-alpha — — Show the alpha transparency slider.

Properties

Name Type Default Description
styles CSSResultGroup [styles] —
placement Placement 'bottom-start' —
offset number 6 —
value string '#ff0000' —
format ColorFormat 'hex' —
inline boolean false —
disabled boolean false —
defaultColor string '#ff0000' —
showAlpha boolean false —

Events

Name Type Description
uwc-change CustomEvent Fired when the color changes. detail: { value, format, rgb: {r,g,b}, hex, alpha }
uwc-show CustomEvent Panel opened.
uwc-hide CustomEvent Panel closed.

CSS Custom Properties

Name Default Description
--uwc-colorpicker-swatch-size — Swatch size. Default: 2rem.
--uwc-colorpicker-swatch-radius — Swatch radius.
--uwc-colorpicker-panel-width — Panel width. Default: 13.5rem.
--uwc-cp-duration — Animation duration. Default: 140ms.

CSS Parts

Name Description
swatch The color swatch trigger button.
panel The picker panel (popover).