<color-inline>
Basic use:
<color-inline>lch(50% 40 30)</color-inline>
Editable:
<color-inline contentEditable>lch(50% 40 30)</color-inline>
Semi-transparent color:
<color-inline>hsl(340 90% 50% / .25)</color-inline>
Invalid color:
<color-inline>foobar</color-inline>
Installation
To install all color elements, check out the instructions on the homepage.
The rest of this section is about using only <color-inline>
.
The quick and dirty way is straight from the CDN (kindly provided by Netlify):
<script src="https://elements.colorjs.io/src/color-inline/color-inline.js" type="module"></script>
or in JS:
import "https://elements.colorjs.io/src/color-inline/color-inline.js";
If you are using npm to manage your dependencies, you can import it via:
import "color-elements/color-inline";
or:
import { ColorInline } from "color-elements";