<color-gamut>

Gamut indicator. Used internally by <color-swatch>

Usage

Static (only read once):

<color-gamut>red</color-gamut>

Produces red

Dynamic:

colorGamutElement.color = colorValue;

oklch(% –% )

Chroma increments: %

No label:

Default display:

To install all color elements, check out the instructions on the homepage. The rest of this section is about using only <color-gamut>.

The quick and dirty way is straight from the CDN (kindly provided by Netlify):

<script src="https://elements.colorjs.io/src/color-gamut/color-gamut.js" type="module"></script>

or in JS:

import "https://elements.colorjs.io/src/color-gamut/color-gamut.js";

If you are using npm to manage your dependencies, you can import it via:

import "color-elements/color-gamut";

or:

import { ColorGamut } from "color-elements";