<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
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. |
Getters
These properties are read-only.
| Property | Type | Description |
|---|---|---|
gamut |
string |
The id of the current gamut (e.g. srgb). |
gamutLabel |
string |
The label of the current gamut (e.g. sRGB). |
gamutInfo |
object |
Metadata about the current gamut (label, id, level). |
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";