{"id":12520,"date":"2015-10-04T19:34:56","date_gmt":"2015-10-04T19:34:56","guid":{"rendered":"http:\/\/www.oracletutoring.ca\/blog\/?p=12520"},"modified":"2018-11-14T16:59:16","modified_gmt":"2018-11-14T16:59:16","slug":"javascript-an-html-color-checker","status":"publish","type":"post","link":"https:\/\/www.oracletutoring.ca\/blog\/javascript-an-html-color-checker\/","title":{"rendered":"Javascript:  an HTML color checker"},"content":{"rendered":"<h1>The tutor offers a little utility that connects the user with HTML color.<\/h1>\n<p><script type=\"text\/javascript\" src=\"\/javascripts\/jscolorarch.js\"><\/script><br \/>\nIn web coding, one way HTML colors are indicated is as follows:<\/p>\n<p><span style=\"font-family:monospace\">style=&#8221;color:#ff0000&#8243;<\/span><\/p>\n<p>More specifically, the  color string is of the form <span style=\"font-family:monospace\">#rrggbb<\/span>. After the hash tag, the first two digits are for red, the next two for green, then the final two for blue.  The digits are in hex, meaning base 16.  (For more info, see my post <a href=\"?p=2382\">on hexadecimal numbers<\/a>.)  Each &#8220;digit&#8221; has the possible range 0-f; after 9 comes a.  Some examples:<\/p>\n<p><span style=\"font-family:monospace\">#ff0000<\/span> bright red<br \/>\n<span style=\"font-family:monospace\">#ffff00<\/span> yellow<br \/>\n<span style=\"font-family:monospace\">#ff00ff<\/span> hot pink<br \/>\n<span style=\"font-family:monospace\">#ffffff<\/span> white<br \/>\n<span style=\"font-family:monospace\">#000000<\/span> black<\/p>\n<p>Below is a color input device via which you can check color combinations.  Don&#8217;t enter the hash tag; it&#8217;s already included.  Just enter the six hexadecimal digits 0-f, then click the button to see the color you&#8217;ve invented:)<\/p>\n<p style=\"text-align:center\">Enter your color digits (0-f) here:  #<input type=\"text\" maxlength=\"6\" size=\"6\" id=\"entry\" style=\"color:white;background-color:brown\"><\/input><\/p>\n<p><button style=\"color:white;background-color:brown;display:block;margin:auto\" onclick=\"color()\">Click me!<\/button><\/p>\n<div id=\"output\" style=\"text-align:center;font-size:24px\">See your color here:)<\/div>\n<\/p>\n<p>HTML colors can be fun to experiment with.<\/p>\n<p>Source:<\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/html\/html_colorvalues.asp\">w3schools.com<\/a><\/p>\n<p>Jack of <a href=\"https:\/\/www.oracletutoring.ca\">Oracle Tutoring by Jack and Diane,<\/a> Campbell River, BC.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The tutor offers a little utility that connects the user with HTML color. In web coding, one way HTML colors are indicated is as follows: style=&#8221;color:#ff0000&#8243; More specifically, the color string is of the form #rrggbb. After the hash tag, &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/www.oracletutoring.ca\/blog\/javascript-an-html-color-checker\/\"> <span class=\"screen-reader-text\">Javascript:  an HTML color checker<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105,837],"tags":[1093,1092,205],"class_list":["post-12520","post","type-post","status-publish","format-standard","hentry","category-computer-science","category-web-design","tag-html-color-checker","tag-html-colors","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/12520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/comments?post=12520"}],"version-history":[{"count":29,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/12520\/revisions"}],"predecessor-version":[{"id":36177,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/12520\/revisions\/36177"}],"wp:attachment":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/media?parent=12520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/categories?post=12520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/tags?post=12520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}