Color Picker

Select a color and opacity and return a HEX, RGB, or HSB value.

<sy-colorpicker>Installation guide Basic usage

Live preview

Interact with the component to see results here.

View code

HTML

<sy-colorpicker
  format="hex"
  opacity="1"
  trigger="click"
  showtext
  value="#6750a4"
  id="sample"
></sy-colorpicker>

Usage guide

Use when users need to choose an arbitrary color. A fixed palette is simpler when only predefined brand colors are allowed.

Open when needed

The default popup is suitable for a compact color setting.

Adjust continuously

Keep the panel visible with inline for repeated color adjustments.

Color format: Pass value as HEX, RGB, or HSB matching format.
Opacity: opacity ranges from 0 to 1. Use hideOpacity when opacity adjustment is unnecessary.

Examples

Color value and format

Represent the same purple in three formats. Open each item and edit its value.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-colorpicker
    format="hex"
    value="#6750a4"
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    format="rgb"
    value="rgb(103, 80, 164)"
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    format="hsb"
    value="hsb(256, 51%, 64%)"
    showtext
  ></sy-colorpicker>
</div>

Always-visible editor panel

inline shows the color area and inputs without a separate button.

View code

HTML

<sy-colorpicker inline value="#6750a4"></sy-colorpicker>

Opacity

The left color has 50% opacity. The right color is opaque and its opacity cannot be changed.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-colorpicker
    value="#6750a4"
    opacity="0.5"
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    value="#1976d2"
    hideopacity
    showtext
  ></sy-colorpicker>
</div>

Custom trigger

Use the trigger slot to provide a button that describes the action.

View code

HTML

<sy-colorpicker value="#6750a4">
  <sy-button slot="trigger" variant="secondary">Brand color</sy-button>
</sy-colorpicker>

Change color externally

setColor accepts both a value and a format. open and close control the popup.

View code

HTML

<sy-colorpicker
  value="#6750a4"
  showtext
  id="sample"
></sy-colorpicker>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Apply blue</sy-button>
  <sy-button id="action-1" size="small">Open panel</sy-button>
  <sy-button id="action-2" size="small">Close panel</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setColor("#1976d2", "hex");
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.open();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.close();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Disabled and read only

Both states prevent users from opening the panel to change the color.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-colorpicker
    value="#6750a4"
    disabled
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    value="#1976d2"
    readonly
    showtext
  ></sy-colorpicker>
</div>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-colorpicker
  format="hex"
  opacity="1"
  trigger="click"
  showtext
  value="#6750a4"
  id="sample"
></sy-colorpicker>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["changed", "opened", "closed", "format-change", "colorChange"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Set an initial color

defaultValue sets the initial color when value is not specified. At runtime, use setColor(value, format) to change the color.

View code

HTML

<sy-colorpicker default-value="#1976d2" showtext></sy-colorpicker>

Feature examples

Choose a feature from 10 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.