<color-chart>

Display lists of colors as a scatterplot or line chart.

Features

• Plot any coordinate, in any color space
• Customize both X and Y axes independently

Examples

Basic usage

Plotting a single color scale:

<color-chart y="oklch.l">
	<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
</color-chart>

(Colors courtesy of Tailwind)

Default X coordinate

By default, the other coordinate would be the index of the color in the list, but you can specify it explicitly:

<color-chart y="oklch.l">
	<color-scale colors="50: #e3f2fd, 100: #bbdefb, 200: #90caf9, 300: #64b5f6, 400: #42a5f5, 500: #2196f3, 600: #1e88e5, 700: #1976d2, 800: #1565c0, 900: #0d47a1"></color-scale>
</color-chart>

You can also specify a whole label, and if it contains a number, the number will become the default X coordinate:

<color-chart y="oklch.c">
	<color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
	<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
	<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
</color-chart>

Explicit X coordinate

You can also specify the X coordinate explicitly.

<color-chart y="oklch.c" x="oklch.l">
	<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
</color-chart>

Custom X and Y axis ranges

You can customize the ranges of both X and Y axes independently:

<color-chart y="oklch.c" ymin="0" ymax="0.2" x="oklch.l" xmin="0.3" xmax=".9">
	<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
</color-chart>

This can be useful when plotting data that changes dynamically, so that the axes are always the same size.

Plotting hues

Since hues are angles, there are often multiple ways they can be plotted. E.g. A hue of 10 could also be plotted as -350 or 370. <color-chart> will automatically shift the hue based on the other hues in the same scale to produce a nicer result.

<color-chart y="hsl.h">
	<color-scale colors="hsl(5 50% 50%), hsl(355 50% 50%), hsl(10 50% 50%), hsl(-10 50% 50%)"></color-scale>
</color-chart>

<color-chart y="oklch.h">
	<color-scale colors="05: #2c0110, 10: #41031a, 20: #67082e, 30: #890e3f, 40: #ac1450, 50: #e01d6b, 60: #f2638c, 70: #fb8ea8, 80: #ffb4c5, 90: #ffdce3, 95: #ffeef1"></color-scale>
	<color-scale colors="05 (WA) / 05: #26050c, 10 (WA) / 10: #3e0817, 20 (WA) / 20: #630d29, 30 (WA) / 30: #88123b, 40 (WA) / 40: #ab174e, 50 (WA) / 50: #de1d6a, 60 (WA) / 60: #ee669b, 70 (WA) / 70: #f391b9, 80 (WA) / 80: #f7b8d3, 90 (WA) / 90: #fbdeeb, 95 (WA) / 95: #fdeef5"></color-scale>
</color-chart>

The info attribute

You can use the info attribute to show information about the color scale points. Currently, the only type of information supported is color coords (in any color space), but more will be added in the future.

The format of this attribute is analogous to the one of <color-swatch>.

<color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
	<color-scale colors="50: #eff6ff, 100: #dbeafe, 200: #bfdbfe, 300: #93c5fd, 400: #60a5fa, 500: #3b82f6, 600: #2563eb, 700: #1d4ed8, 800: #1e40af, 900: #1e3a8a, 950: #172554"></color-scale>
	<color-scale colors="50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee, 500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344"></color-scale>
	<color-scale colors="50: #f0fdfa, 100: #ccfbf1, 200: #99f6e4, 300: #5eead4, 400: #2dd4bf, 500: #14b8a6, 600: #0d9488, 700: #0f766e, 800: #115e59, 900: #134e4a, 950: #042f2e"></color-scale>
</color-chart>

Reactively changing the Y coordinate:

<button onclick="this.nextElementSibling.y = 'hwb.w'">
	Switch to "HWB Whiteness"
</button>
<color-chart y="oklch.l">
	<color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
	<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
	<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
</color-chart>

Reactively setting/changing the colors:

<label>Colors:
	<select onchange="this.parentNode.nextElementSibling.firstElementChild.colors = this.value">
		<option selected value="">None</option>
		<option value="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006">Yellow</option>
		<option value="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407">Orange</option>
		<option value="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a">Red</option>
	</select>
</label>
<color-chart y="oklch.l">
	<color-scale></color-scale>
</color-chart>

Reference

Attributes & Properties

Events

CSS variables

Parts

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

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

import "color-elements/color-chart";

import { ColorChart } from "color-elements";