feat: Switch color processing library by camdecoster · Pull Request #7536 · plotly/plotly.js

camdecoster · 2025-08-26T15:52:03Z

Description

Switch color processing library from TinyColor to color.

Closes #7523.

Changes

Change color processing library
- hsv color strings are no longer permitted
- rgb()/rgba() strings with decimal 0–1 fractions are now normalized to integers via Color.clean() on input
- New color specifiers supported:
  - 8-digit hex with alpha (#rrggbbaa) and 4-digit hex short (#rgba)
  - Space-separated and slash-syntax rgb/rgba/hsl (rgba(255 0 0 / 0.5))
  - hsla() and hwb() color functions
There are subtle output differences in darken/lighten/mix (HSL multiplicative vs. tinycolor's additive)
Update/refactor method calls for dealing with colors
Update tests per library change

Testing

Check CI for broken tests
Run npm run test-jasmine and verify that all tests pass
Run npm run test-image and verify that all image-baseline diffs match the regenerated baselines in this PR
Verify that npm run schema produces no diff against test/plot-schema.json
Run devtools and open the new mock color_syntax_formats and verify that it runs correctly without any errors

Screenshots

Color.contrast, Color.brighten, and Color.addOpacity produce slightly different RGB output. Here are some example plots that can be used to see the difference between tinycolor and color when pasted into Plotly devtools:

Auto-contrast text on a heatmap

Plotly.newPlot(
    gd,
    [
        {
            type: 'heatmap',
            z: [
                [1, 2, 3],
                [4, 5, 6],
                [7, 8, 9]
            ],
            colorscale: 'Jet',
            texttemplate: '%{z}'
        }
    ],
    { width: 400, height: 300 }
);

Before	After

Auto inside-text color on default colorway

Plotly.newPlot(gd, {
    data: [
        {
            type: 'bar',
            x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            y: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            marker: {
                color: [
                    '#1f77b4',
                    '#ff7f0e',
                    '#2ca02c',
                    '#d62728',
                    '#9467bd',
                    '#8c564b',
                    '#e377c2',
                    '#7f7f7f',
                    '#bcbd22',
                    '#17becf'
                ]
            },
            text: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
            textposition: 'inside',
            insidetextanchor: 'middle',
            textfont: { size: 32 },
            hoverinfo: 'skip'
        }
    ],
    layout: {
        title: { text: 'Auto inside-text color on default colorway' },
        showlegend: false,
        bargap: 0,
        xaxis: { visible: false },
        yaxis: { visible: false },
        width: 900,
        height: 220,
        margin: { l: 20, r: 20, t: 60, b: 20 }
    }
});

Before	After

Pie with extended colorway (lighten/darken)

Plotly.newPlot(
    gd,
    [
        {
            type: 'pie',
            values: [7, 6, 5, 4, 3, 2, 1]
        }
    ],
    {
        colorway: ['#777', '#F00'],
        width: 400,
        height: 400
    }
);

Before	After

Notes

The new library allows for use of modern CSS color syntax
Derived colors are now always rgb() / rgba() strings
The new library increases the plotly.js bundle size by 32kB (14kB for minified)

…or-library

camdecoster · 2025-10-21T00:57:45Z

I created a couple of PRs (#78 and #81) in a dependency used by color that will add some new features for parsing color strings that would bring it closer to parity with TinyColor. The maintainer recently merged one of these and will (hopefully) be merging the other soon. Once he publishes a new release, I'll be able to use it in plotly.js.

…or-library

…alid color strings

…-library

emilykl · 2026-06-12T19:19:56Z

@camdecoster Looks good overall, but lightened/darkened colors seem much less distinct after this change, is there any way to adjust that? Maybe increase the degree of lightening/darkening?

Before	After

(codepen)

emilykl · 2026-06-12T19:29:28Z

-    var c = tc.toRgb();
-    return 'rgb(' + Math.round(c.r) + ', ' +
-        Math.round(c.g) + ', ' + Math.round(c.b) + ')';
+const _color = require('color').default;


Suggested change

const _color = require('color').default;

'use strict';

const _color = require('color').default;

emilykl · 2026-06-12T19:39:31Z

 };

-color.rgb = function(cstr) { return color.tinyRGB(tinycolor(cstr)); };
+const rgb = (cstr) => {


Can you add a comment explaining that this is for returning a string which doesn't contain alpha? (Or whatever is the purpose of this function, I'm assuming it's that because of the comment in the old file.)

emilykl · 2026-06-12T20:22:36Z

 // and convert them to rgb(0-255 values)
-color.clean = function(container) {
-    if(!container || typeof container !== 'object') return;
+const clean = (container) => {


I'm pretty sure we can just remove this function and its usages entirely, since it looks we deprecated the rgb(fractions) format 11(!) years ago.

emilykl · 2026-06-12T20:23:45Z


-function cleanOne(val) {
-    if(isNumeric(val) || typeof val !== 'string') return val;
+const cleanOne = (val) => {


Likewise for this function, can remove

emilykl · 2026-06-12T21:13:05Z

+            "- hex (e.g. '#d3d3d3', '#d3d3d3aa')",
+            "- rgb (e.g. 'rgb(255, 0, 0)', 'rgb(255 0 0)')",
+            "- rgba (e.g. 'rgba(255, 0, 0, 0.5)', 'rgba(255 0 0 / 0.5)')",
+            "- hsl (e.g. 'hsl(0, 100%, 50%)')",
+            "- hsla (e.g. 'hsla(0, 100%, 50%, 0.5)')",
+            "- hwb (e.g. 'hwb(0, 0%, 0%)')",


Weirdly, I can't find this info in the docs anywhere, although I could be missing it. We should make sure the supported color formats are documented with the next release.

emilykl · 2026-06-12T21:18:45Z

    });

-    var gridColor = coerce2('gridcolor', addOpacity(dfltColor, 0.3));
+    var gridColor = coerce('gridcolor', addOpacity(dfltColor, 0.3));


@camdecoster Why this change, is it intentional?

emilykl · 2026-06-12T21:26:07Z


-        color = tinycolor(color);
-        if(!color.isValid()) return false;
+        const newColor = Color.addOpacity(color, Color.opacity(color));


Couldn't this just be Color.color(color).rgb().string()?

emilykl · 2026-06-12T21:27:18Z


        for(i = 0; i < colorList.length; i++) {
-            colors.push(tinycolor(colorList[i]).lighten(20).toHexString());
+            colors.push(Color.color(colorList[i]).lighten(0.2).hex());


Re: my comment about lightened/darkened colors being too similar, I assume you could just increase this value here to fix.

camdecoster added 10 commits August 14, 2025 18:20

Switch color library

c17371a

Add utility functions

d6d1e9e

Switch references to new color library

b15bdca

Fix bad method calls; fix NaN bugs

a1e2dee

Update tests per library change

4b97ca9

Use correct method name

17fe004

Use alternate coerce function to avoid gridcolor of false

e314022

Merge remote-tracking branch 'origin/master' into cam/7523/switch-col…

0ab7cd1

…or-library

Update function call

7552832

Update tests per library change

5d0322a

camdecoster self-assigned this Aug 26, 2025

gvwilson added P1 needed for current cycle fix fixes something broken labels Aug 28, 2025

camdecoster added 2 commits August 29, 2025 15:30

Update attribute, description to remove hsv

5964bee

Convert hsv value to rgb in test mock

d6853e4

camdecoster added 7 commits November 17, 2025 09:48

Override color-string package dependency

93a8365

Merge remote-tracking branch 'origin/master' into cam/7523/switch-col…

fe7b607

…or-library

Remove tinycolor2 library

5c2dbda

Linting/formatting

2d5d3e0

Update test

5e329a6

Use minified plotly.js for making baselines

8a3f5f4

Add logging

b43ff75

archmoj mentioned this pull request Jan 27, 2026

Set default layout.axis.tickmode to 'sync' when axis is overlaying #7684

Open

camdecoster added this to the v4.0.0 milestone Feb 3, 2026

camdecoster mentioned this pull request Apr 17, 2026

[FEATURE]: Upgrade Kaleido to v1 for image generation #7760

Closed

camdecoster added 3 commits April 21, 2026 16:38

Merge remote-tracking branch 'origin/master' into cam/7523/switch-col…

f27aa55

…or-library

Refactor to better match tinycolor2

31a6235

Update schema

59296af

camdecoster force-pushed the cam/7523/switch-color-library branch from fc905c7 to 6e83d8a Compare April 27, 2026 19:56

camdecoster added 4 commits April 27, 2026 17:07

Call alpha instead of opacity because colors default to black for inv…

0aaf967

…alid color strings

Use alpha in more places

b3693b4

Use correct operator for conditional

e2633e8

Update baseline images

fbd5ec7

camdecoster changed the base branch from master to v4.0 June 9, 2026 21:43

camdecoster added 8 commits June 9, 2026 15:59

Merge remote-tracking branch 'origin/v4.0' into cam/7523/switch-color…

b6132bd

…-library

Add more checks to handle bad input

10997dd

Update tests to better catch bad input

f2a4dd7

Update descriptions

36065d3

Add draftlog

93a8217

Update schema and types

6acbf59

Add new mock and baseline

58c2017

Update baseline image

5dc4e64

camdecoster marked this pull request as ready for review June 9, 2026 23:03

camdecoster added 7 commits June 9, 2026 17:10

Rename draftlog with correct suffix

79d7d8e

Remove debug image

e940e77

Add warning on invalid color string

8d9ea4f

Small refactor

a62992d

Update color syntax mock and image

0d6cbd1

Remove unused attribute in mock

0b31a8b

Fix circular dependency

ff12874

emilykl reviewed Jun 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Switch color processing library#7536

feat: Switch color processing library#7536
camdecoster wants to merge 43 commits into
v4.0from
cam/7523/switch-color-library

camdecoster commented Aug 26, 2025 •

edited

Loading

Uh oh!

camdecoster commented Oct 21, 2025

Uh oh!

emilykl commented Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

camdecoster commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Testing

Screenshots

Notes

Uh oh!

camdecoster commented Oct 21, 2025

Uh oh!

emilykl commented Jun 12, 2026

Uh oh!

emilykl Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

emilykl Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

camdecoster commented Aug 26, 2025 •

edited

Loading

emilykl Jun 12, 2026 •

edited

Loading