Color scheme explorer

In this section, we'll build an application that pulls together many concepts already covered elsewhere on this site. You can run it standalone at xliberation.com, or below, embedded in this page

The target application

Pulling together Playing around with GAS color, Find nearest color match, Parse.com, Colorschemer API,  and various others we'll build a javaScript app that
What does it look like



Try it live here

colorschemer live

More color schemes

I'm looking for more color schemes. If you would like to contribute a color scheme, all I need is the link to a Google Document with the scheme in it, like the colortable tab in this spreadsheet.

How to use


  • Enter the html code for the color you are interested in and create details


  • Select the color scheme in which you want to find the closest matches and create palettes. I've loaded 4 so far. It's easy to load more. If you have a scheme you'd like to load let me know.


  • Various ramps and palettes will be created by searching the selected scheme for the closest matching colors. Here' we'll see the 5 nearest colors in the scheme, and various palettes based on hue, lightness and saturation using a couple of different models. In each case, the closest match in the selected scheme to the ideal color is shown.

The nearest color match

This strip shows the nearest 5 colors to the target color that were found in the selected scheme.


This strip shows 5 colors separated by hue, using a couple of different color models

This strip shows 5 colors separated by lightness, using a couple of different color models

This strip shows 5 colors separated by saturation, using a couple of different color models

The color data

During the calculations to find the closest color in a given a scheme, many useful values are calculated. These are shown for the nearest match to the selected color.

Selecting other colors

In addition to querying by html color code, clicking on any box will analyze that color as the new target.

Selecting new schemes


You can pick new schemes from the drop down box.

Theme and random colors

You'll notice that if you don't select a color by the time it has loaded a default scheme, it will select a default color and process it. The theme of the banner is also changed to match the selected color with an appropriate color ramp.


Technical details - how it works

More color related topics?


For help and more information join our forum,follow the blog or follow me on twitter .