Time to create interactive colors sets with HTML, PHP, JavaScript and jQuery!

Introduction

For my WebComics, I needed to extend my Copic Colors Markers set. But markers are expensive, and there is a lot of choice (something around 358 colors – the feature image above is not my own set; mine is way less complete 😛 ), so I had to chose the new colors very carefully.

Copic website propose a color chart where you can see the color infos, use a filter to display only a certain set (all, ciao, sketch…) and click to add color to your personal set. Problems:

• Each time you click, you get redirected to the color page. Very inefficient.
• Colors order is based on their ID in the alphabetical order, not in a logical order based on their value.

Copic also propose some PDF with different ways to present the colors, but I wasn’t satisfy either : you can’t filter the color to display only the set you consider (aka, only the Copic Ciao set for eg). So, for me, it shows way more colors than I need.

Something more modern and interactive could be done. I started to note some ideas, and at some point, I decided to give it at try. It could be a good training in JavaScript. Playing with color is always fun.

In this article, I will tell you a resume of what I did to satisfy my initial needs.

The following experiments are based on the Copic Ciao colors set, but can easily be translatable to all colors (the code is ready to be extensible).

Colors Infos Parsing

The first step was to get color infos (name, hex value, id, family, luminosity and saturation values…). This is where reverse engineering began.

I extracted the HTML from the Copic Chart page to get the colors table.

Using PHP, which have builtin XML parser, I convert the table into an object containing all colors and their infos in a manipulatable way.

From that, I created two multidimensional tables of colors (for PHP manipulation):

• ID as key.
• Family Color as Key, and inside each family, list of colors.

This two PHP tables are used for manipulating the data in efficient way. It is more convenient than having only one table.

I also created a table containing the colors of my own personal set, to be able to mark the colors I already have.

Tables Creation

From the two tables shown above, I recreated the Standard Copic Color Chart, in HTML.

I change some columns order so that it shows a more smoother gradient than the original Copic Color Chart. Indeed, Earth colors were presented at the end of the table after the blue variations, despite the fact that they are closer to red.

An other improvement I made was to align colors based on their values. In the original Copic chart, the color are just put one below the other, without any consideration of the other color on the same line.

Styling

I didn’t put a lot of time in this, but I implemented few useful things:

• A JavaScript script look for the hex color and determine if the text over it need to be white or black.
• A CSS style to round corners of colors “I have” (markers I don’t need to buy). This simple trick appears to be very effective. See the screenshot above.

Texture Mapping

One major problem with the Copic color hex values is that they don’t always succeed to represent the “real color”, as you see them on paper. Each pigment can have its own texture on paper, and have his own way to reflect light. If most of the colors have a pretty good hex value representation, some of them are pretty off (YR04, I’m Looking at you).

So I get an idea : using a scan of a pen-based copic color chart to texturize my table.

As I don’t have the full pen set, I looked for home made chart on Deviant Art, and I found a really great chart made by Jad-Ardat: the Complete Copic Color Chart.

The author added post treatment on each colors to make it closer to what he actually saw. The task is quite complicated, due to color perception variations based on the fact that these are emit from a screen, that this screen need to be calibrated to have the right colors etc… The result is not perfect but I have to admit it feels closer to reality than the hex values chart.

First step: splitting the colors in different images. I used PhotoShop and the Slice Tool, and I renamed all the slices to match their underlying color ID.

Second step: creating a PhotoShop action to erase the color ID from the images and make the images loopable, so that we don’t see their borders when they will be repeated as texture on the HTML document.

Third step: batch processing of all the images with this action. The result is a set of image files, named from Copic Color ID, and which can be loopable seamlessly.

To implement these textures on the document, I added a simple JavaScript code snippet. Indeed, I wanted a toggle button to activate/deactivate these textures.

Interactivity Implementation

It was looking cool, but it needed some interactions to make it more interesting.

So, I added a way to switch between hex color and pattern.

I also added a way to change opacity of colors, based on colors I own or colors I don’t. For this, I used jQuery and jQuery UI.

Hexagonal Grid Experimentation

During this project, I made a lot of research about the optimal way to represent a set of colors in 2D.

Things is that colors are usually three dimensional data. Indeed, you often have three parameters, like with Red Green Blue systems (RGB, Hex colors), HSL (Hue Saturation Luminosity), Lab etc…

It is not very convenient to show colors in 3D volume, especially if we need to print the chart. It is far more handy to have 2D charts, each colors fitting the same amount of space, on a same plane.

I realize that this subject was way more complex that it sounds. Entire books are dedicated to them, especially the Color Ordered: A Survey of Color Systems from Antiquity to the Present, which, as its title suggests, reveals that this question is debated since ages. This is also why you have a lot of different palettes in graphic apps, but they don’t usually show all possible colors at the same time: you have to move one sliders (hue, saturation…) to reveal other colors.

I discover that Sandy Allnock proposed a really nice way to overcome this problem with for Copic colors. She created a very nice manually adjusted Hexagonal Color Chart. The results is quite convincing, and we clearly see colors relationship with this method.

Alas, this work is under copyright, and the author tell me than copy the color order itself is forbidden, even if you purchased the product. Also the Sandy doesn’t plan to make a Copic Ciao only chart, or an interactive one. So, even if I needed to keep the results for myself, I decided to play with it a bit.

I reverse engineered the Hexagonal Chart (thanks to Friops and Hengry for the help) and made my own PHP/HTML version. Making an hexagonal CSS grid is surprisingly hard, but it is definitely possible. Maybe for a next time. But because I couldn’t share my work freely, as it is based on copyrighted material, I was discouraged to put so much efforts on this representation and decided to stop the development of its HTML interactive version.

Going Further

The end result of these experiments is still a bit raw to be shared. The styles could be enhanced, the interactivity could be smoother and pushed further, and other colors layout could be propose.

Just like for the Copic website, the colors set could be saved thanks to user accounts (which is possible with WordPress), and I could add a way to bulk add colors (instead of having to click on each of them).

Also, the textures could be created from more accurate scans.

And a filter could be added to filter the different sets. Yes, I still have some ideas. 😛

However, after several days on this, I realized that… maybe I already made enough, I only needed to buy few pens, not to create a full web app, which is a bit overkill. Sure, it was very interesting, but Christmas is coming, I need to focus on more profitable tasks. 😛

Anyway, if someone (even Copic!) is interested by sponsoring the research on this subject… let me know, and I will see what I can release. I may also release it as a premium page. I’ll see, based on your feedbacks!

Cheers !

Credits

• Feature Image: Marqueur Copic grille by fargets on Etsy