Using Colorbox to generate a perfect color palette
The Colorbox tool is an amazing tool for generating colors. It is a free tool you can access using this link. That said, If you’ve used the Colorbox tool before, you understand how hard it can be to generate a perfect scale. It can be pretty hard to even understand the interface. Most first-time users don’t know where to begin.
In this article, I will show you a great way to generate color scales for your next project using this tool.
Getting started
Let’s say I want to generate a color scale for this color — #D85848. On Figma, I open my color picker and select the HSL option (or HSB, doesn’t matter in this case). Then head on to Colorbox.
First, click on the color you want to edit. When you look at the Colorbox interface, on the right-hand side, you should see it is divided into Hue, Saturation, and Brightness. This corresponds with HSB (Hue, Saturation, Brightness or Lightness) on Figma. You need to take some of these values from Figma and paste them into Colorbox.
But it’s not that simple…
Hue
At least it is simple for the Hue section. Here, just copy the Hue number on Figma (the first digit) and paste it into the Start and End fields. In this case, I copy 7 and paste it into the Start and End fields. Leave everything else as is. Your work here is done.
Saturation
In this section, you set ‘Start’ to 0.1 since you want your first scale to be the least saturated but don’t want it to be 0 (which will be completely desaturated). You can tweak this value if you like your initial color to be a little more or less saturated. When changing your values, make sure they are on or between 0 and 1. The values ‘0’, ‘0.1’, ‘0.56’, and ‘1’ are all valid. The lower you go, the less saturated the colors.
On the End field, a saturation of 1 works in most cases. You can adjust this figure if you like your end color to be less saturated. Just make sure your ‘End’ saturation is higher than your ‘Start’ saturation. Leave everything else as is. Your work here is done.
Brightness
On the Start field, you set your initial brightness to ‘1’ since you want the first color to be the brightest. You can tweak this if you’d like your initial color to be a bit darker. The valid values are the same as that of Saturation.
On the End field, you don’t really have to do anything. I find that a brightness of 0.2 (the default value) works for most colors. Once again, you can adjust this value to lighten or darken your darkest color. Your work here is done also.
One last thing…
You should be getting a nice scale that looks similar to your brand color. One last thing though.
After generating colors this way, you often find that your brand color isn’t part of the colors you get. Don’t fret, it is kinda normal with Colorbox. What I do is force the color progression through my Hex value. Sounds complicated but it’s straightforward. I just copy the hex code from Figma and head over to Colorbox. While clicking on my color in Colorbox, I select “Options” and locate the “Lock Hex”. I paste my Hex code and that’s it. My brand color should now be in the scale generated.
Importing your scales into Figma
If you’d like to import your color scales into Figma, you can use the Colorbox plugin on the Figma community. On Colorbox, click export, copy JSON, and paste the JSON into the Colorbox Figma plugin. Simple stuff really. You can watch a quick video here.
And that’s really it…
You can go in and play around with the other values if you need something different. But this is the basic way for you to generate perfect color scales.
