Hello friends, I’m your “Web Colors“ girl!

Are your colors:

Tired

Rundown?

Listless?

Do they poop out at parties?

Are they unpopular?

The answer to all your problems is in this little bottle of Web Colors!

Web Colors contains all the Red, Green and Blue channels your colors need to spoon their way to bright vivaciousness!

So, why don’t you join the thousands of happy, peppy people, and enjoy a glass of Vitameatavegamin… er.. I mean Web Colors!

And who knows… with a little practice you will likely come to prefer the flavor over regular RGB notation because it’s shorter and as Lucy once said, It’s just like candy!

It’s so tasty, too! While being only 23% Alcohol by Volume, so no less capable! 😉


 

Web Colors

Little Ricky… I mean Professor Xavier is at Grandma’s today so let’s continue our exploration of color by looking at web color hex notation. 😛

It is very common for programs to express RGB colors using decimal notation (i.e 0 – 255) as well as hex notation, sometimes called “Web Colors”.

Hex color code notation is called “Web Colors” because it is used to express colors in HTML and CSS (though RGB/RGBA notation is possible).

Web Colors use “Hex Triplet Notation” to encode the three sets of 0-255 RGB channel values as a single value of with a constant length of 6 characters (or 3, more on that shortly) regardless if all values are set from 0 to 255.

“Hex” (short for Hexadecimal) is a “base-16” numeral system with a “Radix” between 0 – F.

In Decimal (base-10), what you normally use, has a radix between 0 – 9 which means that the hex radix expressed in decimal is between 0 – 15.

Radix
Hex Decimal
Digits 0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
A 10
B 11
C 12
D 13
E 14
F 15
10 16

As in decimal, once all single digit options have been exhausted the values start over and another digit is added, which explains why the value after F in hex is “10” (16 in decimal).

 

In practice Hex Triplet notation looks like this:

#D3046F

 

The hash mark before the value indicates that what follows is hex notation and is similar in function to 0x but is shorter.

It also explicitly states we want to split the hex values into 3, 2 digit chunk groups.

Technically there is also a short 3 digit version when both values on each channel are the same so for example Yellow RGB(255, 255, 0) is written #FFFF00 as a Web Color can be shortened to  #FF0, but it’s not important. 😛

So to be clear 0x is a hex value and # is a Web Color comprised of hex values.

Notice that there are still three values which represent the RGB color channels, however because they will always be 2 digits in length using hex 6 digits total (or 3 in the case of the short version) we now have a convenient way to simplify 3 decimal numbers (up to 9 numbers total in length) into just six characters in a string that we can basically just treat as one value.

Here are the color channels for the lovely pink/magenta-esque color above split or “isolated” from one another:

Red: 0xD3

#D30000
  • Notice that there is a lot of red so the red channel shows a vibrant red.

 

Green: 0x04

#000400
  • Notice that there is almost no Green so the green channel appears black.

 

Blue: 0x6F

#00006F
  • Notice that there is some blue so the blue channel shows up a darker blue.

 

How To Convert a Web Color to RGB

The RGB minimum and maximum values are a result of their representation as 8 bit binary numbers.

8 Bit RGB Decimal to Binary Range:

0 = 0000000

128 = 10000000

255 = 11111111

This means that Web Color hex notation must also be compatible with the binary and decimal encodings.

Which brings us to to the idea of Endianness.

What is Endianness?

Consider the difference between 12 & 21 in relation to the statement “Must be this old to purchase!”. 😛

What about 152 & 251?

Say you offer to pay me and Ethel $251 for speed wrapping candy along a conveyor line and then hand us $152 for our efforts.

I guarantee you we’re going to be more than a little miffed and you better believe Fred & Ricky  are going to hear about it!

Basically, the idea is concerned with “where is the Most Signifigant Bit” in a value.

Generally we tend to think of the left most digit being the “most significant bit” meaning that it’s the “largest”.

This is known as “Big-endian“.

Much like how we can think of 251 as 200 + 50 + 1

251 = (2 × 10²) + (5 × 10¹) + (1 × 10⁰)

<?php
echo ((2 * pow(10, 2)) + (5 * pow(10, 1)) + (1 * pow(10, 0)));

// Result: 251

We can think of hex the same way! 240 + 11

0xFB = (15 × 16¹) + (11 × 16⁰) = 251

<?php
echo (15 * pow(16, 1)) + (11 * pow(16, 0));

// Result: 251

 

Easy? You bet!

Especially considering PHP has a built in language function to do this: HexDec()

 

Lets convert our pink color from above to RGB:

R: 0xD3 = (13 × 16¹) + (3 × 16⁰) = 211

G: 0x04 = (0 × 16¹) + (4 × 16⁰) = 4

B: 0x6F = (6 × 16¹) + (15 × 16⁰) = 111

#D3046F = RGB(211, 4, 111)

Here’s some code you can use to convert web colors to an array containing the RGB values:

Note that this is not the most efficient way to do this (wasn’t my goal) though it should be fairly easy to understand!

Also, note that as written it doesn’t work with 3 digit short notation and I will leave that for you to add on your own.

<?php
function WebColorToRGBA($color){
	$color = ltrim($color, '#'); // remove hash if there is one
	
	// Split Triplet 
	$red = substr($color, 0, 2);
	$green = substr($color, 2, 2);
	$blue = substr($color, 4, 2);
	
	// Convert webcolor hex to RGB dec
	$red = hexdec($red);
	$green = hexdec($green);
	$blue = hexdec($blue);
	
	// is this RGB = 6 or RGBA = 8?
	if(strlen($color) == 8){
	    $alpha = substr($color, 6, 2); // get alpha 
		$alpha = hexdec($alpha); // Convert to RGB
		
		// return RGBA
	    return array('red'=>$red, 'green'=>$green, 'blue'=>$blue, 'alpha'=>$alpha);
	}
	// return RGB
	return array('red'=>$red, 'green'=>$green, 'blue'=>$blue);
}
// Examples
// Note the # is optional
$white = WebColorToRGBA('#FFFFFF');
$black = WebColorToRGBA('#000000');
$red = WebColorToRGBA('#FF0000');
$green = WebColorToRGBA('#00FF00');
$blue = WebColorToRGBA('#0000FF');
$yellow = WebColorToRGBA('#FFFF00');
$cyan = WebColorToRGBA('#00FFFF');
$magenta = WebColorToRGBA('#FF00FF');
$RGBcolors = array('white'=>$white, 'black'=>$black, 'red'=>$red, 'green'=>$green, 'blue'=>$blue,
 'yellow'=>$yellow, 'cyan'=>$cyan, 'magenta'=>$magenta);
var_dump($RGBcolors);

 

Results

The code converts a handful of hex notion web colors into arrays of their color channels and then puts them in an associative array then lists each color and it’s RGB/RGBA channels as integer values.

array(8) {
  ["white"]=>
  array(3) {
    ["red"]=>
    int(255)
    ["green"]=>
    int(255)
    ["blue"]=>
    int(255)
  }
  ["black"]=>
  array(3) {
    ["red"]=>
    int(0)
    ["green"]=>
    int(0)
    ["blue"]=>
    int(0)
  }
  ["red"]=>
  array(3) {
    ["red"]=>
    int(255)
    ["green"]=>
    int(0)
    ["blue"]=>
    int(0)
  }
  ["green"]=>
  array(3) {
    ["red"]=>
    int(0)
    ["green"]=>
    int(255)
    ["blue"]=>
    int(0)
  }
  ["blue"]=>
  array(3) {
    ["red"]=>
    int(0)
    ["green"]=>
    int(0)
    ["blue"]=>
    int(255)
  }
  ["yellow"]=>
  array(3) {
    ["red"]=>
    int(255)
    ["green"]=>
    int(255)
    ["blue"]=>
    int(0)
  }
  ["cyan"]=>
  array(3) {
    ["red"]=>
    int(0)
    ["green"]=>
    int(255)
    ["blue"]=>
    int(255)
  }
  ["magenta"]=>
  array(3) {
    ["red"]=>
    int(255)
    ["green"]=>
    int(0)
    ["blue"]=>
    int(255)
  }
}

 


If you love the refreshing tasty flavor sensations of Web Colors as much as I do then please support me over on Patreon for as little as $1 a month.

It will go towards improving my content and help me get access to better tools, systems and equipment… come to think of it, this blog could also use a new coat of paint! 😛

But, if all you can do is like, share, comment and subscribe… well, that’s cool too! 😉

Much Love,

~Joy