Specifying Colors in JavaScript
How to specify colors in JavaScript. The CSS color string formats Plotly.js accepts for every color attribute.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.
Every color attribute in Plotly.js — marker.color, line.color,
fillcolor, paper_bgcolor, and the rest — accepts a CSS color string. Plotly.js v4 parses
colors according to the CSS Color 4 specification.
Accepted formats
| Format | Notes | Examples |
|---|---|---|
| Named colors | Any CSS color keyword | 'red', 'cornflowerblue', 'transparent' |
| Hex | 3-, 4-, 6-, or 8-digit, always with a leading # |
'#f00', '#f00a', '#ff0000', '#ff0000aa' |
rgb(), rgba() |
Comma- or space-separated, with optional alpha. The two function names are aliases, so
rgb() also takes an alpha |
'rgb(255, 0, 0)', 'rgb(255 0 0)', 'rgba(255, 0, 0, 0.5)', 'rgba(255 0 0 / 0.5)' |
hsl(), hsla() |
Percent units necessary on saturation and lightness in the comma form, optional in the space form | 'hsl(0, 100%, 50%)', 'hsl(0 100 50)', 'hsl(0 100% 50% / 0.5)' |
hwb() |
Hue-whiteness-blackness, space-separated only | 'hwb(0 0% 0%)' |
lab(), lch(), oklab(), oklch() |
CIE Lab and Oklab spaces, space-separated | 'lab(50% 40 59.5)', 'lch(50% 70 40)', 'oklab(0.5 0.1 0.1)', 'oklch(0.7 0.15 180)' |
color() |
Explicit color space. Wide-gamut values are clipped into sRGB before they are drawn | 'color(srgb 1 0 0)', 'color(display-p3 0 1 0)', 'color(rec2020 0 0 1)' |
| Hue | Given in degrees by default. The deg, turn, rad, and grad
units are all accepted |
'hsl(0deg 100% 50%)', 'hsl(0 100% 50%)', 'hsl(0.5turn 60% 40%)' |
none |
The CSS keyword for a missing component, in any space-separated form | 'hsl(none 60% 40%)' |
Separators cannot be mixed inside one color string. Use commas throughout, as in
'hsl(120, 50%, 50%)', or spaces throughout, as in 'hsl(120 50% 50%)'. A string such as
'hsl(120, 50% 50%)' is invalid.
These are all parsed in JavaScript and normalized to rgb() / rgba() before being written
to the DOM in the browser.
A color string that Plotly.js cannot parse falls back to the attribute's default, so the figure renders in the wrong color rather than failing loudly. If you are upgrading from an earlier version, see Migrating to Plotly.js v4 for the formats that are no longer accepted.
These rules apply to color strings only. Numeric arrays used for color mapping, such as
marker.color: [1, 2, 3, 4] paired with a colorscale, are
unaffected.
One bar per accepted color format, each written a different way but all resolving to a valid color.
var data = [{
type: 'bar',
x: ['named', 'hex', 'hex + alpha', 'rgb', 'rgb / alpha', 'hsl', 'hwb'],
y: [1, 1, 1, 1, 1, 1, 1],
marker: {
color: [
'crimson',
'#2ca02c',
'#1f77b4aa',
'rgb(255 127 14)',
'rgba(148, 103, 189, 0.45)',
'hsl(180, 70%, 40%)',
'hwb(320 10% 20%)'
],
line: {color: '#444', width: 1}
}
}];
var layout = {
title: {text: 'Accepted Color String Formats'},
yaxis: {visible: false},
width: 700,
height: 400
};
Plotly.newPlot('myDiv', data, layout);
