draw-tools/static/components/color-picker

ColorPicker Component

Overview

ColorPicker is a custom HTML web component that provides a simple UI for selecting a background color.
The component renders a native <input type="color"> element and forwards the chosen color via a custom colorchange event.

Usage

<script type="module" src="/static/components/color-picker/color-picker.js"></script>

<color-picker></color-picker>

API

Attribute / Property	Type	Description
value (attr)	string	Hex color string (e.g., #ff0000). Default is #ffffff.
value (prop)	string	Same as above, but as a JavaScript property.

Events

Event	Detail	Description
colorchange	{color: string} (hex)	Fired whenever the user selects a new color.

Example

<color-picker id="bgPicker"></color-picker>

<script>
  const picker = document.getElementById('bgPicker');
  picker.addEventListener('colorchange', e => {
    console.log('Background color selected:', e.detail.color);
  });
</script>

Change Log

Date	Author	Change
2026‑01‑11	Thomas	Initial component documentation.