<color-gamut>
Gamut indicator. Used internally by <color-swatch>
Usage
Static (only read once):
<color-gamut>red</color-gamut>
Produces
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
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";