Discover the Perfect Color Scheme with ColourCode

Finding the perfect color scheme often involves a lot of manual work and subjective decisions for designers. Luckily, there are tools designed to simplify this process. Previously, we’ve discussed Adobe Kuler for iOS and a handy resource called 0to255 for easily finding HEX codes for various color shades. This time, we’re diving into another great tool: ColourCode.

ColourCode is an intuitive web-based tool that simplifies finding color schemes. It allows users to select colors based on HSL (Hue, Saturation, Lightness) values. With several modes available, users can find complementary colors in just a few clicks and even download color swatches in various formats.

Best Color Tools for Web Designers

Best Color Tools for Web Designers

Setting a basic color theme for your web design project might be easy, but deciding the right color... Read more

How to Use ColourCode

Visit the ColourCode page and hover your mouse over any area to see a color and its code. The colors change as you move your cursor, and clicking on a color locks in your selection. It’s that straightforward.

To add another color to your scheme, click the Plus icon on the right and hover over the page again to select another color. To remove a color, simply click the trashcan icon.

Color swatches example

This process allows you to pick color swatches in free build mode. There are other modes available for different color scheme needs.

Complement mode for complementary colors:

Complementary colors example

Analogic mode for analogous colors:

Analogous colors example

Monochrome mode for monochromatic color schemes:

Monochromatic colors example

Explore these and five additional modes on their website.

Manual Adjustments

Below each color selection, a down-arrow icon reveals more details and options, including changing the color format manually among HEX, RGB, HSL, CMY, CMYK, XYZ, and YXY. You can also use the color sliders for fine-tuning.

Color detail and adjustment options

Securing Your Selected Color

Once you’ve chosen your ideal color, you can download it in formats like SCSS, LESS, or PNG. While ColourCode doesn’t offer a built-in code editor for immediate copying and pasting, downloading and opening the color definition with a desktop editor is straightforward. Here’s an example of how the color code looks in an SCSS file:

 $color: #a8e2ba;

And in a LESS file:

 @color: #a8e2ba;