# <gamut-badge>
Gamut indicator. Used internally by ``
## Usage
Static (only read once):
```html
```
Invalid color:
```html
```
Missing color:
```html
```
Dynamic:
```html
```
## Demo
No label:
Default display:
## Reference
### Attributes & Properties
| Attribute | Property | Property type | Default value | Description |
|-----------|----------|---------------|---------------|-------------|
| `gamuts` | `gamuts` | `string` | `Array` | `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` | `` | | Starting color of the background color scale. Used when the color is within the first gamut. |
| `--color-yellow` | `` | | 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` | `` | | 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` | `` | | 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` | `` | | Dark red background color of gamut indicator. Used when the provided color fits none of the specified gamuts. |
| `--color-invalid` | `` | | 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` | `` | | Background color of gamut indicator. Will override the color that depends on the actual gamut, so you should rarely use this directly. |
| `--gamut-level` | `` | - | 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. |