Color sorting is an interesting problem

color palette for #336699

I love exploring colors, color theory, and color spaces. I have made several color sorting and selecting tools, including a color palettes page.

One of the challenges I encountered is that I want to show a color palette derived from a base color. Since every proper color palette should be sorted by hue, and I am not hand-picking these colors, I need to sort the resultant color set programmatically. The problem is that my current hue-sorting function doesn’t sort related colors the way I expect. You can see the sorting on this page. Notice how there’s a nice long line of perfectly-sorted greens, and then the one oddball green at the end? What’s up with Lime anyway?

I know where I went wrong. I copied the color-sorting code from elsewhere on the internet. The code, which can be seen here, does a two-fold sorting process. First it clusters colors together in a first pass, and then sorts them again on a second pass, by determining the distance between colors.

There are always outliers. The outliers are colors that are not close to anything else in my dataset, so they don’t get sorted with the rest. I haven’t figured out how to address these outliers in a visually pleasing way. The code is also so baroque that I have a hard time getting into it the weeds of it.

I have written my own color-distance functions which do simple arithmetic on the original R, G, and B values. This code can be seen here. The function limits the R, G, B values to a short numerical range. It works–it produced the palette shown above–but I am not sure if it can be scaled to a generic color-sorting function. It feels a bit hokey.

I also found this which seems to do the job, but it uses jQuery. I could rewrite it in vanilla JavaScript if I find that it gets the job done.

One of my goals is to have a perfectly fast, library-free page that puts together visually pleasing sets of color on the fly. I think it’s possible.

Let me know your thoughts on color sorting, colors, or code.

Color sliders and more fun with JavaScript

More fun with JavaScript! I made a color sliders page by connecting my revised color thesaurus to a new improved interactive hex to rgb converter. You can still see all the details of the colors, such as names, hue, saturation, brightness, red green blue values, hexadecimal code, and little stories about the colors, but the interface is all new and the code is cleaner. I removed jQuery from the JavaScript to speed up page performance, added custom sliders rather than an off-the-shelf color picker, and improved the data/definitions. I still need to test it on Internet Explorer. I may retire the original color picker once I do that.


hex and rgb color sliders

Projects lost in time

A friend of mine tweeted about how he was first introduced to the web years ago by some illustrated dream pages I published. His thread of tweets, in his second language, is heartwarming. It makes me nostalgic for the early web, before social media turned huge chunks of the internet into a walled garden.

I should find those pages and publish them again. Last I saw them they were on a domain I long ago retired. I keep everything digital I’ve ever made, so I have them somewhere. If I find them I’ll put them on this blog. They were illustrated with ink and line drawings.

In the same vein, I have spent some time updating my website with paintings that I no longer own. Here’s a thickly sculpted painting I like a lot, despite not having the physical version anymore. I used tons of acrylic media, which dried up and left deep furrows in the surface. I recall using a ton of alizarin crimson and GAC (Golden Artist Colors) media:
dark red and yellow abstract painting

Did I sell this painting? Give it away? Throw it away? Unlikely, but possible. I’m guessing I gave it away. I should keep better records of physical objects. I have moved addresses many times and often give things away when that happens. I kept all the small paintings (5×5 and 8×8 inches) and a few medium paintings (10×10 inches) because they are easier to ship and store.

What about you? Do you have any projects lost in time that you’d like to recover? What are your experiences of the early web? What was the first web page you remember seeing?

Color names for writers

I have made a collection of named colors gleaned from HTML color names, Pantone swatches, stones, jewels, flowers, foods, minerals, pigments, and paints. Some of them I made up out of whole cloth. Each color is presented as its hexadecimal code. Use some in your fiction! Sample color names:

  • Gamboge
  • Despair
  • Malachite
  • Flesh of the peach
  • Skin of the peach
  • Wine
  • Mahogany

You can use the complete interactive version here.

Download the whole shebang as a PNG file. Please share it! Below is a cropped bit from the reds section.

excerpt of color names for writers

Werner’s Nomenclature of Colours (1814)

I found this fascinating text on The Public Domain Review, which is a treasure trove of copyright-free works, both images and texts. Extending Werner’s system, this is Patric Syme’s classic taxonomic guide to the colors of the natural world.

Patrick Syme, Werner’s nomenclature of colours; Edinburgh: William Blackwood, 1821.

WHITES.

1. Snow White, is the characteristic colour of the whites ; it is the purest white colour ; being free of all intermixture, it resembles new-fallen snow.

2. Reddish White, is composed of snow white, with a very minute portion of crimson red and ash grey.

3. Purplish White, is snow white, with the slightest tinge of crimson red and Berlin blue, and a very minute portion of ash grey.

4. Yellowish White, is composed of snow white, with a very little lemon yellow and ash grey.

5. Orange-coloured White, is snow white, with a -very* small portion of tile red and king’s yellow, and a minute portion of ash grey.

6. Greenish White, is snow white, mixed with a very little emerald green and
ash grey.

7. Skimmed-milk White, is snow white, mixed with a little Berlin blue and
ash grey.

8. Greyish White, is snow white, mixed with a little ash grey.

colors

Language generators

I am in the middle of novel revisions, so naturally I am updating my language generators. I get kind of obsessed with them.

Random language generator
I wrote this page to generate random sentences using JavaScript and JSON libraries. It retrieves JSON data words using an AJAX call and then generates language using pre-defined rules.

Lorem ipsem language generator
This demo generates lorem ipsem text up to as many paragraphs as you specify. Use it for your web design projects. It is created using Markov chains applied to a very long sample of pre-existing lorem ipsem.

Markov chain language generator
In a Markov chain model, the probability of each item (in this case a word) is based on the state of the previous item. A Markov chain language generator can generate real-sounding text given a source document by predicting which word will follow next after each word. Sample documents here include Alice in Wonderland, Ulysses, my very own vampire novel, the King James Bible, a Latin Bible, a few other texts, and user input where you can enter your own text.