<rgb-color-mixer>

This is a RGB Color Mixer webcomponent built using lit and spectral.js.

Without installation

<script type="module" src="https://esm.sh/rgb-color-mixer"></script>

<rgb-color-mixer initialValue="hotpink"></rgb-color-mixer>

Installation

Install the RGB Color Mixer package

npm install rgb-color-mixer

Usage

Minimal example

import 'rgb-color-mixer';

<rgb-color-mixer initialValue="hotpink"></rgb-color-mixer>;

Sync with a swatch

<div id="swatch" style="width: 2rem; height: 2rem;"></div>
<rgb-color-mixer id="mixer" initialValue="hotpink"></rgb-color-mixer>

<script>
  const swatchEl = document.getElementById('swatch');
  const mixerEl = document.getElementById('mixer');

  mixerEl.addEventListener('update:value', (event) => {
    swatchEl.style.backgroundColor = event.detail.value;
  });
</script>

Set a custom color via setColor method

Parses the text using the color-rgba library and sets the color.

<rgb-color-mixer id="mixer"></rgb-color-mixer>

<script>
  const mixerEl = document.getElementById('mixer');

  mixerEl.setColor('hotpink');
</script>

API

Read the API documentation here: API

Examples

There are examples provided in the examples folder.

License

<rgb-color-mixer> is distributed under the MIT License.