`<color-scale>`

Examples

Basic usage

Colors via attribute:

<color-scale space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>

You can also give them optional names:

<color-scale space="oklch" colors="
	Gray 50: #f9fafb,
	Gray 100: #f3f4f6,
	Gray 200: #e5e7eb,
	Gray 300: #d1d5db,
	Gray 400: #9ca3af,
	Gray 500: #6b7280,
	Gray 600: #4b5563,
	Gray 700: #374151,
	Gray 800: #1f2937,
	Gray 900: #111827,
	Gray 850: #1a202c
"></color-scale>

Questions:

What happens when we have both nested swatches and the colors attribute?

Future:

sort attribute?

Installation

To install all color elements, check out the instructions on the homepage. The rest of this section is about using only <color-scale>.

The quick and dirty way is straight from the CDN (kindly provided by Netlify):

<script src="https://elements.colorjs.io/src/color-scale/color-scale.js" type="module"></script>

or in JS:

import "https://elements.colorjs.io/src/color-scale/color-scale.js";

If you are using npm to manage your dependencies, you can import it via:

import "color-elements/color-scale";

or:

import { ColorScale } from "color-elements";