ThatPainter
For makers
Pick a colourFor prosPaints & toolsAll listsComparePaint DeskPaid listingsMaker sign-in
On the record · read 8 Oct 2026 · 14 facts

ColorBox

Visit ColorBox Alternatives

What it is

ColorBox is a color-system tool for building palettes with accessibility checks. It runs on the web and as an extension, and its free plan is ad-free. You can adjust several colors in a single tab and share a complete system through a URL or JSON. Contrast indicators show 3:1, 4.5:1 and 7:1 levels across color sets. HSV and OKLCH are available as color-space modes, and hue progression can turn in either direction. To make a dark variant, Auto Dark Mode creates an inverted set from the original inputs; another option is to duplicate a set and edit its inverted colors yourself.

Export choices include Config, Output, Tailwind, CSS, OKLCH and Swift. The maker describes a Figma workflow that imports a system using a plugin and JSON, with controls for step names and generating Figma Paint Styles. A Sketch workflow passes through that Figma plugin, then uses an SVG export. The color algorithm can also be consumed through NPM, with exported JSON used to generate colors in code. ColorBox was founded in 2018 and is based in San Francisco, United States.

For and against

For

  • Free to use with no ads.
  • Checks contrast at 3:1, 4.5:1 and 7:1.
  • Adjust multiple colors in one tab.
  • Share systems as a URL or JSON.
  • Offers HSV and OKLCH color-space modes.
  • Exports to CSS, Tailwind, Swift and more.

Against

  • No free trial is offered.
  • Sketch workflow requires an SVG step through Figma.
  • Custom curves were not yet available in ColorBox.

Who it suits

ColorBox suits designers and developers who need to build, check and share color systems, including palettes with contrast indicators. It can also fit workflows that move color data into Figma, Sketch, code, or one of its listed export formats.

Getting started

  1. Open the ColorBox website or use its extension.
  2. Adjust multiple colors in a tab to create a color system.
  3. Use contrast indicators and choose a color-space mode as needed.
  4. Share the system as a URL or JSON, or select an export format.
  5. For Figma, import the JSON with the ColorBox plugin; for code, use the NPM algorithm and exported JSON.

The verdict

Choose ColorBox if you want a free tool for shaping color systems, reviewing contrast levels and sharing the result as a URL or JSON. Its export formats and described Figma and code workflows make it useful beyond palette editing. Look elsewhere if your workflow depends on custom curves inside the app or a direct Sketch workflow.

Questions

How much does ColorBox cost?

Its Free plan costs nothing and is described as free to use and ad-free.

Is there a free plan or trial?

There is a free plan. No free trial is offered.

What platforms can I use it on?

ColorBox is available on the web and as an extension.

Can I check palette contrast?

Yes. ColorBox shows contrast levels including 3:1, 4.5:1 and 7:1.

Can I use its color systems in Figma or Sketch?

The maker describes a Figma plugin and JSON import that can generate Figma Paint Styles. For Sketch, the described workflow exports an SVG through the Figma route and brings it into Sketch.

Can I use ColorBox colors in code?

The maker says the color algorithm can be consumed through NPM, using exported JSON to generate colors in code.

Facts 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
Founded
2018colorbox.io · read 28 Sept 2026
Headquarters
San Francisco, United Statescolorbox.io · read 28 Sept 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