Introducing the new ColorBox

TL;DR The new ColorBox is available now at colorbox.io.

Image for post
Image for post

The new ColorBox

Coming back to a project more than two years later, you naturally want to blow it up and start over, and frankly that’s just what I did. I started from scratch and built the new ColorBox from the ground up.

Image for post
Image for post
Original ColorBox (Late 2018)

Multi-color creation

Image for post
Image for post

More accessibility indicators built-in

One of the main reasons I set off to solve color with an algorithmic approach and release ColorBox was to help everyone produce color systems that are optimized for accessibility.

Image for post
Image for post
Image for post
Image for post

Dark Mode

One of the realities of building color systems in 2020 is having to account for Light and Dark Mode in your color system. I know many color systems are made from taking existing light mode colors and adapting them for Dark Mode, but this approach is optimized for Dark Mode that performs well for users in dim environments or for interfaces folks need to stare at for long periods of time. This is done by desaturating colors for Dark Mode because they don’t necessarily need it as they’re displayed on a dark background

Turn on Auto Dark Mode in the Options tab

Image for post
Image for post
Turn on Auto Dark Mode

Auto Dark Mode

When you click Auto Dark Mode, you’ll be given an inverted color set. This color set is generated from the same inputs you provided for your original color set. Usually, it’ll work great on the first try, but sometimes it may need some adjustments.

Image for post
Image for post
Auto Dark Mode

Manual Dark Mode

In the case, that you’d like to have more control over the Dark Mode color set. Click the duplicate button next to Manual Dark Mode, and that will give you an inverted color set that you can change as needed.

Image for post
Image for post
Manual Dark Mode

One color name has two values now

The key concept in this approach is you’ll have two values for each color name. On the left, you’ll receive a value that is optimized for light mode, and on the right you’ll receive a value that is optimized for Dark Mode.

Image for post
Image for post

How it works

On the left, you’ll receive a value that is optimized for light mode, and on the right you’ll receive a value that is optimized for Dark Mode. Both values are in the same point of the progression, but the progressions are inverted. Both color sets will have the same beginning and end colors, but they’ll be reversed in each set. All the colors in the middle will be slightly different.

Other Algorithm Improvements

Hue rotation

Hues are a lot like circle. They are measured in degrees and range from 0 through 359. In the prior algorithm, the hue progression would only go clockwise. In the new algorithm, you can set the rotation to counter clockwise, which means you could have a set of red that starts at 10 and ends at 350 and it won’t look like the rainbow. This means there’s now twice as many color possibilities with the new algorithm.

Image for post
Image for post
Counter clockwise hue rotation

Custom curves (coming to ColorBox soon)

While this is not available in ColorBox immediately, this is available in the algorithm and will be available in ColorBox in a future update. Before you had to pass a defined easing curve from a set available in the algorithm. Now, you can pass any [x1, y1, x2, y2]curve and have full control over color progression.

Seemless workflow

I know ColorBox is neither the beginning nor the end of your workflow and so frequently it is the middle step. As a tool in the middle of your workflow, it’s important it integrates into your workflow.

Painlessly import into Figma

Bringing a color system you’ve made in ColorBox is now as simple as installing a plugin, and then copy & pasting a JSON. You no longer have to go through each color and copy and paste it.

Image for post
Image for post

Sketch Workaround

For now, if you use Sketch you can still import colors using a working around with Figma. Just import the colors with the Figma plugin and export them as an SVG. Bring that SVG into Sketch, and voila!

Create colors in code

If you want the ability to generate colors in your code base, you can now consume the algorithm through NPM. If you want to generate the same colors in code that you do in ColorBox, copy and paste the JSON in the Export menu, and paste it to the function provided by the algorithm. It’s super easy!

import { generate } from "@k-vyn/coloralgorithm";const colors = generate(JSON);

Moving forward

These are just some of the highlights in the new ColorBox, and I hope you’re able to discover all the other improvements to the new ColorBox. I have a few more in mind that I would love to work on soon.

Go make colors! 👨‍🎨 🎨

If you haven’t taken the leap yet, open up the new ColorBox and have fun! It’s available at Colorbox.io, but if it’s not updated for you it will be also available at Colorbox.dev.

FAQ

I get asked these two questions a lot, so I just wanted to answer them out in the open.

Written by

Design @Coinbase | San Francisco, CA

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store