charts.interpolate-color
The colour at a point along a sequential or diverging ramp, mixed in OKLab so steps look even; hex in, hex out.
1.0.0 · published 2026-10-03 by charlie · Anterra
Pinned by 19 tests, run in TypeScript, Python and Rust.
What it does
The colour a fraction `t` of the way along a ramp: `interpolateColor(["#000000", "#ffffff"], 0.5)` is `"#636363"`. Use it for heatmaps, choropleths and any sequential (light to dark) or diverging (colour, neutral, colour) scale. The stops are evenly spaced: with three stops, t = 0.5 is exactly the middle one.
**Why OKLab.** Mixing the stored sRGB numbers, which is what a naive lerp of hex digits does, gives a grey `#808080` halfway from blue to yellow and bunches the visible change at one end of a ramp. Mixing in linear RGB is better for light but still not perceptually even. OKLab (Björn Ottosson, 2020) is built so that equal distances look like equal differences, so each stop is converted to OKLab (sRGB → linear → LMS → cube root → Lab), the three coordinates are interpolated linearly, and the result is converted back, clipped to the sRGB gamut channel by channel, and rounded to 8 bits. Clipping matters in the middle of red to green, which OKLab places slightly outside sRGB.
For example
interpolate_color(#000000, #ffffff, 0.5)→ #636363 halfway from black to white in OKLab is #636363, not #808080interpolate_color(#000000, #ffffff, 0)→ #000000 t = 0 is the first stopinterpolate_color(#000000, #ffffff, 1)→ #ffffff t = 1 is the last stop
The function
The same function in TypeScript, Python and Rust, pinned by the same tests. Pick your language; the choice follows you around the registry.
def interpolate_color(ramp: Sequence[str], t: float) -> str
| ramp | string[] | two or more hex colours, evenly spaced from t = 0 to t = 1 |
| t | float | 0 to 1 |
| returns | string | lowercase "#rrggbb" |
Your code names it in one line, in the file that uses it
from fune.charts.interpolate_color import interpolate_color # charts.interpolate-color@^1
Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.
import math
from typing import Sequence, Tuple
from .charts_color_linear_to_srgb import linear_to_srgb
from .charts_color_parse_hex import parse_hex
from .charts_color_srgb_to_linear import srgb_to_linear
from .charts_color_to_hex import to_hex
from .charts_color_types import Rgb
from .math_pow import pow ← from math.pow ^1.0.0 · built alongside by fune
Lab = Tuple[float, float, float]
# Björn Ottosson's matrices, "A perceptual color space for image processing"
# (2020), https://bottosson.github.io/posts/oklab/, applied to linear sRGB.
def _to_oklab(hex: str) -> Lab: # noqa: A002
c = parse_hex(hex)
r = srgb_to_linear(c.r)
g = srgb_to_linear(c.g)
b = srgb_to_linear(c.b)
l = pow(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b, 1 / 3)
m = pow(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b, 1 / 3)
s = pow(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b, 1 / 3)
return (
0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
)
def _from_oklab(lab: Lab) -> str:
L, A, B = lab
l0 = L + 0.3963377774 * A + 0.2158037573 * B
m0 = L - 0.1055613458 * A - 0.0638541728 * B
s0 = L - 0.0894841775 * A - 1.2914855480 * B
l = l0 * l0 * l0
m = m0 * m0 * m0
s = s0 * s0 * s0
return to_hex(
Rgb(
r=linear_to_srgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
g=linear_to_srgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
b=linear_to_srgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s),
)
)
def interpolate_color(ramp: Sequence[str], t: float) -> str:
"""The colour a fraction t of the way along a ramp of evenly spaced stops,
mixed in OKLab so equal steps look equal."""
if len(ramp) < 2:
raise ValueError("ramp needs at least 2 colours, received %d" % len(ramp))
if isinstance(t, bool) or not isinstance(t, (int, float)) or not math.isfinite(t) or t < 0 or t > 1:
raise ValueError("t must be between 0 and 1, received %r" % (t,))
position = float(t) * (len(ramp) - 1)
i = math.floor(position)
if i > len(ramp) - 2:
i = len(ramp) - 2
u = position - i
a = _to_oklab(ramp[i])
b = _to_oklab(ramp[i + 1])
return _from_oklab((a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u))Install
fune build
With that line in your source, in a Python project (language python in fune.project), fune build resolves it and its 2 dependencies, pins them in fune.lock, downloads only the Python package of each, and builds the code above into your project’s .fune/build, one readable file per capability with a header linking back here. Or pin a range in fune.project and build in one step:
fune add charts.interpolate-color
The manifest, vectors and README with only the Python implementation. Install it without the registry with fune add ./charts.interpolate-color-1.0.0-python.fune, or fetch it from a terminal with fune pull charts.interpolate-color@1.0.0:python.
The whole function, every language, is one file too: charts.interpolate-color-1.0.0.fune, 13,843 bytes, sha256 c3d3905de48b75779c0b1151ccd87042a60c07fb0cd554391849dfc1c8153a48. It installs into a project of any language.
Customise it in your app
The seams this capability offers. Put a marker directly above a function of your own and fune build wires it into the built code; the package on the registry is not changed, the built file’s header lists it under CUSTOMISED, and fune hooks lists every hook in the project. How hooks work.
before — your function gets the arguments and returns them, changed or not, or throws to refuse the call.
# fune: before charts.interpolate-color
after — your function gets the result and the arguments, and returns the final result.
# fune: after charts.interpolate-color
replace — inside this capability’s code only, calls to a dependency go to your function, with the same signature. Other capabilities that use it are unaffected; write in * to replace it everywhere.
# fune: replace charts.color in charts.interpolate-color
# fune: replace math.pow in charts.interpolate-color
step — your function runs at a numbered point inside the function’s body, receives the in-scope values it names as parameters, and may return replacements. List the points with fune show charts.interpolate-color --steps.
# fune: step charts.interpolate-color after <n|label>
Tests
A version published now needs at least 8 tests for every function, and one that expects the error for each function that throws; the registry refuses it otherwise. fune verify --all runs each case in TypeScript, Python and Rust, and a project runs them again with fune verify. This page lists the cases; it does not run them. The exact JSON is vectors.json.
| Case | Arguments | Expected | |
|---|---|---|---|
| halfway from black to white in OKLab is #636363, not #808080 | #000000, #ffffff, 0.5 | → | #636363 |
| t = 0 is the first stop | #000000, #ffffff, 0 | → | #000000 |
| t = 1 is the last stop | #000000, #ffffff, 1 | → | #ffffff |
| blue to yellow stays blue-green in the middle; mixing stored RGB gives grey #808080 | #0000ff, #ffff00, 0.5 | → | #6cabc7 |
| an endpoint survives the round trip through OKLab | #e69f00, #56b4e9, 0 | → | #e69f00 |
| the other endpoint too | #e69f00, #56b4e9, 1 | → | #56b4e9 |
| a quarter of the way | #e69f00, #56b4e9, 0.25 | → | #c9a868 |
| red to green: the out-of-gamut blue is clipped to 0 | #ff0000, #00ff00, 0.5 | → | #d0a800 |
| a diverging ramp's midpoint is its middle stop | #2166ac, #f7f7f7, #b2182b, 0.5 | → | #f7f7f7 |
| a diverging ramp, a quarter along (inside the first segment) | #2166ac, #f7f7f7, #b2182b, 0.25 | → | #8eaed4 |
Show the other 9 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| a diverging ramp, three quarters along (inside the second segment) | #2166ac, #f7f7f7, #b2182b, 0.75 | → | #dd928e |
| a diverging ramp's end | #2166ac, #f7f7f7, #b2182b, 1 | → | #b2182b |
| short hex and a descending ramp | #fff, #000, 0.3 | → | #9e9e9e |
| white to red | #ffffff, #ff0000, 0.5 | → | #ffa191 |
| a viridis-like ramp near its start | #440154, #21918c, #fde725, 0.1 | → | #492860 |
| one stop is not a ramp | #000000, 0.5 | → | error: ramp needs at least 2 colours |
| t above 1 is an error | #000000, #ffffff, 1.5 | → | error: t must be between 0 and 1 |
| t below 0 is an error | #000000, #ffffff, -0.1 | → | error: t must be between 0 and 1 |
| a bad stop is an error | #000000, white, 0.5 | → | error: is not a hex colour |
More from the author
Hex parsing, the sRGB transfer function and the 8-bit rounding come from `charts.color`; cube roots from `math.pow`. No platform `pow` or `cbrt` is used, so TypeScript, Python and Rust return the same hex. The matrices are the published ones, to Ottosson's ten decimal places; the endpoints come back exactly (t = 0 gives the first stop).
`t` must be in 0..1 and the ramp needs at least two stops; anything else is an error. Hex in either `#rgb` or `#rrggbb` form, either case; out is lowercase `#rrggbb`.
Sources: B. Ottosson, "A perceptual color space for image processing" (2020), https://bottosson.github.io/posts/oklab/ (the M1 and M2 matrices and their inverses, for linear sRGB); IEC 61966-2-1 (sRGB transfer function).
Files
| Path | Bytes |
|---|---|
| README.md | 1,760 |
| impl/python.py | 2,439 |
| impl/rust.rs | 2,704 |
| impl/typescript.ts | 2,588 |
| vectors.json | 2,292 |