AI Foreground Color Selector

I’ve been wanting to use PHP-ML to solve a useful problem for a while, but was having trouble thinking of a case I might want to try first. Then it dawned on me that a Multi Layer Perceptron network should be reasonably good at picking text foreground colors, and I could quickly create training data for it.

So I did it, because I can. I opted to simply use black and white for this initial stab at the idea, but given enough training data, it should work with any set of arbitrary foreground colors.

Training Data

First step was producing the training data. This was simple enough, I’d just use a one-line-per-record format where and create it with a simple JavaScript interface. Ideally, we’d probably run through the full set of named CSS colors and maybe a few extra for outliers. However, I wanted to be done with my test as quickly as possible, so it simply produced random colors and had me pick black or white as the ideal foreground text color.

Ultimately, we had data that looked like this:

[240,240,240,"black"]
[76,2,27,"white"]
[251,104,78,"white"]
[150,84,57,"white"]
[30,139,210,"white"]
[102,187,215,"black"]
[118,238,238,"black"]
[179,74,114,"white"]
[94,141,37,"white"]
[190,89,151,"white"]
[118,70,194,"white"]

Training the machine learning algorithm

So, now we have our data, but there’s a bit of a problem. The sRGB color space model is not particularly representative of how humans perceive color. Enter CIELab. So the next step in preparing the data for training was to convert from sRGB to CIELab and then normalize those values for use as inputs for our samples. Instead of writing that myself, I used the ColorJizz-PHP library.

use MischiefCollective\ColorJizz\Formats\RGB;
function rgb_to_neuron_input($r, $g, $b) {
  $color = new RGB($r, $g, $b);
  $lab = $color->toCIELab();
  //Normalize to 0-1 for each component.
  return [
    $lab->lightness / 100,
    ($lab->a_dimension + 128) / 256,
    ($lab->b_dimension + 128) / 256
  ];
}

I didn’t do much configuration of the MLP network. I only added a few hidden layers and a handful of nodes. That was enough to make the training process slow. Taking about 45 seconds to train against 140 samples.

Results:

The results actually weren’t terrible. I went back and added a few more training samples for some cases where it was really wrong, but overall it made sane selections.

As an added bonus, the MultiLayerPerceptron class is serializable. So I could upload PHP-ML’s trained models to just about any shared hosting provider and make use of them for generating predictions.

Here are some of the results: