<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/color-inline/color-inline.js" type="module"></script>

or in JS:

import "https://elements.colorjs.io/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";