<gamut-badge>

<gamut-badge>

Gamut indicator. Used internally by <color-swatch>

Usage

Static (only read once):

<gamut-badge color="red"></gamut-badge>

Invalid color:

<gamut-badge color="poop"></gamut-badge>

Missing color:

<gamut-badge></gamut-badge>

Dynamic:

<gamut-badge id="cg_1" color="red"></gamut-badge>
<script>cg_1.color = "oklch(50% 0.5 180)";</script>

Demo

oklch(% % )

No label:

Default display:

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.

Slots

Slot Description
(default) Custom content

CSS variables

Variable Type Default value Description
--color-green <color> Starting color of the background color scale. Used when the color is within the first gamut.
--color-yellow <color> Yellow color to be used at around 33.3% of the color scale Will be used for the second gamut if there are four total.
--color-orange <color> Orange color to be used at around 66.6% of the color scale. Will be used for the third gamut if there are four total.
--color-red <color> Red color to be used as the last stop of the color scale. Used when the color is within the last gamut.
--color-red-dark <color> Dark red background color of gamut indicator. Used when the provided color fits none of the specified gamuts.
--color-invalid <color> Background color of gamut indicator when the provided color is invalid.

Output-only CSS variables

These variables are set by the component. You can write CSS that reacts to them, but you should not set them yourself unless you really know what you’re doing.

Variable Type Default value Description
--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.
--gamut-level <integer> - The index of the gamut the current color fits in, starting from 0. You can use this in styling, but don’t overwrite it.

CSS Parts

Part Description
label The label of the gamut indicator. Does not apply if the element has content.

Installation

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

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

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

or in JS:

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

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

import "color-elements/gamut-badge";

or:

import { GamutBadge } from "color-elements";