vanilla-colorful

While the default is HEX, vanilla-colorful provides 12 additional color picker bundles for different models (HSL, HSV, RGB, etc.). Each bundle corresponds to a specific HTML element and value format.

Available Pickers Reference

Example: Using RGBA

<rgba-color-picker></rgba-color-picker>
<script type="module">
  import 'vanilla-colorful/rgba-color-picker.js';

  const picker = document.querySelector('rgba-color-picker');
  picker.color = { r: 50, g: 100, b: 150, a: 1 };
</script>

The default picker uses HEX strings (e.g., #ffffff) for input and output. To use it, import the package and listen for the color-changed event to react to user input.

<hex-color-picker color="#1e88e5"></hex-color-picker>
<script type="module">
  import 'vanilla-colorful';

  const picker = document.querySelector('hex-color-picker');
  
  // Listen for changes
  picker.addEventListener('color-changed', (event) => {
    const newColor = event.detail.value;
  });

  // Access current color via property
  console.log(picker.color);
</script>

<hex-color-picker color="#1e88e5"></hex-color-picker>
<script type="module">
  import 'vanilla-colorful';

  const picker = document.querySelector('hex-color-picker');
  picker.addEventListener('color-changed', (event) => {
    // get updated color value
    const newColor = event.detail.value;
  });

  // get current color value
  console.log(picker.color);
</script>

The <rgba-color-picker> is a custom element used for selecting colors in RGBA format.

Properties

• color: An RgbaColor object representing the currently selected color.

Events

• color-changed: Fired whenever the selected color property changes.

CSS Shadow Parts

You can style the internal components of the picker using the ::part() pseudo-element with the following keys:

• hue: The hue selector container.
• saturation: The saturation selector container.
• alpha: The alpha selector container.
• hue-pointer: The pointer element for hue selection.
• saturation-pointer: The pointer element for saturation selection.
• alpha-pointer: The pointer element for alpha selection.

<!-- HTML Usage -->
<rgba-color-picker id="picker"></rgba-color-picker>

<script>
  const picker = document.querySelector('#picker');

  // Listen for color changes
  picker.addEventListener('color-changed', (event) => {
    console.log('New color:', picker.color);
  });

  // Set an initial color
  picker.color = { r: 255, g: 0, b: 0, a: 1 };
</script>

<style>
  /* Example of styling via CSS parts */
  rgba-color-picker::part(hue-pointer) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
</style>

The <rgb-color-picker> is a custom element used to select colors using the RGB object format.

Properties

• color: An RgbColor object representing the currently selected color.

Events

• color-changed: Fired whenever the selected color property changes.

CSS Shadow Parts

You can style the internal components of the picker using the ::part pseudo-element:

• hue: The hue selector container.
• saturation: The saturation selector container.
• hue-pointer: The element representing the hue pointer.
• saturation-pointer: The element representing the saturation pointer.

<!-- HTML Usage -->
<rgb-color-picker id="picker"></rgb-color-picker>

<script>
  const picker = document.querySelector('#picker');

  // Listen for color changes
  picker.addEventListener('color-changed', (event) => {
    console.log('New color:', picker.color);
  });

  // Set a color programmatically
  picker.color = { r: 255, g: 0, b: 0 };
</script>

<!-- Styling via CSS Shadow Parts -->
<style>
  rgb-color-picker::part(hue-pointer) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
</style>