GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — feat: Switch color processing library by camdecoster · Pull Request #7536 · plotly/plotly.js

Conversation

@camdecoster

@camdecoster camdecoster commented Aug 26, 2025 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor

Description

Switch color processing library from TinyColor to color.

Related to #7523.

Changes

  • Change color processing library
    • hsv color strings are no longer permitted
    • rgb()/rgba() strings with decimal 0–1 fractions are no longer supported. The utility function Color.clean() has been removed.
    • 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
image image

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
image image

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
image image

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)

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
camdecoster added 10 commits August 14, 2025 18:20
@camdecoster
Switch color library
c17371a
@camdecoster
Add utility functions
d6d1e9e
@camdecoster
Switch references to new color library
b15bdca
@camdecoster
Fix bad method calls; fix NaN bugs
a1e2dee
@camdecoster
Update tests per library change
4b97ca9
@camdecoster
Use correct method name
17fe004
@camdecoster
Use alternate coerce function to avoid gridcolor of false
e314022
@camdecoster
Merge remote-tracking branch 'origin/master' into cam/7523/switch-col…
0ab7cd1
…or-library
@camdecoster
Update function call
7552832
@camdecoster
Update tests per library change
5d0322a
@camdecoster camdecoster self-assigned this Aug 26, 2025
@gvwilson gvwilson added P1 needed for current cycle fix fixes something broken labels Aug 28, 2025
camdecoster added 2 commits August 29, 2025 15:30
@camdecoster
Update attribute, description to remove hsv
5964bee
@camdecoster
Convert hsv value to rgb in test mock
d6853e4
@camdecoster

camdecoster commented Oct 21, 2025

Copy link
Copy Markdown
Contributor Author

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

camdecoster added 7 commits November 17, 2025 09:48
@camdecoster
Override color-string package dependency
93a8365
@camdecoster
Merge remote-tracking branch 'origin/master' into cam/7523/switch-col…
fe7b607
…or-library
@camdecoster
Remove tinycolor2 library
5c2dbda
@camdecoster
Linting/formatting
2d5d3e0
@camdecoster
Update test
5e329a6
@camdecoster
Use minified plotly.js for making baselines
8a3f5f4
@camdecoster
Add logging
b43ff75
@archmoj archmoj mentioned this pull request Jan 27, 2026
Set default layout.axis.tickmode to 'sync' when axis is overlaying #7684
Merged
@camdecoster camdecoster added this to the v4.0.0 milestone Feb 3, 2026
@camdecoster 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
@camdecoster
Merge remote-tracking branch 'origin/master' into cam/7523/switch-col…
f27aa55
…or-library
@camdecoster
Refactor to better match tinycolor2
31a6235
@camdecoster
Update schema
59296af
@camdecoster
camdecoster force-pushed the cam/7523/switch-color-library branch from fc905c7 to 6e83d8a Compare April 27, 2026 19:56
camdecoster added 3 commits June 11, 2026 17:03
@camdecoster
Update color syntax mock and image
0d6cbd1
@camdecoster
Remove unused attribute in mock
0b31a8b
@camdecoster
Fix circular dependency
ff12874
@emilykl

emilykl commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

@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
Screenshot 2026-06-12 at 2 07 23 PM Screenshot 2026-06-12 at 2 07 43 PM

(codepen)

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js
};

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

@emilykl emilykl Jun 12, 2026

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.)

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@emilykl emilykl Jun 13, 2026

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More generally if you could add a few docstrings for the most-commonly-used functions in that file it would be a big improvement

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@camdecoster camdecoster Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add descriptions for all the functions in here.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/lib/coerce.js
Comment on lines +163 to +168
"- 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%)')",

@emilykl emilykl Jun 12, 2026

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@camdecoster camdecoster Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree. I'm prepping a migration guide for v4 that should include some of this info, but a follow up should be to update the docs for v4.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl reacted with thumbs up emoji
All reactions
  • 👍 1 reaction
emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/traces/carpet/axis_defaults.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/traces/pie/calc.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

emilykl
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/traces/pie/calc.js Outdated

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());

@emilykl emilykl Jun 12, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@camdecoster camdecoster Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reworked the lighten/darken code to better match what tinycolor did.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl reacted with thumbs up emoji
All reactions
  • 👍 1 reaction
emilykl
emilykl suggested changes Jun 13, 2026
View reviewed changes

@emilykl emilykl left a comment

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My only concern is the lighten/darken changes, everything else looks good

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
camdecoster added 7 commits June 15, 2026 08:16
@camdecoster
Add function descriptions
87a1c72
@camdecoster
Remove support for rgb fractional specifiers
c2bcab9
@camdecoster
Switch to different method for lightening/darkening colors
e48b8cf
@camdecoster
Update .gitignore
57acc35
@camdecoster
Add tests for adjustLightness
4c92031
@camdecoster
Update tests per color function changes
48bff80
@camdecoster
Update baseline images per recent changes
2624b6d
@camdecoster
camdecoster requested a review from emilykl June 15, 2026 23:32
@emilykl

emilykl commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

@camdecoster Nice, with your edits, the lightened/darkened colors look identical to master.

Before (master) After (this PR)
Screenshot 2026-06-16 at 9 53 13 AM Screenshot 2026-06-16 at 9 53 37 AM
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl
emilykl approved these changes Jun 16, 2026
View reviewed changes

@emilykl emilykl left a comment

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🌈

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
@camdecoster
Update draftlog
a415430
emilykl
emilykl approved these changes Jun 16, 2026
View reviewed changes
@camdecoster
camdecoster merged commit 6b143ce into v4.0 Jun 16, 2026
83 checks passed

Uh oh!

There was an error while loading. Please reload this page.

@camdecoster
camdecoster deleted the cam/7523/switch-color-library branch June 16, 2026 20:06
@emilykl emilykl mentioned this pull request Jul 27, 2026
Update plotly.js to v4.0.0-rc.0 plotly/plotly.py#5673
Merged
This was referenced Aug 30, 2026
Colorscale should be betwen 0-255 or 0-1 but not a mixed behaviour #4942
Closed
Passing color as tuple not working as expected plotly/plotly.py#4716
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@emilykl emilykl emilykl approved these changes
Reviewers whose approvals may not affect merge requirements

Uh oh!

There was an error while loading. Please reload this page.

Assignees

@camdecoster camdecoster

Labels

fix fixes something broken P1 needed for current cycle

Projects

None yet

Milestone

v4.0.0

Development

Successfully merging this pull request may close these issues.

Update color processing library to handle modern CSS color syntax

Uh oh!

There was an error while loading. Please reload this page.

3 participants

@camdecoster @emilykl @gvwilson
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.