Skip to content

misc(treemap): improve readability of node colors - #17474

Merged
connorjclark merged 1 commit into
mainfrom
treemap/colors
Oct 29, 2026
Merged

connorjclark merged 1 commit into
mainfrom
treemap/colors

Conversation

@connorjclark

@connorjclark connorjclark commented Oct 29, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Node colors could get dark and saturated deep in the tree (e.g. when zoomed into a bundle's node_modules), making captions hard to read. Contrast of the #474747 caption text dropped as low as ~1.2:1 for blue/purple hues.

  • Colors use OKLCH instead of HSL so every hue has the same perceived lightness. Lightness/chroma still vary with depth, but are clamped (L ≥ 0.86, C ≤ 0.06) so captions stay ≥ 5.9:1 for every hue.
  • Depth is relative to the node currently in view, so zooming in brings back the lighter colors.
  • All mode gets a faint border so same-colored siblings are distinguishable.
  • Duplicate highlight colors also use OKLCH.

Related Issues/PRs

Part of #16400

@connorjclark
connorjclark requested a review from a team as a code owner October 29, 2026 21:06
@connorjclark
connorjclark requested review from paulirish and removed request for a team October 29, 2026 21:06
@connorjclark
connorjclark merged commit 970f00f into main Oct 29, 2026
36 of 37 checks passed
@connorjclark
connorjclark deleted the treemap/colors branch October 29, 2026 21:13

This branch was successfully deployed

1 active deployment
Preview — 726e46a6 Deployed Oct 29, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant