Merging Reversed Hex Color Codes by Flo

Merging Reversed Hex Color Codes by Flo

Merging Reversed Hex Code Colors
Start with one hex code color. Make a chart of 5 across and 4 down, ending up with the hex code color that is the reverse.

Starting Codes	Ending Codes
f33333 - Red	3fffff - Cyan
33f333 - Green	ff3fff - Magenta
f3f333 - Yellow	3f3fff - Blue
3333f3 - Blue	ffff3f - Yellow

RED to CYAN

<table border="0" cellspacing="0" cellpadding="0"><tr>
<td height="30" width="80" bgcolor="#f33333"></td>
<td width="80" bgcolor="#c33333"></td>
<td width="80" bgcolor="#933333"></td>
<td width="80" bgcolor="#633333"></td>
<td width="80" bgcolor="#333333"></td></tr>

<tr><td height="30" width="80" bgcolor="#f66666"></td>
<td width="80" bgcolor="#c66666"></td>
<td width="80" bgcolor="#966666"></td>
<td width="80" bgcolor="#666666"></td>
<td width="80" bgcolor="#366666"></td></tr>

<tr><td height="30" width="80" bgcolor="#f99999"></td>
<td width="80" bgcolor="#c99999"></td>
<td width="80" bgcolor="#999999"></td>
<td width="80" bgcolor="#699999"></td>
<td width="80" bgcolor="#399999"></td></tr>

<tr><td height="30" width="80" bgcolor="#fccccc"></td>
<td width="80" bgcolor="#cccccc"></td>
<td width="80" bgcolor="#9ccccc"></td>
<td width="80" bgcolor="#6ccccc"></td>
<td width="80" bgcolor="#3ccccc"></td></tr>

<tr><td height="30" width="80" bgcolor="#ffffff"></td>
<td width="80" bgcolor="#cfffff"></td>
<td width="80" bgcolor="#9fffff"></td>
<td width="80" bgcolor="#6fffff"></td>
<td width="80" bgcolor="#3fffff"></td></tr></table>

GREEN to MAGENTA

<table border="0" cellspacing="0" cellpadding="0"><tr>
<td height="30" width="80" bgcolor="#33f333"></td>
<td width="80" bgcolor="#33c333"></td>
<td width="80" bgcolor="#339333"></td>
<td width="80" bgcolor="#336333"></td>
<td width="80" bgcolor="#333333"></td></tr>

<td height="30" width="80" bgcolor="#66f666"></td>
<td width="80" bgcolor="#66c666"></td>
<td width="80" bgcolor="#669666"></td>
<td width="80" bgcolor="#666666"></td>
<td width="80" bgcolor="#663666"></td></tr>

<td height="30" width="80" bgcolor="#99f999"></td>
<td width="80" bgcolor="#99c999"></td>
<td width="80" bgcolor="#999999"></td>
<td width="80" bgcolor="#996999"></td>
<td width="80" bgcolor="#993999"></td></tr>

<td height="30" width="80" bgcolor="#ccfccc"></td>
<td width="80" bgcolor="#cccccc"></td>
<td width="80" bgcolor="#cc9ccc"></td>
<td width="80" bgcolor="#cc6ccc"></td>
<td width="80" bgcolor="#cc3ccc"></td></tr>

<td height="30" width="80" bgcolor="#ffffff"></td>
<td width="80" bgcolor="#ffcfff"></td>
<td width="80" bgcolor="#ff9fff"></td>
<td width="80" bgcolor="#ff6fff"></td>
<td width="80" bgcolor="#ff3fff"></td></tr></table>

YELLOW to BLUE

<table border="0" cellspacing="0" cellpadding="0"><tr>
<td height="30" width="80" bgcolor="#f3f333"></td>
<td width="80" bgcolor="#c3c333"></td>
<td width="80" bgcolor="#939333"></td>
<td width="80" bgcolor="#636333"></td>
<td width="80" bgcolor="#333333"></td></tr>

<tr><td height="30" width="80" bgcolor="#f6f666"></td>
<td width="80" bgcolor="#c6c666"></td>
<td width="80" bgcolor="#969666"></td>
<td width="80" bgcolor="#666666"></td>
<td width="80" bgcolor="#363666"></td></tr>

<tr><td height="30" width="80" bgcolor="#f9f999"></td>
<td width="80" bgcolor="#c9c999"></td>
<td width="80" bgcolor="#999999"></td>
<td width="80" bgcolor="#696999"></td>
<td width="80" bgcolor="#393999"></td></tr>

<tr><td height="30" width="80" bgcolor="#fcfccc"></td>
<td width="80" bgcolor="#cccccc"></td>
<td width="80" bgcolor="#9c9ccc"></td>
<td width="80" bgcolor="#6c6ccc"></td>
<td width="80" bgcolor="#3c3ccc"></td></tr>

<tr><td height="30" width="80" bgcolor="#ffffff"></td>
<td width="80" bgcolor="#cfcfff"></td>
<td width="80" bgcolor="#9f9fff"></td>
<td width="80" bgcolor="#6f6fff"></td>
<td width="80" bgcolor="#3f3fff"></td></tr></table>

BLUE to YELLOW

<table border="0" cellspacing="0" cellpadding="0"><tr>
<td height="30" width="80" bgcolor="#3333f3"></td>
<td width="80" bgcolor="#3333c3"></td>
<td width="80" bgcolor="#333393"></td>
<td width="80" bgcolor="#333363"></td>
<td width="80" bgcolor="#333333"></td></tr>

<td height="30" width="80" bgcolor="#6666f6"></td>
<td width="80" bgcolor="#6666c6"></td>
<td width="80" bgcolor="#666696"></td>
<td width="80" bgcolor="#666666"></td>
<td width="80" bgcolor="#666636"></td></tr>

<td height="30" width="80" bgcolor="#9999f9"></td>
<td width="80" bgcolor="#9999c9"></td>
<td width="80" bgcolor="#999999"></td>
<td width="80" bgcolor="#999969"></td>
<td width="80" bgcolor="#999939"></td></tr>

<td height="30" width="80" bgcolor="#ccccfc"></td>
<td width="80" bgcolor="#cccccc"></td>
<td width="80" bgcolor="#cccc9c"></td>
<td width="80" bgcolor="#cccc6c"></td>
<td width="80" bgcolor="#cccc3c"></td></tr>

<td height="30" width="80" bgcolor="#ffffff"></td>
<td width="80" bgcolor="#ffffcf"></td>
<td width="80" bgcolor="#ffff9f"></td>
<td width="80" bgcolor="#ffff6f"></td>
<td width="80" bgcolor="#ffff3f"></td></tr></table>

THE BLUES		THE YELLOWS

3f3fff	3333f3	f3f333	ffff3f

Try choosing one hex code color and then play with it in a table such as the above and see what interesting effects you get when you reverse the order of the numbers and letters.

Here are two great color isolator tools from

Tandem Tooters and U-L-T-R-A.

Enter the url of an image there, click on the color you want, and these tools will give you the hex codes for: that color, its inverse or opposite color, and its reverse color, plus the RGB number code.

Tandem Tooters ~ ~ ~ Color Playground ~ ~ ~ Tone By Tone Dot Net
© Copyright 2008