<color-gamut>
Gamut indicator. Used internally by <color-swatch>
Usage
Static (only read once):
<color-gamut>red</color-gamut>
Produces red
Dynamic:
colorGamutElement.color = colorValue;
Demo
No label:
oklch(50% 30% 50)
oklch(50% 30.2% 50)
oklch(50% 30.4% 50)
oklch(50% 30.6% 50)
oklch(50% 30.8% 50)
oklch(50% 31% 50)
oklch(50% 31.2% 50)
oklch(50% 31.4% 50)
oklch(50% 31.6% 50)
oklch(50% 31.8% 50)
oklch(50% 32% 50)
oklch(50% 32.2% 50)
oklch(50% 32.4% 50)
oklch(50% 32.6% 50)
oklch(50% 32.8% 50)
oklch(50% 33% 50)
oklch(50% 33.2% 50)
oklch(50% 33.4% 50)
oklch(50% 33.6% 50)
oklch(50% 33.8% 50)
oklch(50% 34% 50)
oklch(50% 34.2% 50)
oklch(50% 34.4% 50)
oklch(50% 34.6% 50)
oklch(50% 34.8% 50)
oklch(50% 35% 50)
oklch(50% 35.2% 50)
oklch(50% 35.4% 50)
oklch(50% 35.6% 50)
oklch(50% 35.8% 50)
oklch(50% 36% 50)
oklch(50% 36.2% 50)
oklch(50% 36.4% 50)
oklch(50% 36.6% 50)
oklch(50% 36.8% 50)
oklch(50% 37% 50)
oklch(50% 37.2% 50)
oklch(50% 37.4% 50)
oklch(50% 37.6% 50)
oklch(50% 37.8% 50)
oklch(50% 38% 50)
oklch(50% 38.2% 50)
oklch(50% 38.4% 50)
oklch(50% 38.6% 50)
oklch(50% 38.8% 50)
oklch(50% 39% 50)
oklch(50% 39.2% 50)
oklch(50% 39.4% 50)
oklch(50% 39.6% 50)
oklch(50% 39.8% 50)
Default display:
oklch(50% 30% 50)
oklch(50% 30.2% 50)
oklch(50% 30.4% 50)
oklch(50% 30.6% 50)
oklch(50% 30.8% 50)
oklch(50% 31% 50)
oklch(50% 31.2% 50)
oklch(50% 31.4% 50)
oklch(50% 31.6% 50)
oklch(50% 31.8% 50)
oklch(50% 32% 50)
oklch(50% 32.2% 50)
oklch(50% 32.4% 50)
oklch(50% 32.6% 50)
oklch(50% 32.8% 50)
oklch(50% 33% 50)
oklch(50% 33.2% 50)
oklch(50% 33.4% 50)
oklch(50% 33.6% 50)
oklch(50% 33.8% 50)
oklch(50% 34% 50)
oklch(50% 34.2% 50)
oklch(50% 34.4% 50)
oklch(50% 34.6% 50)
oklch(50% 34.8% 50)
oklch(50% 35% 50)
oklch(50% 35.2% 50)
oklch(50% 35.4% 50)
oklch(50% 35.6% 50)
oklch(50% 35.8% 50)
oklch(50% 36% 50)
oklch(50% 36.2% 50)
oklch(50% 36.4% 50)
oklch(50% 36.6% 50)
oklch(50% 36.8% 50)
oklch(50% 37% 50)
oklch(50% 37.2% 50)
oklch(50% 37.4% 50)
oklch(50% 37.6% 50)
oklch(50% 37.8% 50)
oklch(50% 38% 50)
oklch(50% 38.2% 50)
oklch(50% 38.4% 50)
oklch(50% 38.6% 50)
oklch(50% 38.8% 50)
oklch(50% 39% 50)
oklch(50% 39.2% 50)
oklch(50% 39.4% 50)
oklch(50% 39.6% 50)
oklch(50% 39.8% 50)
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/color-gamut/color-gamut.js" type="module"></script>
or in JS:
import "https://elements.colorjs.io/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";