{"id":14668,"date":"2015-05-22T05:01:14","date_gmt":"2015-05-21T19:01:14","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14668"},"modified":"2015-05-21T21:33:30","modified_gmt":"2015-05-21T11:33:30","slug":"htmljavascript-colour-name-translation-into-rgb-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-colour-name-translation-into-rgb-tutorial\/","title":{"rendered":"HTML\/Javascript Colour Name Translation into RGB Tutorial"},"content":{"rendered":"
\"HTML\/Javascript<\/a>

HTML\/Javascript Colour Name Translation into RGB Tutorial<\/p><\/div>\n

Sometimes you know a colour by a name, and perhaps that name is recognised as an RGB type of colour. Today we write some HTML and Javascript code, which, admittedly, does not work for all the web browsers (notably (not) Firefox) but will work in Safari or Google Chrome or Opera to tell you this web analysis of a colour name’s RGB makeup.<\/p>\n

This brings into play the 16 default web colours (you can read about here at Wikipedia<\/a> … thanks) namely …<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CSS 1–2.0 \/ HTML 3.2–4 \/ VGA color names<\/caption>\n
Name<\/th>\nHex<\/a> (RGB)<\/small><\/th>\n<\/tr>\n<\/thead>\n
White<\/a><\/th>\n#FFFFFF<\/td>\n<\/tr>\n
Silver<\/a><\/th>\n#C0C0C0<\/td>\n<\/tr>\n
Gray<\/a><\/th>\n#808080<\/td>\n<\/tr>\n
Black<\/a><\/th>\n#000000<\/td>\n<\/tr>\n
Red<\/a><\/th>\n#FF0000<\/td>\n<\/tr>\n
Maroon<\/a><\/th>\n#800000<\/td>\n<\/tr>\n
Yellow<\/a><\/th>\n#FFFF00<\/td>\n<\/tr>\n
Olive<\/a><\/th>\n#808000<\/td>\n<\/tr>\n
Lime<\/a><\/th>\n#00FF00<\/td>\n<\/tr>\n
Green<\/a><\/th>\n#008000<\/td>\n<\/tr>\n
Aqua<\/a><\/th>\n#00FFFF<\/td>\n<\/tr>\n
Teal<\/a><\/th>\n#008080<\/td>\n<\/tr>\n
Blue<\/a><\/th>\n#0000FF<\/td>\n<\/tr>\n
Navy<\/a><\/th>\n#000080<\/td>\n<\/tr>\n
Fuchsia<\/a><\/th>\n#FF00FF<\/td>\n<\/tr>\n
Purple<\/a><\/th>\n#800080<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

… because the method to translate these 16 default colours needs to be separated into a separate (mapping) lookup piece of logic, rather than letting the web browser (and Javascript DOM) do the work.<\/p>\n

So please feel free to download the HTML and Javascript code you could call colour_translation.html<\/a> or try the live run<\/a>, and see you round … like a rissole (chortle … chortle<\/font>).<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n