Line25

10 Time Saving Online Color Tools for Web Designers

Read the full post

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

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.

Kuler

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.

Pictalulous

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…

color.hailpixel.com

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.

Hexu.al

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.

Sphere

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.

0to255

0to255

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

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.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

27 Comments

  1. Thanks for sharing such an useful list. I was unaware pf many of this sites. Now I use this to work more effectively.

  2. Thanks for this useful list :)

    I love 0to255.com – massive timesaver when trying to find hex codes for hover states.

  3. Liam says:

    Awesome! I really like this. keep up with the good work. Thanks a lot for sharing.

  4. Jon Ewing says:

    Great list.

    I use colorschemedesigner.com often. A very useful tool.

    More useful still is the Firefox add-on ColorZilla, which is a huge time saver.

    Also worth investigating is Chirag Mehta's "Name that Color" – sometimes it can be helpful to be able to describe a colour as well as just to use it.

    And the Design Seeds palette search is good for inspiration.

    Incidentally, as a fellow Englishman, you may understand that it still grates a little bit spelling "colour" without the "u" every single day of the week.time and time again.

  5. Mika says:

    http://0to255.com/ is very usefull too

  6. Aman says:

    This is an awesome share, i really like experimenting new colors

  7. Nice post Chris. Lot of useful tools. Thanks for sharing.

  8. stu says:

    also http://www.hexwords.info – css colour chart with hex words as colour codes :)

  9. Federico Totti says:

    You can easily fall in love with http://design-seeds.com/

  10. Liam says:

    a great post..
    Some of these were known to me but some were new and were really good..
    thanks for this great post.

  11. Really useful tips and even’s tips are useful.. Thanks to you..

  12. Thanks for sharing a very useful article.

  13. dietplanhub says:

    Ultimate CSS Gradient Generator , it is really awesome tools…

  14. sher yar says:

    thanks for shaing

  15. I've been using Pictalulous.. and this tool is excellent. This is a must-try for all web designers out there!

  16. Thanks for these. As a designer labelled colour blind at school this is one of the biggest challenges I face.

  17. Thanks for sharing, Chris. Good article! ;)

  18. Love Kuler, will have to check out the rest of these!

  19. mwgroup says:

    Thanks for <a href=w3schools.com>Web Design all code</a> . Very effective. I like so much.

  20. Oliver says:

    Some good tools listed here. I particularly like Sphere.

  21. mehedi says:

    I need helf

  22. Bb says:

    Color SynthAxis by Cranf.

    http://color.cranf.net/

    Amazing…

  23. Great Post.
    Thanks for sharing , Its very useful.

  24. Mike says:

    I've used gradient generator in the past, you should also include blueprint html generator!

  25. I'm in complete agreement with a lot of the information in the following paragraphs. You certainly are a special article writer have real profit put your own views directly into apparent phrases. Anyone will be able to understand why.

Sorry, comments are now closed