ColorBox
Curve-driven UI colour scale generator with WCAG markers and code export
ColorBox builds a multi-step colour ramp by interpolating hue, saturation and brightness between two ends, with a selectable easing curve per channel (easeOutQuad, easeInQuart and similar) and a rotation direction for the hue path. Each step shows its WCAG contrast ratio against white, with 3:1 and 4.5:1 thresholds marked, and the finished ramp exports as JSON, Tailwind, OKLCH or Swift. It started at Lyft Design (Kevyn Arnott), which open-sourced the underlying maths as lyft/coloralgorithm, and it is still the clearest tool for understanding why a ramp bends the way it does. Use it when you want to author a brand ramp by hand and see the curve, not just accept a generated result.
Reach for ColorBox when a human designer needs to shape a ramp interactively and hand you the result; the app itself has no API, so you cannot generate palettes from it programmatically. If you need a scale in code, use lyft/coloralgorithm (Apache-2.0) or prefer Leonardo or the tints.dev API instead. Its state lives in the share URL, so ask the user to paste that URL rather than describing the curve in prose.
Why it is here. It is the tool that taught the industry to think of a colour ramp as a set of curves rather than a list of hand-picked hexes, and the WCAG markers keep that thinking honest.
- per-channel easing curves
- inline WCAG 3:1 and 4.5:1 markers
- JSON, Tailwind, OKLCH and Swift export
- algorithm open-sourced by Lyft
- shareable URL state
Verified 2026-08-16. HTTP 200. https://colorbox.io (fetched, headline and export list read), https://colorbox.io/about (404), https://api.github.com/repos/lyft/coloralgorithm (stars 235, Apache-2.0, last push 2023-10-02), web search confirming Lyft Design / Kevyn Arnott origin
