<color-inline>

<color-inline>

Basic use:

<color-inline>lch(50% 40 30)</color-inline>

You can use value to set the color swatch while displaying something else as the content (or even nothing at all):

<color-inline value="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>

Reference

Slots

Name Description
(default) The element’s main content—the color to be shown. Placed next to the color swatch.

Attributes & Properties

Attribute Property Property type Default value Description
color color Color | null - The current color value. null for invalid colors.
value value string - The textual form of the color. Will have a value even if the color is invalid.

CSS variables

Variable Type Description
--transparency-grid <image> Gradient used as a background for transparent parts of the swatch.
--transparency-tile-size <length> The size of the tiles in the transparency grid. This will not be used if you are overriding --transparency-grid
--border-width <length> The width of the border around the swatch.
--box-shadow-blur <length> The blur radius of the box shadow around the swatch.
--box-shadow-color <color> The color of the box shadow around the swatch.

Parts

Name Description
swatch-wrapper The component’s base wrapper.
swatch An internal element used to provide a visual preview of the current color.

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";