- Home
- Color Palette Generators
- ColorBox
ColorBox
San Francisco, United States
What it is
ColorBox is a free web tool and extension for creating color systems and accessible palettes. Users can modify multiple colors in one tab and share systems as URLs or JSON. Contrast indicators show 3:1, 4.5:1, and 7:1 levels, while HSV and OKLCH modes provide color-space choices. Auto Dark Mode creates an inverted set from original inputs; users can also duplicate and manually edit an inverted set. Hue progression rotates clockwise or counterclockwise. Export formats include Config, Output, Tailwind, CSS, OKLCH, and Swift. The maker describes a Figma workflow using a plugin and JSON, with customizable step names and Figma Paint Styles. A Sketch route uses that Figma import, SVG export, and Sketch import. The color algorithm can be consumed through NPM with exported JSON for code generation. ColorBox was founded in 2018 and is based in San Francisco. It is free to use and ad-free.
For and against
For
- Free and ad-free
- Shows multiple contrast thresholds
- Supports HSV and OKLCH modes
- Exports several design and code formats
- Shares systems as URLs or JSON
Against
- Custom curves were not yet available in ColorBox
- Sketch use requires the described SVG workaround
- No free trial is offered
The verdict
ColorBox focuses on palette generation, accessibility checks, color transformations, and export workflows. Its free web and extension access makes it practical for color-system work across design and development tools.
Who it suits
It suits designers and developers building palettes, checking contrast, preparing dark-mode variants, or moving color systems into Figma, Sketch, or code.
Plans and prices
Free
Free to use · ad-free
Read 8 Oct 2026 · kvyn.medium.com
On the record
- Code workflow
- The maker says the color algorithm can be consumed through NPM, using exported JSON to generate colors in code.kvyn.medium.com · read 8 Oct 2026
- Color spaces
- The web app lists HSV and OKLCH as color-space modes.colorbox.io · read 8 Oct 2026
- Contrast indicators
- The tool can show contrast levels including 3:1, 4.5:1, and 7:1 on color sets.kvyn.medium.com · read 8 Oct 2026
- Custom curves
- The maker's article says custom curves were available in the algorithm but not yet available in ColorBox at the time of publication.kvyn.medium.com · read 8 Oct 2026
- Dark mode
- Auto Dark Mode generates an inverted color set from the original set's inputs, and users can also duplicate and manually edit an inverted set.kvyn.medium.com · read 8 Oct 2026
- Export formats
- The web app lists export options for Config, Output, Tailwind, CSS, OKLCH, and Swift.colorbox.io · read 8 Oct 2026
- Figma integration
- The maker describes importing a ColorBox color system into Figma with a plugin and JSON, with options to customize step names and generate Figma Paint Styles.kvyn.medium.com · read 8 Oct 2026
- Hue rotation
- Hue progression can rotate clockwise or counterclockwise.kvyn.medium.com · read 8 Oct 2026
- Multiple colors
- Users can modify multiple colors within one tab and share a color system as a URL or JSON.kvyn.medium.com · read 8 Oct 2026
- Purpose
- ColorBox is a tool for creating color systems and accessible palettes.kvyn.medium.com · read 8 Oct 2026
- Sketch workflow
- The maker describes a workaround for Sketch: import through the Figma plugin, export as SVG, then bring that SVG into Sketch.kvyn.medium.com · read 8 Oct 2026
- Support and updates
- The maker points users to the maker's Twitter account for updates about ColorBox improvements.kvyn.medium.com · read 8 Oct 2026
