• Let’s Meet At Web Summit 2018! The P2H team is coming to the Web Summit 2018 that will take place in Lisbon on Nov… twitter.com/i/web/status/1…

COMPANY BLOG & NEWSROOM

28Jul

3 Free Tools to Help You Work with Color More Efficiently

In the world of web and graphic design, color is a very important factor. The colors you choose for your website will set the tone for the site. Bright happy colors can make users feel happy and want to express themselves whereas dark dreary colors might make that same user pass your site by. Some companies build a color into their brand like The Home Depot and their orange logo, or like IBM aka “Big Blue.” These companies know the importance of color and the psychological effects that it has on the human mind. Any way you look at it, color is a very important factor in design. Being in the world of IT for more than a decade means that I have had my share of projects where I had to design something or at least choose the color scheme for my application.

I have done my research and discovered several free applications that have helped me with past projects and are tools that I keep on my USB flash drive. These tools range from color identification to color scheme design. I’ve also focused on specialized search engines that will allow us to search for images with specific colors compliment our design. These tools can be used on any project that requires color design. You can use them while designing an application, a web site, or even something that is tangible like a poster or sign.

ColorPIC

The first tool that we will look at has been an invaluable resource to me and is called ColorPic. The application’s name is very fitting as the tool allows us to pick colors out of any image, application, or web page. The 579 kb download is worth the install.  You can grab the free installer from the author’s website located at this URL: http://www.iconico.com/download.aspx?app=ColorPic&type=free.

After downloading and installing the application, you will be able to find it on your Start menu. Go ahead and launch it and you will see a screen similar to the one below:

With the application opened, go ahead and move your mouse around your screen. There is a magnifying screen at the bottom of the programs interface that will show you what is under your mouse. Continue holding down the mouse button, and when you see the color that you want, simply release the mouse.

Your selection will appear in several places. You will see the different numeric representations of your color as well as what percentages of CMYB make up your color. The most important number to me is the one in the center of the screen. That is the second field that starts with a # sign, the RGB value. This is the value we will be using in the next step, so after choosing your color jot down your RGB value.

You can simply copy the correct numbers into your application to use this color. If you want to drill down and get granular, you can zoom in on a image or spot on your screen and see what colors make up the zoomed out image. You can increase the magnification by using the slider towards the bottom right hand corner of the application.  This is a great application for mastering colors and it will let you save multiple colors as well as view primary colors and other palettes by clicking on the palettes drop down menu and selecting the palette you want to view.

Color Scheme Designer

Now that we have found some colors that we like using ColorPic, we will need to find other colors that go well with our main color. How do we do that? There is a web site located at http://www.colorschemedesigner.com/ that will be able to help you out. What Color Scheme Designer does is simple. It takes the color of your choice and shows you the colors that will help accentuate your main color. Let’s browse on over to their web site and take a look at what they have to offer:

Your primary color is the one in the center of the circle. You can select your color on the color wheel or click on the RGB value to the right of the wheel and enter the RGB value that you grabbed from your ColorPic output. Once you select your color, you will have several options for displaying colors that will go well with your primary color. The first option is mono and it is the color scheme that you see above.  But you can also choose compliment, triad, tetrad, analogic, and accented analogic schemes. Go ahead and play around with them and get a feel for each of the options. Once you find a color scheme that you are happy with, you can click on the color list tab at the bottom of the screen to show you each of the colors and its associated code.

To help aid you in your visualization of the color schemes, you can also check the check box in the bottom right hand corner of your screen to enable text. This will show you the best color text to use on top of your color scheme. All in all, the Color Scheme Designer will help you see what your color schemes look like at a glance and help you realize what colors will look the best together.

Multicolr

So far, we have been able to pick our favorite color for our website using ColorPic and found colors that will accentuate our primary color using Color Scheme Designer. Now we will find Creative Common images that match our color scheme using Multicolr. Multicolr is a search engine that allows for visual similarity searches. This is a fancy way of saying that we can find images containing the colors that we want. When you arrive at Multicolr’s web site located here: http://labs.ideeinc.com/multicolr, we will see a screen that looks like the one below:

You can select up to 10 colors using the color picker on the right but we will be using just one today. After you select any color on the color palette picker I will show you a trick to use your own RGB color code that you grabbed from ColorPic. So go ahead and choose a color at random and then take a good look at the URL bar.

Do you see what is appended to the end of the URL? It is the color’s RGB code! You can change it to be the code that we found using ColorPic. I will change it to #0a1883; make sure you have a semi-colon at the end of the RGB code. When I made the change and hit enter, here’s what I see:

Clicking on any of the images will allow you to download it and see who it belongs to (who you should be crediting if you use the image as per Creative Commons guidelines).

In utilizing these three free tools, we can have a leg up in the design process when it comes to choosing colors or images that will go with our colors. We now know how to specifically locate a color that we like, we know how to find colors that will blend in well with that primary color and how to find images that we can use in our projects that will also blend in and play nicely with our design. Believe it or not, colors can make or break your website, blog, or application. If people do not like looking at your interface or site’s design, you can be certain that they will not be coming back for repeat visits. Make your designs warm and friendly and you reap the benefits.

There are lots of free and paid applications that can make your life easier. Do you have other tools or tricks that we can use during our initial design creation or mock-ups? If so, we would love to hear from you in the comments below.

leave a comment

All posts Back to top