Fittest Color:
This Color:

1. When you're ready, initiate the evolutionary process


2. At any time adjust the delay between generations

Slow Medium Fast Fastest

3. At any time you can change which color is the fittest color

The closer the bits that comprise each color in the population are to the bits in this color, the more likely the color will be to survive on to the next generation.

4. Observe how the average fitness changes over time

Colors that match the fittest color exactly will have 24 out of 24 bits in common. Change the fittest color to see how it affects the population's average fitness.

Waiting for evolution to begin...
Keyboard shortcuts: space bar to start/stop; ← → to change the fittest color; ⌘/control + or - to adjust the speed

The Evolution of Color

By Matt Mazur on June 16, 2014

This Emergent Mind project uses genetic algorithms to evolve a population of colors where you, the user, can select which color represents the fittest color and observe how it affects the population over time.

How it Works

A standard Red Green Blue (RGB) color is made up of exactly three bytes (24 bits).

For example, here is red:

Hex FF 00 00
Decimal 255 0 0
Binary 11111111 00000000 00000000

And here is yellow:

Hex FF FF 00
Decimal 255 255 0
Binary 11111111 11111111 00000000

When you load this page, the population consists of random colors:

The fittest color is set to red by default, but you can change it at any time. The closer a color’s bits are to the fittest color's bits, the more likely it is to survive to the next generation.

You can hover over a color to see the bits that comprise it, the bits of the fittest color, and how many of the color's bits match the fittest color's bits (its fitness):

After you start the evolutionary process, the colors will use a genetic algorithm to evolve and trend towards the fittest color. The reason the colors never completely match the fittest color is because each color is always subject to mutation and crossover in each new generation (see below).

You can monitor the average fitness of the population to see how it trends over the course of many generations:

If you change the fittest color during the evolutionary process, you can see how it drastically affects the average fitness, especially if you swap all of the bits (such as changing the fittest color from black to white):

In the real world this would be like raising the average global temperature by ten degrees over a short period of evolutionary time. Organisms that have evolved to survive in the cooler climate would find themselves in an environment that they are not as well suited for. Over time, the organisms that survive would be more likely to reproduce and pass on their genes, raising the average fitness of the population.

A Quick Intro to Genetic Algorithms

The colors in this experiment evolve using a simple genetic algorithm outlined by Melanie Mitchell in her excellent book, An Introduction to Genetic Algorithms.

Quoting the book:

1. Start with a randomly generated population of n l-bit chromosomes (candidate solutions to a problem).

Each color in the population is randomly assigned 24 bits (its chromosome) that determine its color.

2. Calculate the fitness f(x) of each chromosome x in the population.

The fitness is calculated by counting how many bits in the color’s chromosome are equal to the corresponding bits in the fittest color’s chromosome.

3. Repeat the following steps until n offspring have been created:

a. Select a pair of parent chromosomes from the current population, the probability of selection being an increasing function of fitness. Selection is done “with replacement,” meaning that the same chromosome can be selected more than once to become a parent.

A color is chosen from the population using fitness-proportionate selection using roulette wheel sampling which is conceptually equivalent to giving each individual a slice of a circular roulette wheel equal in area to the individual’s fitness. The roulette wheel is spun, the ball comes to rest on one wedge-shaped slice, and the corresponding individual is selected.

b. With probability Pc (the “crossover probability” or “crossover rate”), cross over the pair at a randomly chosen point (chosen with uniform probability) to form two offspring. If no crossover takes place, form two offspring that are exact copies of their respective parents.

In this experiment, the crossover probability is set to 0.7.

c. Mutate the two offspring at each locus with probability Pm (the mutation probability or mutation rate), and place the resulting chromosomes in the new population.

The mutation rate for each chromosome is 0.001 (1 in 1,000).

4. Replace the current population with the new population.

Each time the population is replaced with a new one, a new generation of colors is displayed in your browser.

5. Go to step 2.

This process is repeated indefinitely until you stop the simulation.

If you'd like to learn more about the implementation, you can view the source on this page and explore the JavaScript used in this project.

As always, if you have any questions or feedback please do not hesitate to shoot me an email: