Open Source Resources for Web Application Developers

Color Thief is a script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen. This script could be useful for sites that sort and search by color.

With Color Thief you can also build a UI that adapts to the colors of an image. For example, you could add color accents to the UI by changing the font or border color depending on what image is currently being displayed in your portfolio.

A recent example of a color adapting UI is seen on Google Chrome’s new home tab. The dominant color of the favicon is used as the bottom border color on the screenshot.

Requirements: JavaScript and Canvas
Demo: http://lokeshdhakar.com/projects/color-thief/
License: Creative Commons 2.5 License

• 1 Comment

CSS Prism is a CSS color spectrum inspector. Input the path to any .css file, and it will output an easy to scan display of all hex colors from the file. Unwanted colors can be edited via a Photoshop-like color picker and the resulting .css file can be downloaded for your convenience.

The CSS Prism Bookmarklet will insert links to any webpage’s linked .css files just inside the body tag. CSS Prism will be quite helpful to you if you are building more sites at work.

Requirements: -
Demo: http://cssprism.com/
License: License Free

• 2 Comments

HSL (Hue, Saturation, Luminosity) allows us to describe meaningful relationships between colors. Give this brown color, hsl(36, 73%, 10%), it’s clear that if we desaturate 40 steps and lighten 70 steps we get hsl(36, 33%, 80%), a cream color. HSL Color Picker can help you with this.

In graphics software, it feels more natural to work with HSB (Hue, Saturation, Brightness) than RGB or CMYK. Now, with CSS3 we can use HSL which is actually quite different than HSB. Without a decent HSL color picker, it’s difficult to understand.

Requirements: -
Demo: http://hslpicker.com
License: License Free

• 1 Comment

The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors.

Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.

Requirements: jQuery Framework
Demo: http://www.xarg.org/project/jquery-color-plugin-xcolor/
License: MIT, GPL License

• 2 Comments

JavaScript ColorPicker is a light weight all-rounder (only ~46k incl. all 16 files) that can display and let you choose the entire color palette (~16.78 mil. colors) in 6 different color modes (+3 extra modes in RGB).

This highly customizable and easy to install app comes in 4 different sizes (from 151 x 87 pixels to 405 x 302 pixels) and therefore different feature levels so you can use it for every supposable cause from ‘easy choice’ to ‘professional determination’. That’s probably all you’ll ever need to let your clients choose the right color.

You’ll also find a lot of extra helpers and smart features like contrast-meter, color-difference-meter, value-slider in input fields, web-smart and web-save button, color memories and much more that can help your clients make the right decision.

Requirements: Javascript Enabled
Demo: http://dematte.at/colorPicker/
License: GPL License

• 1 Comment

0to255 is a simple tool that helps web designers find lighter and darker colors based on any color. 0to255 cures your color manipulation woes. It’s fun, simple, and a huge time-saver.

Simply pick the color that you want to start with and 0to255 gives you 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.

Source: http://0to255.com/

• 8 Comments

ColorSuckr can create color schemes based on photos for use in your artwork and designs. It extracts the 12 most common colors from your image.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.

If you enter a web page url (e.g. http://theDesignInspiration.com/) instead of an image, ColorSuckr will scan the page and show you the images on it & you can choose from there. Make getting image colors even easier with the ColorSuckr Add-on for the Firefox browser. Install the add-on, then simply right click any image on a webpage and choose ‘Extract Image Colors’ from the menu to go straight to the ColorSuckr website with the image.

Requirements: -
Demo: http://colorsuckr.com/
License: License Free

• 3 Comments

Like taste and smell, color is a sense that is processed by our brains in multiple dimensions. Yet traditional methods of choosing colors on computers are limited to obscure sliders and flattened two-dimensional viewers. With ColoRotate, you can work with colors in 3D, in real time, and in a way that matches how our minds process color.

ColoRotate has an intuitive interface that eliminates the need to memorize or jot down color combinations or numbers. Indeed, you can traverse across an open three-dimensional color space and choose (or design) the color palette that fits your needs.

Source: http://www.colorotate.org/

• 3 Comments

While designing web pages, computer applications, or house interiors, we need to find good color scheme – set of colors producing the best impression. For every tint there are colors which it can coexist with, and which it can’t. Some combinations are uncomfortable, or disturbing – while others are pleasant.

Experienced designers choose colors intuitively, many people can smell which colors go together well and which don’t. However, finding the good combination of colors may be sometimes long and gruelling work. The color theory makes the work easier. Color Scheme Designer will find set of colors you can start with, and it may facilitate your looking for the optimal color palette.

Color Scheme Designer generates color schemes of several types. Every scheme is based on one (base) color, which is supplemented with additional colors making together the best optical imperssion – using one of the authentic algorithms.

Color Scheme Designer V3 has launched recently with A brand new interface, as well as the engine, all rewritten from the scratch. Rapidly increased precision and color space conversions, better preview, enhanced scheme creation system, unique scheme IDs and permanent URL of the scheme.

Requirements: -
Demo: http://colorschemedesigner.com/
License: BY-NC-SA License

• 8 Comments

ColorCobmos was built to help web developers quickly select and test website color combinations. The heart of the site is the Combo Tester, which allows web developers to see how different color combinations work together on the screen. If you are looking for Color Combination ideas, check out the Combo Library. The library contains hundreds of color swatches, along with their color hex values.

You can also look at other Color Schemes Picker/Generator we talked about. I am sure that you will be able to find or create the perfect website color schemes using these color tools.

Requirements: -
Demo: http://www.colorcombos.com
License: License Free

• 1 Comment