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.
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)
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.
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.
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.
Brand Colors
Less useful than the previous one, this one shows the major colors of the hot online sites.
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.
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!
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 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.
Pretty IP
This is a tiny little cute color web app that detects your IP address and generate a color scheme for you.
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.
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.
I Want Hue
This color scheme generator is pretty complicated and well rounded. You can go through the tutorials to fully utilise the site.
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!
Content reference: Coliss – ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春
Comments