Introducing the new ColorBox
TL;DR The new ColorBox is available now at colorbox.io.
Today, I couldn’t be more thrilled than to introduce you to a brand new ColorBox. This is a day I’ve looked forward to quite some time.
ColorBox for the past two years has surpassed my wildest expectations. It’s served countless designers and non-designers. I’ve heard so many stories of ColorBox helping large companies roll out new accessible color systems to freelances rapidly generating palettes for clients. I’ve even heard a story where someone used ColorBox to generate colors for her wedding. It’s truly humbling to hear these stories.
The past two years has felt surreal. Way back then, I wrote ColorBox because I was frustrated with existing color systems and color tools. Honestly, I never built ColorBox to do what it did. In a lot of ways, ColorBox was a humble prototype, and it built to support the concepts in Re-approaching Color. To think that prototype just generated its 50th million color blows my mind.
While I know it’s helped so many people, it is far from perfect, and many amazing people have reached out to me to chat and show me their crazy workflows, but if you look at the end of each message there will be a pleasant plea for a feature or update, and those people and pleas are what drove me to make today happen. For those of you who reached out to me, I can’t thank you enough for taking time out of your life to share your thoughts and work with me and hope this update delivers on your belated requests.
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.
By doing that, I was able to revisit all of the choices I made in the original ColorBox and ask the existential question — is this really the best way to do this?
One of the choices that almost immediately jumped out to me was the hue, saturation, and brightness graph. Back in 2018, it was the key difference between this color tool and the hundreds of other tools — generation through Bézier curves.
But looking at it with Today’s eyes, I can’t help but think the graph dominates the interface. It allows you to see the inner-workings of how a color set moves through a given color space, which is interesting, but I’m not sure those data points provide significant value in the decision making process for color, and so I started to ask myself what could be more valuable than this.
Something I found consistent through out all the screenshots people sent me over the years is folks always seemed to have 10+ tabs of ColorBox open at once. It seemed rare for anyone to just work on one color at a time, but that was what the interface was built for.
So with that said, it wasn’t tough to figure out what belonged there.
Multi-color creation
In the new ColorBox, your color system is front and center, and for the first time you have the ability to modify as many colors as you need to all within one tab.
By having this all within one interface, I’ve found this helps with creating, maintaining, and sharing your color system. You can now have one source of truth as a URL or JSON and no longer to have to manage all your links in a document somewhere.
P.S. the URL is now Slack friendly, so you won’t have any weird URL manipulation in Slack when you share it with coworkers.
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.
While it does take some consideration and fiddling to make the system you want accessible, the old ColorBox had primitive indicators for Accessibility, so many people used secondary color contrast tools to help. Plus, for the many of you who don’t use #000000 as your primary black I heard you, and this update is for you.
Now when no colors are selected, you’ll see this panel pop up on the right. It’ll give you the ability customize the contrast levels and give you the ability to change the data points you want to see overlaid on the colors.
To help even more, you can now turn on Levels, which will appear as dividers in color sets to show you the breakdown of 3:1, 4.5:1, and/or 7:1. They’ll use the contrasts you define at the top of the inspector panel, and you can toggle which contrast you would like to use for each level.
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
For the sake of focus and time of this writing, I’ll describe this approach briefly, and if you want a deep dive into this just keep insisting me to document this approach in greater detail.
Let’s create a Dark Mode color set in ColorBox:
Turn on Auto Dark Mode in the Options tab
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.
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.
Quick note — There may be a slight difference between Auto and Manual Dark Mode, and that’s due to there being a difference in how ColorBox (manual) and the lastest Color Algorithm inversion happens (auto). This will be resolved soon in the next Color Algorithm version coming soon, and they will invert the same.
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.
The values are different, but the color appears similar. With this approach, you can now design once and get two acceptable outcomes.
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.
OK back to ColorBox’s features.
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.
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.
Other cool thing in the plugin is the ability to customize the naming of steps, and be able to generate all the Figma Paint Styles automatically.
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!
If enough people want a Sketch plugin, I’ll potentially create a Sketch plugin.
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.
It has been an absolute pleasure to return to ColorBox. Working on this version of ColorBox at odd hours in my COVID-19 apartment gave me so many flashbacks to writing the original one while I was crammed in a tiny hotel room.
I couldn’t thank you more for all the love and support that you’ve shown ColorBox over the past two years and can’t wait to see what you all make with the new one!
Follow me on Twitter if you’d like to stay up-to-date on future ColorBox improvements or other future passion projects!
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.
Since leaving Lyft, will you turn ColorBox into a product and charge money for it?
I just want to say flat out — no. I remain committed to offering it free including ad-free. I firmly believe that anyone who wants to use ColorBox shouldn’t have to face any barriers to use it including money. After all, being able to create accessible palettes benefits everyone.
Will you open-source ColorBox like you did the color algorithm?
Right now, my answer is no, but maybe one day. The most important thing to me is that ColorBox remains useful, free, and everyone has access. When I’m unable to commit to those three things, I’ll look at this option again. Right now, I just don’t have the time to manage an open source project like ColorBox.
