Gamut indicator. Used internally by <color-swatch>
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>
oklch(% –% )
Chroma increments: %
<script type=module> params.addEventListener("input", e => { let c_range = {min: Number(min_c.value), max: Number(max_c.value)}; let step = Number(c_step.value); if (step <= 0) { step = 1; } let colors = []; let start = `oklch(${l.value}% ${c_range.min.toLocaleString("en")}% ${h.value})`; let end = `oklch(${l.value}% ${c_range.max.toLocaleString("en")}% ${h.value})`; params.style.setProperty("--start-color", start); params.style.setProperty("--end-color", end); for (let c = c_range.min; c<= c_range.max; c+=step) { colors.push(`oklch(${l.value}% ${c.toLocaleString("en")}% ${h.value})`); } let html = colors.map(color => ` `).join("\n"); colors_container_h.innerHTML = html; colors_container.innerHTML = html; }); params.dispatchEvent(new Event("input")); </script>No label:
Default display:
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. |
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). |
Name | Description |
---|---|
gamutchange |
Fired when the gamut changes for any reason, and once during initialization. |
Slot | Description |
---|---|
(default) | Custom content |
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. |
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. |
Part | Description |
---|---|
label |
The label of the gamut indicator. Does not apply if the element has content. |