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
- Runs code locally on the browser that is hosted on Google Apps Script
- Can create palettes and color ramps by applying the algorithms developed for Color Matching in GAS
- Accesses color scheme data that is held in Pars
e.com - The use of promises will help to implement the async nature of this app so that database lookups are non- intrusive.
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