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

Reference

Attributes & Properties

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.

Events

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

CSS variables

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.

Demo

oklch(% –% )

No label:

Default display:

Installation

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