Orangeinks

ColorSuckR: Suck the Colors from Photos and Make Color Schemes

ColorSuckR is a tool that you can use to extract colors from a photo and automatically create a color scheme based on that photo.

To use the service, your photo must be hosted somewhere online. The app does not support photo upload from your computer. You can upload your photos using various photo hosting sites and provide them with the Photo URL. The engine will automatically generate a color scheme based on your photo.

ColorSuckr is a great tool for automatically producing color schemes for your next web design or artwork. If you want to design a site based on the colors of a logo that you have previously made or one that was given to you, the tool might come in handy in choosing the colors that will complement your logo.

ColorSuckR Tips

•Drag and drop the color results: You can move the color results around the page, click on the color strip, hold and drag, let go to drop. You can also show and hide the color text by clicking the small grey dot next to the strip.

•Flickr pages: If you enter a Flickr photo page (e.g. http://www.flickr.com/photos/orangeinks/3597013093/) in the ‘Enter image url’ box, ColorSuckr will find the main photo.

•Web pages: If you enter a web page URLl (e.g. http://orangeinks.com/) instead of an image, ColorSuckr will scan the page and show you the images on it & you can choose from there.

•Use color photos: Yes, this sounds silly, but black and white images will only return a few shades of grey.

•Bookmarklet: Drag and drop this link – Get image colors – into your bookmarks bar or save it to your favourites and make getting colors from web images easy. Next time you are on a webpage with images you’d like to get colors from – just click the bookmark. (Works on images larger than 50px x 50px)

•Colors that are picked: ColorSuckr chooses the 12 most common colors from an image, so if your image is mostly blue with a splash of pink, chances are the pink won’t get picked up.

•Install the Firefox add-on: Rather than messing about with copying and pasting urls, make it easier to grab colors from images by installing the add-on for Firefox.

*They also have a great collection of pre-selected colorful flickr photos for you to choose from that generates awesome color schemes.

Tags: Color Scheme, Color Scheme Generator, ColorSuckr, flickr, Photos

The Color Scheme Designer

Here’s another great tool for web designers or for those who are actually thinking of redesigning their websites. I give you The Color Scheme Designer. It’s a tool that you can use to pick the right color schemes for your next layout, may it be your blog, website or social networking page.

To use the tool, just drag around the small dot on the color chart. You can choose different models for your color scheme.

The Mono or Monochromatic Model is based on a single color tint and uses only variations made by changing its saturation or brightness.

The Complementary Model is where the primary color is supplemented with its complement which is the color that can be found on the opposite of the color wheel.

The Triad or Soft Contrast Model gives you an effect where the primary color is supplemented with two colors that are placed identically on both sides of its complement.

The Tetrad or Double-Contrast Model is a scheme is made by a pair of colors and their complements. It is based on the foursome of colors evenly distributed on the color wheel (90 degrees distribution) – also known as the Tetrad.

The Analogic Model is made by the primary color and its adjacent colors found on the color wheel – two colors identically on both sides. This color scheme always looks elegant and clear which gives a warm approach.

The Accented Analogic Model. This is the Analogic model with complementary (contrast) color added.

Play around with colors by adjusting the Schemes and hues for different models. The scheme info will give you the color codes that you can use to edit your CSS files and the images used in your design. You can also view a page sample where the color scheme and model that you selected are applied. You can view a light page example or a dark page example for that matter.

Learn more about the different color schemes by using this tool and create a better looking website or something that fits your taste.

Tags: Color Scheme, Design, web app