ColorBox

Curve-driven UI colour scale generator with WCAG markers and code export

Tier B · UsefulColor ToolGeneratorToolcolorbox.io

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.

For an agent

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.

Install command, framework, licence and component list.

Facts

License: Apache 2.0
Pricing: Free
Framework: Not applicable
Styling: Tailwind CSS, CSS custom properties
Distribution: Web app / online tool, Figma plugin, GitHub repository
Platform: Web
Content type: Design tokens / theme files, Code
Agent readiness: Copy-paste ready code, Readable open source
Accessibility: Contrast checked, WCAG 2.x AA
Maturity: Stable
GitHub stars: 235

Notable for

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

Provenance

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

Also in Color

colorbox.ioTier B