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
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.
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:
Analogic mode for analogous colors:
Monochrome mode for monochromatic color schemes:
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.
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;