\nA colleague posed a little puzzle for a fun little app he was\nwriting in HTML:\nHe wanted to generate a random color.\n<\/p>\n
\nIf you search around the intertubes,\nyou can find several possible attempts at a solution,\nlike\n\nthis collection<\/a>,\nand\n\nan interesting example that has trouble with the pigeonhole principle<\/a>.\n<\/p>\n \nThe original function to generate a random color went like this:\n<\/p>\n \nCan you do better?\n(My solution after the jump.)\n<\/p>\n \nThat was a short jump.\n<\/p>\n \nMy first simplification was recognizing that three random 8-bit values\nis the same as one random 24-bit value.\n<\/p>\n \nNext, I got rid of the \nFinally, I did some factoring.\n<\/p>\n \nThat last bit was a bit dodgy due to the wonders of floating point\narithmetic, but hey, it’s a puzzle now.\n<\/p>\n \nFinally, I realized that CSS supports A colleague posed a little puzzle for a fun little app he was writing in HTML: He wanted to generate a random color. If you search around the intertubes, you can find several possible attempts at a solution, like this collection, and an interesting example that has trouble with the pigeonhole principle. The original function […]<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-6273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":" A colleague posed a little puzzle for a fun little app he was writing in HTML: He wanted to generate a random color. If you search around the intertubes, you can find several possible attempts at a solution, like this collection, and an interesting example that has trouble with the pigeonhole principle. The original function […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/6273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=6273"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/6273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=6273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=6273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=6273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n\/\/ Pad a string of up to two characters with a leading zero\n\/\/ so the result is always exactly two characters long.\nfunction padZero(v) {\n return (v.length == 1) ? '0' + v : v;\n}\nfunction randomColor() {\n return \"#\" + padZero(Math.floor(Math.random() * 256)).toString(16) +\n padZero(Math.floor(Math.random() * 256)).toString(16) +\n padZero(Math.floor(Math.random() * 256)).toString(16);\n}\n<\/pre>\n
\n\nfunction padZeros6(v) {\n while (v.length < 6) v = "0" + v;\n return v;\n}\nfunction randomColor() {\n return "#" +\n padZeros6(Math.floor(Math.random() * 16777216).toString(16));\n}\n<\/pre>\npadZeros6<\/code> function by\nsimply setting bit 25 to force a 7-digit result, then removing\nthe leading 1.\n<\/p>\n\nfunction randomColor() {\n return \"#\" +\n (Math.floor(Math.random() * 16777216) +\n 16777216).toString(16).substr(1);\n}\n<\/pre>\n\nfunction randomColor() {\n return \"#\" +\n Math.floor((1 + Math.random()) * 16777216).toString(16).substr(1);\n}\n<\/pre>\n#rgb<\/code> as shorthand\nfor #rrggbb<\/code>, so if you don’t mind that your color\npalette is reduced to 4096 colors (and in the case of my colleague’s\nlittle app, that was not an issue),\nyou can shorten it a bit more:\n<\/p>\n\nfunction randomColor() {\n return \"#\" +\n Math.floor((1 + Math.random()) * 4096).toString(16).substr(1);\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"