Color The Web - Color Tools For Designers

Color The Web - Color Tools For Designers

Color trends in web design come and go but what about good color tools? We thought it was about time to whip around the web and check the state of play in the world of color tools for designers. The result? Turns out there are some pretty cool new ways of experiencing color that you might want to take a look at. In this round-up we’ve put together the best color tools available right now plus a few all-time classics.

  • 1. Hailpixel

    Hailpixel provides a beautifully simple way to find color values and explore the spectrum. Move your mouse to explore or use your arrow keys and scroll. Hailpixel was designed by Devin Hunt, a designer & entrepreneur focused on the intersection of design, tech, and entrepreneurship.

  • 2. Adobe Color CC

    From the simplest color tool to one of the most comprehensive, Adobe's Color CC, formerly known as Kuler, allows you to browse thousands of color schemes, create your own with the color wheel and share them with the community.

  • 3. Material Palette

    A material design color palette generator which allows you to choose your favorite colors and get your Material Design palette generated and downloadable.

  • 4. 0to255

    Say you're a web designer that works with color a lot and you need to brighten links in the hover state or darken a button's border. According to creator Shaun Chapman, 0to255 is the tool for you. Sure, for essential colors you might rely on memory for your hex codes but with 0to255 you can choose the color that you want to start with and receive a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.

  • 5. 147 Colors

    Sometimes it helps to have the basics on hand. 147 colors is the brainchild of Brian Maier and is designed to help web designers and developers learn the 147 colors that are defined in the HTML and CSS color specification. The 147 Colors consist of 17 standard, plus 130 colors. The value is the color's name, not the hex value or RGB value. Click the grid for all colors, click the little refresh icon to grab a new color full-screen.

  • 6. Shutterstock Spectrum

    Shutterstock Spectrum displays nice sized images based on the color you choose in the slider at the top of the screen making it very handy for some lateral inspiration. You can add a keyword to improve the accuracy of the subject matter and filter images by brightness and balance.

  • 7. Coolors

    To use Coolors, simply hit your space bar to generate color schemes then click on a color to get combinations. Some nifty adjustment tools and an easily accessible undo and export button make Coolors a breeze to use. Created by web/app designer & developer Fabrizio Bianchi.

  • 8. Colrd

    Colrd lets you create and share color inspiration via palettes, gradients, patterns and images. Nicely presented and simple to use, Colrd is brought to you by a team of color scientists focussed solely on finding new ways to experience color on the web.

  • 9. Paletton

    Paletton seems to have been around forever (in a good way) but was in fact launched in 2002. Paletton shares some features with other color generators like Adobe's Color CC mentioned above, however you can also select colors from within the color scheme and effectively 'burrow down' to find new color possibilities.

  • 10. ColorZilla

    ColorZilla was launched back in 2004 and is an extension for Firefox & Chrome that features an advanced eyedropper, color picker, color analyzer and other goodies while the Ultimate Gradient Generator provides an online Photoshop-like CSS gradient editor plus image to CSS converter and more.

  • 11. Checkmycolours

    Checkmycolours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone experiencing color deficits.

  • 12. presents hex values in words along with their meanings. Wha? For example the hex value #abaca5 becomes the word abacas, which incidentally is a large plant from the Philippines apparently. Designed and developed by Zach Wolf.

  • 13. Design Seeds

    If you have a project with the need for soft earth tones, Design Seeds is worth a visit. Design Seeds celebrates colors found in nature and was launched in 2009 so it has plenty of inspiration.

  • 14. Colorotate

    Also available as an iPad app, Colorotate is a tool designed primarily for creating color palettes plus you can browse existing palettes, then add, mix, and share. Colorotate differs from other similar offerings due to the 3D styled color wheel and allows more than five colors in a palette.

  • 15. ColorHexa

    ColorHexa provides information about any color. Just type a color value in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY. ColorHexa will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors.

  • 16. COLOURlovers

    No color tool roundup would be complete without COLOURlovers, a classic resource you should already know about. With over 8M colors, 3.7M palettes and 4.7M patterns created by users, the odds are you will find something useful. After all, 1.5M+ followers on Twitter can't be wrong ;)

  • 17. Contrast-A

    Contrast-A is another 'oldie but goodie' that was created by Annika Hamann (DasPlankton) in January 2009. This interesting tool allows users to experiment with color combinations, check them against accessibility guidelines and create custom color palettes. Contrast-A inspects color combinations for acceptable contrast and displays the results according to WCAG 2.0 (Luminance Ratio) as well as older accessibility guidelines.

  • 18. Color Picker

    Not a fan of complicated tools? Not to worry, Color Picker might be just your thing. Simply click in the form field to activate the color wheel or simply enter your desired hex value and Color Picker will pull up complimentary colors, triad colors and tetrad colors. If you want some mindless entertainment then click the random button and repeat, and repeat, and repeat ;)

That wraps up at our search for the best color tools for designers. We hope you found something of interest and remember to share them around to help the creators feel some love for creating such useful tools and providing them for free.

Go to Top