<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-cell-size |
<length> |
The size of the tiles in the transparency grid. This will not be used if you are overriding --transparency-grid. |
--transparcency-background |
<color> |
The background color of the transparency gradient. |
--transparency-darkness |
<percentage> |
The opacity of the black color used for dark parts of the transparency gradient. |
--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";