normalforms.us--Conversion of Numerical Color Codes to Hex Color Codes

Color Stuff

Enhancing your HTML pages to incorporate colored backgrounds, text, table cells, divs, links, etc., can make a huge difference in your web site's appearance and appeal. A user is more likely to stick around on a site if they are visually pleased by the format the developer used. Of course, if you use colors poorly, users will evacuate quicker than if you had stayed with the default colors used by your browser. So, choose your colors wisely. Soft, muted colors look a far sight better than brash, bold colors. I am constantly being repulsed away from sites using chartreuse, orange and bright yellow as their primary colors. Gross and definitely hard on the eyes!

Colors that you can use are either based on hexidecimal, or HEX, codes, or by name for the hundred and forty or so colors that have names. The list of names are further down on this page.

All of the color codes used by HTML 3.0 specification and beyond are six digits, though in some instances you can use a three digit code. In the six-digit code, each group of two represents a primary color. The first two digits represent RED, the middle two represent GREEN, and the last two represent BLUE.

In order to get the color red, the HEX code would be ff0000. The first two digits represented by "ff" means that red is fully saturated, while both GREEN and BLUE, which is set as "00", denotes no addition of these two color elements. It is kind of like adding color to a can of white paint. In order to get a particular color, you will have to add a certain number of parts of one of these three primary colors.

All grey colors from black to white will have each set of three primary colors equally balanced, such as 444444, or b5b5b5, which both represent certain shades of perfect grey. When you move any of the three elements away from the other two elements you start tinting your grey to be off-grey. Not to difficult a concept to understand.

The chart below shows the hexidecimal equivalents to color terms that you might see associated with an image you are working on in most graphics programs.

I have set each available value with a shade of grey that will help you determine the darkness of each gradient. Blacks are the lowest numbers with whites being the highest numbers. The red letters in the middle of the chart denote what would be middle grey.

Conversion of Numerical Color Codes to Hex Color Codes

	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
0	000	001	002	003	004	005	006	007	008	009	010	011	012	013	014	015	0
1	016	017	018	019	020	021	022	023	024	025	026	027	028	029	030	031	1
2	032	033	034	035	036	037	038	039	040	041	042	043	044	045	046	047	2
3	048	049	050	051	052	053	054	055	056	057	058	059	060	061	062	063	3
4	064	065	066	067	068	069	070	071	072	073	074	075	076	077	078	079	4
5	080	081	082	083	084	085	086	087	088	089	090	091	092	093	094	095	5
6	096	097	098	099	100	101	102	103	104	105	106	107	108	109	110	111	6
7	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	7
8	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143	8
9	144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159	9
A	160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175	A
B	176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191	B
C	192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207	C
D	208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223	D
E	224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239	E
F	240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255	F
	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

The table above is used as follows: a typical color code might be "052 179 084." To translate this to hexidecimal, take the first of the three sets, "052", and find 052 on the table. The column to the left or right is used as the first Hex character and the top or bottom row is used for the second Hex character--34 is your answer. The 179 translates in the same manner as b3. The third as 54. You have a hex value for the color you want as 34b354, or #34b354.

Have you ever wondered how many colors are available using this system? Multiply 256 by 256 and then by 256 again. You will come up with a value of 16,777,216. This is the number of colors that can be rendered this way.

It seems that it is much easier to find the numerical code for the colors in most graphics software today, so this chart should be helpful. JASC uses numerical codes in Paint Shop Pro to identify colors within an image. So does Photoshop from Adobe. My familiarity with other graphics programs is limited but I suspect they all use the same principles.

Color Sliders

I have added three sliders below so that you can experiment with the 16,777,216 RGB colors that are available for use on the web. Each slider will move through the 256 tints that are available in each of the three color groups--red, green and blue. By sliding each slider from 0 through 255 (which corresponds with the table above) the color will change in the box to the right of the sliders. Do note that if you want muted colors as I noted above for the best web appearance, keep the three sliders at a fairly close spread.

Starting from the left in this area there is a button that toggles from LOCK SHADE to UNLOCK SHADE. What this button will do is lock all three sliders together so that they move in unison on their travels to either 0 or to 255, arriving at the destination at the same time from whatever position your sliders start at. This does tend to keep your color shade consistent even though it is growing darker or lighter as the sliders move from left to right.

There are two figures to the right of each slider. The first is a number from 000 through 255. This number is relative to the 256 color tints available for the red, green and blue elements in the color spectrum. The second figure is the hexidecimal equivalent to the first figure.

Above the color box where the hexidecimal color will be shown with the hexidecimal code within, is a small box that will be used by this tool to set the sliders to a particular hexidecimal color value that was set there when the LOCK SHADE was activated.

LOCK
SHADE

000

Reset Hex:

🎨

#000000

Description	Hex Color	Red	Green	Blue
red	FF0000	255	000	000
lime	00FF00	000	255	000
blue	0000FF	000	000	255
white	FFFFFF	255	255	255
black	000000	000	000	000
mediumvioletred	C71585	199	021	133
deepskyblue	00BFFF	000	191	255
green	008000	000	050	000
deeppink	FF1493	255	020	147
darkorange	FF8C00	255	140	000
cornflowerblue	6495ED	100	149	237
khaki	F0E68C	240	230	140
darkslategray	2F4F4F	047	079	079
teal	008080	000	128	128
palegreen	98FB98	152	251	152
pink	FFC0CB	255	192	203
darkmagenta	8B008B	139	000	139
slategray	708090	112	128	144
violet	EE82EE	238	130	238
peru	CD853F	205	133	063
purple	800080	128	000	128
aqua	00FFFF	000	255	255
burlywood	DEB887	222	184	135
aliceblue	F0F8FF	240	248	255
lemonchiffon	FFFACD	255	250	205
indigo	4B0082	075	000	130
crimson	DC143C	220	020	060
magenta	FF00FF	255	000	255
chocolate	D2691E	210	105	030
forestgreen	228B22	034	139	034
hotpink	FF69B4	255	105	180
lightpink	FFB6C1	255	182	193
darkgray	A9A9A9	169	169	169
lightgoldenrodyellow	FAFAD2	250	250	210
firebrick	B22222	178	034	034
lavenderblush	FFF0F5	230	230	250
lightcoral	F08080	240	128	128
mediumspringgreen	00FA9A	000	250	154
thistle	D8BFD8	216	191	216
sienna	A0522D	160	082	045
palegoldenrod	EEE8AA	238	232	170
mediumpurple	9370D8	147	112	216
royalblue	4169E1	065	105	225
orange	FFA500	255	165	000
tan	D2B48C	210	180	140
plum	DDA0DD	221	160	221
olive	808000	128	128	000
orchid	DA70D6	218	112	214
yellowgreen	9ACD32	154	205	050
seashell	FFF5EE	255	245	238
fuchsia	FF00FF	255	000	255
navajowhite	FFDEAD	255	222	173
palevioletred	D87093	216	112	147
silver	C0C0C0	192	192	192
rosybrown	BC8F8F	188	143	143
cadetblue	5F9EA0	095	158	160
mediumorchid	BA55D3	186	085	211
darkviolet	9400D3	148	000	211
darkorchid	9932CC	153	050	204
blueviolet	8A2BE2	138	043	226
mediumslateblue	7B68EE	123	104	238
ghostwhite	F8F8FF	248	248	255
lavender	E6E6FA	230	230	250
mediumblue	0000CD	000	000	205
darkblue	00008B	000	000	139
navy	000080	000	000	128
midnightblue	191970	025	025	112
lightsteelblue	B0C4DE	176	196	222
lightslategray	778899	119	136	153
dodgerblue	1E90FF	030	144	255
steelblue	4682B4	070	130	180
lightskyblue	87CEFA	135	206	250
skyblue	87CEEB	135	206	235
lightblue	ADD8E6	173	216	230
powderblue	B0E0E6	176	224	230
darkturquoise	00CED1	000	206	209
azure	F0FFFF	240	255	255
lightcyan	E0FFFF	224	255	255
paleturquoise	AFEEEE	175	238	238
darkcyan	008B8B	000	139	139
mediumturquoise	48D1CC	072	209	204
lightseagreen	20B2AA	032	178	170
turquoise	40E0D0	064	224	208
aquamarine	7FFFD4	127	255	212
mediumaquamarine	66CDAA	102	205	170
mintcream	F5FFFA	245	255	250
springgreen	00FF7F	000	255	127
mediumseagreen	3CB371	060	179	113
seagreen	2E8B57	046	139	087
honeydew	F0FFF0	240	255	240
darkseagreen	8FBC8F	143	188	143
lightgreen	90EE90	144	238	144
limegreen	32CD32	050	205	050
darkgreen	006400	000	100	000
lawngreen	7CFC00	124	252	000
chartreuse	7FFF00	127	255	000
greenyellow	ADFF2F	173	255	047
darkolivegreen	556B2F	085	107	047
olivedrab	6B8E23	107	142	035
ivory	FFFFF0	255	255	240
beige	F5F5DC	245	245	220
lightyellow	FFFFE0	255	255	224
yellow	FFFF00	255	255	000
darkkhaki	BDB76B	189	183	107
gold	FFD700	255	215	000
cornsilk	FFF8DC	255	245	220
goldenrod	DAA520	218	165	032
darkgoldenrod	B8860B	184	134	011
floralwhite	FFFAF0	255	250	240
oldlace	FDF5E6	253	245	230
wheat	F5DEB3	245	222	179
moccasin	FFE4B5	255	228	181
papayawhip	FFEFD5	255	239	213
blanchedalmond	FFEBCD	255	235	205
antiquewhite	FAEBD7	250	235	215
bisque	FFE4C4	255	228	196
linen	FAF0E6	250	240	230
peachpuff	FFDAB9	255	218	185
sandybrown	F4A460	244	164	096
saddlebrown	8B4513	139	069	019
lightsalmon	FFA07A	255	160	122
coral	FF7F50	255	127	080
orangered	FF4500	255	069	000
darksalmon	E9967A	233	150	122
tomato	FF6347	255	099	071
salmon	FA8072	250	128	114
mistyrose	FFE4E1	255	228	225
snow	FFFAFA	255	250	250
indianred	CD5C5C	205	092	092
brown	A52A2A	065	042	042
darkred	8B0000	139	000	000
maroon	800000	128	000	000
whitesmoke	F5F5F5	245	245	245
gainsboro	DCDCDC	220	220	220
lightgrey	D3D3D3	211	211	211
gray	808080	128	128	128
dimgray	696969	105	105	105

	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
0	000	001	002	003	004	005	006	007	008	009	010	011	012	013	014	015	0
1	016	017	018	019	020	021	022	023	024	025	026	027	028	029	030	031	1
2	032	033	034	035	036	037	038	039	040	041	042	043	044	045	046	047	2
3	048	049	050	051	052	053	054	055	056	057	058	059	060	061	062	063	3
4	064	065	066	067	068	069	070	071	072	073	074	075	076	077	078	079	4
5	080	081	082	083	084	085	086	087	088	089	090	091	092	093	094	095	5
6	096	097	098	099	100	101	102	103	104	105	106	107	108	109	110	111	6
7	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	7
8	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143	8
9	144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159	9
A	160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175	A
B	176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191	B
C	192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207	C
D	208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223	D
E	224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239	E
F	240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255	F
	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
0	000	001	002	003	004	005	006	007	008	009	010	011	012	013	014	015	0
1	016	017	018	019	020	021	022	023	024	025	026	027	028	029	030	031	1
2	032	033	034	035	036	037	038	039	040	041	042	043	044	045	046	047	2
3	048	049	050	051	052	053	054	055	056	057	058	059	060	061	062	063	3
4	064	065	066	067	068	069	070	071	072	073	074	075	076	077	078	079	4
5	080	081	082	083	084	085	086	087	088	089	090	091	092	093	094	095	5
6	096	097	098	099	100	101	102	103	104	105	106	107	108	109	110	111	6
7	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	7
8	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143	8
9	144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159	9
A	160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175	A
B	176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191	B
C	192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207	C
D	208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223	D
E	224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239	E
F	240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255	F
	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
0	000	001	002	003	004	005	006	007	008	009	010	011	012	013	014	015	0
1	016	017	018	019	020	021	022	023	024	025	026	027	028	029	030	031	1
2	032	033	034	035	036	037	038	039	040	041	042	043	044	045	046	047	2
3	048	049	050	051	052	053	054	055	056	057	058	059	060	061	062	063	3
4	064	065	066	067	068	069	070	071	072	073	074	075	076	077	078	079	4
5	080	081	082	083	084	085	086	087	088	089	090	091	092	093	094	095	5
6	096	097	098	099	100	101	102	103	104	105	106	107	108	109	110	111	6
7	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	7
8	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143	8
9	144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159	9
A	160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175	A
B	176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191	B
C	192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207	C
D	208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223	D
E	224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239	E
F	240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255	F
	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F