New color scheme tools for the year 2013

09.05.13

Posted by: Jayhan Sim



New color scheme tools for the year 2013

When comes to finding color inspirations or searching for color schemes, there are two main resources: Adobe Kuler and also ColourLovers. Both are really essential for designers, to find the suitable colors, and also using the tools to create personal color schemes.

Coming to the year of 2013, according to Coliss.com, there are many other online color and color scheme tools as well. They are not as powerful as the two sites mentioned earlier, but certainly they will helpful in other ways. Please continue read on to check them out!

Flat UI Colors

Ok, flat design is real hot and trending right now! You will find many great examples of flat designs, and somehow share similar color palette. In this site, you will find the popular colors that are commonly used when creating flat designs. Note that the Pantone color of the year 2013, “Emerald”, also visible in the list.

Flat UI Colors

PLTTS

The color palettes in this site were pull out from ColourLovers by using its API. It gives the users an alternative to search for desired color scheme using HEX color code of choice with a cleaner interface. It’s a useful side project by iDuuck (http://twitter.com/iDuuck)

PLTTS

CSS Color Names

In this site, you will learn hundreds of color names, that you can use in CSS. So next time instead of using HEX or RGB values, why not using CSS color names? You can go to the grid view to check all the colors at one go. Currently featuring 147 color names.

CSS Color Names

Hexual

What, we can actually learn new words with color HEX code? For example color code #BADA55, will give you the definition of “Badass” (5 looks like S). This site is not necessarily useful, but it’s a cool addition to the list here.

Hexual

Guideline Colors

This site features the corporate color guidelines for popular online tech companies like Facebook, Twitter, Google and more. Clicking on the color squares will lead you to the respective brand/logo guideline.

Guideline Colors

Brand Colors

Less useful than the previous one, this one shows the major colors of the hot online sites.

Brand Colors

Web Colour Data

By using this site, you can actually generate color schemes for specific URL that you entered. Not only it detects the css colors, but also image pixel colors that are used in the page URL as well. Could be useful to check out what’s the main color and what is secondary color, and whether it’s aligning with the brand color.

Web Colour Data

Colourcode

Colourcode is very useful when you want to find out the HEX, RGB, HSL value of one particular color at one glance. Hover the color pane then you will find many other colors and it’s properties. You can switch between one solid color or colourscheme. In Colourscheme mode, you can find the shades of one color. Useful when finding the right shades!

Colourcode

HEX Color Tool

So, you have a color and blindly looking for the darker or lighter shades of it? This tool is going to solve your problem by generating a better suggestion for you. This website can be really useful when you try to find different shades of color to create some sort of 3d vector works.

HEX Color Tool

HEX to RGB converter

Ok, what if you just need a simple converter from HEX to RGB and vise versa? Apart from using graphic editing tool, you can just fire up your browser and use this site instead.

HEX to RGB converter

Pretty IP

This is a tiny little cute color web app that detects your IP address and generate a color scheme for you.

Pretty IP

Multicolr Search Lab

Multicolr extracted colors from 10 million Creative Commons pictures from Flickr. Simply choose some colors from the color palette and see the generated images on the left. Useful when finding images with the color mode that you want.

Multicolr Search Lab

Pictaculous

Upload and image and you will find the generated color scheme for you. It also suggests color schemes from Kuler and ColourLovers that you might interested to use with the uploaded image.

Pictaculous

I Want Hue

This color scheme generator is pretty complicated and well rounded. You can go through the tutorials to fully utilise the site.

I Want Hue

Contrast Ratio

Still remember a popular website called Contrast Rebellion? This contrast ratio app created by CSS Queen Lea Verou is going to be the Contrast Rebellion’s best friend. Simply compare two colors (Background color and text color) to check out their contrast ratio that is given in score (Based on WCAG 2.0 on color contrast). The higher the better. Got a red circle? Better change your color!

Contrast Ratio

Content reference: Coliss – ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春


Similar Posts: