bluerobotics / bluerobotics/ping-viewer-next

Gradients should interpolate in a perceptually linear colour space

Open
#124 0 comments 1 reaction 0 assignees View on GitHub
enhancement
Dominant language
Vue
Stars
3
Forks
10
Avg merge
19h 54m
Merged PRs (30d)
7

Description

Gradients are currently determined via linear interpolation in the non-linear sRGB colour-space, which results in some undesirable hue and lightness shifts as a result.

[OKLab](https://bottosson.github.io/posts/oklab/) (and its cylindrical counter-part, OKLCh) is an industry-standard perceptually linear colour-space, which is supported in baseline CSS (i.e. available in all modern browsers), and a variety of other applications. It is designed to be performant while making colour specification and transitions more intuitive.

I'm unsure whether this software can make use of CSS functions like `linear-gradient(in oklab, , )`, but that (or something equivalent, like directly querying the `oklab` colour space for interim gradient points) would allow gradients to perceptually make more sense than linear interpolation in the non-linear sRGB space. If it's relevant, gradients calculated in `oklch` tend to be more vibrant and colourful (so may be a worthwhile consideration), but are also a little less intuitive, because they can pass through different colours as the sweep around the hue circle.

If colours are able to be _defined_ in a space like `oklab` or `oklch` as well, then that also future-proofs the application for screens with wider colour gamuts than sRGB (there are already a variety that support Display P3 and Rec2020, including all recent Apple devices), which allows for more vibrant colours to be represented (which can be valuable for data differentiation).

---

As some legacy context, the original Ping Viewer supports up to 50 colours in a gradient, specified via [a text file of hex codes](https://docs.bluerobotics.com/ping-viewer/display-settings/#custom-gradients), which allows for customisations like roughly [perceptually smooth colour schemes](https://discuss.bluerobotics.com/t/ping-viewer-custom-gradients/8558/3) (without excessive drifting from non-linear-colour-space interpolation).

The current approach here of (seemingly max 10?) colours, with no mechanism for bulk input, makes it much harder to fine-tune, but I also think that's less important if the space itself is perceptually linear. A gradient file import and export mechanism would still be _nice_, if possible.

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue does not name files or tests. Start by locating the gradient interpolation and colour-definition entry points, then determine whether CSS `linear-gradient(in oklab, ...)` or direct OKLab/OKLCh calculations are feasible. Done would mean perceptually linear gradients, with wider-gamut colour definitions and gradient import/export treated as optional follow-up scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.