Color difference algorithm

I will probably write some posts and tutorials about this topic, becaue color differences are very useful when designing a color scheme or some elements to be placed on a given background color.

And for a wide range of applications working with color spaces.

Anyway, at the moment just know Wikipedia says there is a International Commission on Illumination (CIE) who calls distance between colors dE.

Obviously the meaning is removing subjectivity… I can see two colors “almost identical” while you can see the same ones “slighty different”.

In theory, a dE of under 1.0 is supposed to be indistinguishable unless the samples are adjacent to one another

To make things a little bit harder, there are different ways to calculate color difference… three formulas the CIE refined during the years… CIE76, CIE94 and CIEDE2000.

If you want to study in depth color difference, or even small color differences may be critical for your work, then the CIEDE2000 is the most advanced way to determine color difference, and the one with the most complex formula.

Complex formulas aren’t what I am looking for because I have in mind something a little bit complicated than just measuring color difference, and the CIE76 is maybe too basic, so at the moment I am testing the CIE94 formula.

Before examining the formula, let me introduce you some ways to define colors.

If you are used to web design, you’ll probably know the RGB color model. The name of the model comes from the initials of the three additive primary colors, Red, Green, and Blue, that are added to reproduce all colors.

But RGB is not the only way you can code colors.

Color models

Here it is a brief list of color models… some of them are useful, some others not that useful, anyway let’s see them…

RGB: The most famous color encoding, as explained before

CMY: The complement of RGB, named after Cyan, Magenta and Yellow.

CMYK: Same as CMY with the added K parameter which is blacK. It is the system used by printers.

HSV or HSB: A system which represents color as Hue, Saturation and Value. Hue is what is seen as the color. Saturation is how “pure” is the color. 0% is grey and 100% is a pure color. Value represents the Brightness.

HSL: Just like HSV but instead of Value we have lightness. This time, maximum saturation is at the mid-point (50%). 0% is black and 100% is white.

XYZ: This is also called “norm color system” and it’s a superset of RGB. It uses tristimulus values when encoding. X, Y and Z are all calculated through color-matching functions and are always positive.

The human eye has receptors (called cone cells) for short (S), middle (M), and long (L) wavelengths. Thus in principle, three parameters describe a color sensation. The tristimulus values of a color are the amounts of three primary colors in a three-component additive color model needed to match that test color.

Yxy: Known as the Trichromatic coordinates. Y represents the brightness and (x,y) hue and saturation.

CIE Lab: This color scale is based on the opponent color theory. L represents light-dark, a represents red-green and b represents yellow-blue.

There are some more systems, anyway, at the moment we are interested in Lab color space that unlike the RGB and CMYK color models, is designed to approximate human vision.

Since we are used to RGB (and eventually to CYMK if you work in print), we need to convert these formats into Lab color space, and in order to do it we must first convert them in XYZ color space, and then convert them again to Lab values.

RGB -> XYZ conversion

On the Standard Default Color Space for the Internet page on the “Colorimetric definitions and digital encodings” chapter you will find the matrix used for color conversion and the previous adjustments to do.

So, having a RGB value with red, green and blue values as base 10 integers from 0 to 255, you can convert RGB to XYZ this way:

0.04045){
     $_red = ($_red+0.055)/1.055;
     $_red = pow($_red,2.4);
}
else{
     $_red = $_red/12.92;
}
if($_green>0.04045){
     $_green = ($_green+0.055)/1.055;
     $_green = pow($_green,2.4);     
}
else{
     $_green = $_green/12.92;
}
if($_blue>0.04045){
     $_blue = ($_blue+0.055)/1.055;
     $_blue = pow($_blue,2.4);     
}
else{
     $_blue = $_blue/12.92;
}

$_red *= 100;
$_green *= 100;
$_blue *= 100;

// applying the matrix
$x = $_red * 0.4124 + $_green * 0.3576 + $_blue * 0.1805;
$y = $_red * 0.2126 + $_green * 0.7152 + $_blue * 0.0722;
$z = $_red * 0.0193 + $_green * 0.1192 + $_blue * 0.9505;

// displaying the values
echo "$x $y $z";

?>

Now, next step:

XYZ -> Lab conversion

In order to convert XYZ to Lab, first we must set the white point, that is a set of tristimulus values or chromaticity coordinates that serve to define the color “white” in image capture, encoding, or reproduction.

Then, following the formula found on this page, we can solve the problem this way:

0.008856){
     $_x = pow($_x,1/3);
}
else{
     $_x = 7.787*$_x + 16/116;
}
if($_y>0.008856){
     $_y = pow($_y,1/3);
}
else{
     $_y = (7.787*$_y) + (16/116);
     echo $_y."
"; } if($_z>0.008856){ $_z = pow($_z,1/3); } else{ $_z = 7.787*$_z + 16/116; } $l= 116*$_y -16; $a= 500*($_x-$_y); $b= 200*($_y-$_z); // displaying the values echo "$l $a $b"; ?>

And in the end, the orginal RGB 39,176,165 is converted in Lab 65.12, -37.39, -4.54 that is very close to Photoshop CS4 Lab 65,-38,-5 that probably uses a different white point.

Next time we’ll see something interesting to do with these formulas.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers