Click To Find Color Scheme With ColourCode

Getting the right color scheme may require designers a lot of manual effort (and subjective opinions). Good news is, there are tools that can help making your life easier. We’ve previously covered Adobe Kuler for iOS as well as a handy tool called 0to255 that helps you obtain HEX codes for color shades easily. This time around, we’re looking into ColourCode instead.

ColourCode is a web-based tool to find color schemes easily. ColourCode lets you pick colors based on HSL (Hue, Saturation, Lightness) values. It has a few modes that let you pick complementary colors with just a few clicks and you can also download the color swatches in a few formats.

Using ColourCode

Once you are at the page, hover your mouse anywhere on the page to get a color, and its color code. The colors will keep changing whenever you move your cursor. If you like the color you see, click on it to lock in your choice. It’s that easy.

To add another color, click the Plus on the right and repeat the hovering and the clicking to lock in another color. To remove a color choice, just click the trashcan icon in the middle.

This is how you pick color swatches in free build mode. There are a few other modes to pick color swatches from.




On top of these 4 modes, there are 5 more which you can explore at the site.

Adjusting Manually

At the bottom of each color is a down-arrow icon. Clicking on it shows you the details for the color and other options such as the ability to change the color mode manually (by clicking on it) amongst formats like HEX, RGB, HSL, CMY, CMYK, XYZ or YXY. Alternatively, you can use the color sliders to make changes as well.

Getting The Color

When you’ve determined the color you want to use, you can grab it in SCSS, LESS, or PNG format. Unfortunately, ColourCode doesn’t provide you with a built-in code editor to copy and paste the source. You have to download it first, then open it with your desktop editor.

Even so, the source is only a single-line color definer. The following is a source code in SCSS file:

$color: #a8e2ba;

And this one is in LESS:

@color: #a8e2ba;