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 colorFind nearest color matchParse.comColorschemer API,  and various others we’ll build a javaScript app that 

What does it look like Try it live here

 

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 related topics here