<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;

Attribute	Property	Property type	Default value	Description
`gamuts`	`gamuts`	`string` \| `Array<string>` \| `object`	`["srgb", "p3", "rec2020", "prophoto"]`	A list of gamuts to use.
`color`	`color`	`Color` \| `string`	-	The current color value.

Name	Description
`gamutchange`	Fired when the gamut changes for any reason, and once during initialization.

Variable	Type	Description
`--color-green`	`<color>`	Green background color of gamut indicator. Used when the color is within the first gamut.
`--color-yellow`	`<color>`	Yellow background color of gamut indicator. Used when the color is within the second gamut.
`--color-orange`	`<color>`	Orange background color of gamut indicator. Used when the color is within the third gamut.
`--color-red`	`<color>`	Red background color of gamut indicator. Used when the color is within the fourth gamut.
`--color-red-dark`	`<color>`	Dark red background color of gamut indicator. Used when the provided color fits none of the specified gamuts.
`--gamut-color`	`<color>`	Background color of gamut indicator. Will override the color that depends on the actual gamut, so you should rarely use this directly.

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";