Delta Color

This component is helpful for demostrating a color transformation. The input is a browser color picker and the selected color is displayed in RGB on the left. The color is transformed based on the needs of the experience and shown as an RGB value on the right. The middle value can display a value important to be conveyed during the transformation.

Example

engineer Info

Mounting

In order to work with this component, you first must make sure it is defined. If using within another web component, check for the definition first in the connected callback before completing the wiring.

class MyComponent extends window.HTMLElement {
  constructor() { super() }
  connectedCallback() {
    window.customElements.whenDefined('delta-color').then(() => {
      // component is defined
    });
  }
}

Wiring

Next you'll add a function to the onColorChange property of the element. The function will give you the color as a RGB object as the only argument when the color is changed. You can create your own RGB object using the toObject() method on the element for comparisons.

const json = ['#ff0000']; // Assume list of hex colors
class MyComponent extends window.HTMLElement {
  constructor() { super() }
  connectedCallback() {
    window.customElements.whenDefined('delta-color').then(() => {
      const colors = json.map((color) => control.toObject(color));
      control.onColorChange = (input) => {};
    });
  }
}

Labeling

There are three slots used to define the labels for the delta-color component. Below is the HTML used to compose the delta-color-accent component used in the Color examples.

<delta-color>
  <span slot="label-input">Chosen</span>
  <span slot="label-delta">Distance</span>
  <span slot="label-output">Closest</span>
</delta-color>