Time Saving Online Color Tools for Web Designers

By , March 22nd, 2013 , Tags: , 0 Comments

Working with colors is a time consuming task for a web designer, for starters you need to pick out a color palette for your designs, then there’s all kinds of code values to remember and convert from hex to RGBa. To speed things up and make the designer’s life much easier a bunch of handy tools are available online. These tools help you pick, choose and convert your color selections with ease for your next web design project.

Color Palette Tools

If you’re starting a design from scratch with no brand guidelines or colour inspiration it can be tricky putting together a colour scheme that works. Here’s a few tools that will help you put together a pretty combination of colours that are guaranteed to work.


ColourLovers is home to millions of user generated color palettes. Browse the collection and pick out ones that inspire you, or find other colours that are a good match for a hue of your choice.


Adobe’s Kuler is a powerful tool that only allows you to browse and rate existing color themes, but also includes tools for creating your own palette from scratch.


Looking for a particular emotion, style or atmosphere from your colour palette? Pictaculous is a clever tool that allows you to pick out colours from an uploaded image.

Color Picking Tools

Photoshop has its its default colour picking window which I’m sure all web designers are familiar with, but just think about how many times you’ve had to switch back and forth between apps to copy/paste or memorise colour values. There has to be a better way! Actually, there is…


A simple yet amazingly useful little tool, color.hailpixel.com allows you to scan your browser window for the perfect colour, then copy the hex code with just a single click.


Why settle for a hex color value of a bunch of random letters and numbers when you can select much more fun and memorable colour names such as #doodle or #goofed. Find a whole bunch of colorful words at Hexu.al.

CSS Color Names

If random color names aren’t quite your thing, maybe this list of 147 descriptive color names might be a little easier to remember in your stylesheets. View the full selection or see a random value with each click of the mouse.

Color Theory Tools

Remember learning all about the colour wheel and analogous, triadic and complementary colours back in Art class? You can put that theory into practice with the help of these color scheming tools to create palettes that are scientifically proven to work.


The color theory visualizer tool named Sphere gives you a nice and simple interface to pick out hues and tints on the colour wheel. Pick out your desired style of palette to constrain your colour selections to harmonizing values.

Color Scheme Designer

Design your own colour scheme with the Color Scheme Designer. Rotate and adjust the colour wheel to select your base colour, then see automatically generated values based on your palette type.

CSS Color Generator Tools

The latest CSS3 enhancements mean we can now create various colours directly with code, but CSS syntax is much more difficult to work with than a visual colour wheel. This is where generator tools come in handy, to provide the code required to create your desired effects.

Ultimate CSS Gradient Generator

CSS3 gradients are notoriously difficult to write out in code. Not only do you need to know the different colour values, you also need to add the various vendor prefixes to get it working across multiple browsers. The Ultimate CSS Gradient Generator makes it easy by giving you a Photoshop-esque interface to set up your gradient, then gives you the code to copy/paste.

Hex 2 RGBA Color Calculator

Converting a hex value to RGB or even RGBa isn’t difficult, it’s just tedious when each value is given separately, meaning at least three clicks to copy the numbers. Devoth’s Hex 2 RGBA Calculator makes the process easy with the complete CSS value being copied with just one click.

Bonus! Reader Suggestions

Since I published this articles there’s been some great suggestions of colour tools I was unaware of, here’s a couple of more resources that will really help you out during your next project.


The standard for selecting a hover state for your links is to simply choose a darker tint of the same colour. This process becomes so much easier with the help of 0to255.com. Choose your colour and see a complete series of variations, making it perfect for hovers, gradients and borders.

Color Hexa

Color Hexa is like the encyclopedia of color! Enter your chosen colour in any value you desire and it will display a description along with some handy facts. A direct conversion from Hex or RGB to the closest CMYK value is also particularly useful for print designers.

I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.