Here’s a quicky (there is a PHP version<\/a> too):<\/p>\n

var randomColor = Math.floor(Math.random()*16777215).toString(16);<\/code><\/pre>\n
\n  See the Pen 
\n  Generate New Random Hex Color with JavaScript<\/a> by Chris Coyier  (@chriscoyier<\/a>)
\n  on CodePen<\/a>.<\/span>\n<\/p>\n
If you’d prefer they are a bit more pleasing or need to generator colors that work together, we have an article about that<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"
Here’s a quicky (there is a PHP version too): var randomColor = Math.floor(Math.random()*16777215).toString(16); See the Pen Generate New Random Hex […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3357,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[837,838,12034],"class_list":["post-5000","page","type-page","status-publish","hentry","tag-color","tag-hex","tag-random"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack-related-posts":[{"id":6237,"url":"https:\/\/css-tricks.com\/snippets\/php\/random-hex-color\/","url_meta":{"origin":5000,"position":0},"title":"Random Hex Color","author":"Chris Coyier","date":"April 22, 2010","format":false,"excerpt":"Technique #1 Then echo out the $color value anywhere you need it. For example:","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19646,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/lighten-darken-color\/","url_meta":{"origin":5000,"position":1},"title":"Lighten \/ Darken Color","author":"Chris Coyier","date":"January 1, 2013","format":false,"excerpt":"The CSS preprocessors Sass and Less can take any color and darken() or lighten() it by a specific value. But no such ability is built into JavaScript. This function takes colors in hex format (i.e. #F06D06, with or without hash) and lightens or darkens them with a value. function LightenDarkenColor(col,\u2026","rel":"","context":"In \"color\"","block_context":{"text":"color","link":"https:\/\/css-tricks.com\/tag\/color\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16119,"url":"https:\/\/css-tricks.com\/snippets\/css\/named-colors-and-hex-equivalents\/","url_meta":{"origin":5000,"position":2},"title":"Named Colors and Hex Equivalents","author":"Chris Coyier","date":"January 29, 2012","format":false,"excerpt":"Color Name HEX Color AliceBlue\u00a0 #F0F8FF \u00a0 AntiqueWhite\u00a0 #FAEBD7 \u00a0","rel":"","context":"With 23 comments","block_context":{"text":"With 23 comments","link":"https:\/\/css-tricks.com\/snippets\/css\/named-colors-and-hex-equivalents\/#comments"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14029,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/","url_meta":{"origin":5000,"position":3},"title":"color","author":"Sara Cope","date":"September 5, 2011","format":false,"excerpt":"The color property in CSS sets the color of text and text decorations. p { color: blue; } Values The color property can accept any CSS color value. Named colors: for example, \"aqua\". Hex colors: for example, #00FFFF or #0FF. RGB and RGBa colors: for example, rgb(0, 255, 255) and\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196162,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/background-color\/","url_meta":{"origin":5000,"position":4},"title":"background-color","author":"Chris Coyier","date":"February 17, 2015","format":false,"excerpt":"The background-color property in CSS applies solid colors as background on an element. Here's an example: html { background-color: #82a43a; } The example used above (#82a43a) is called a hex code, and it is one of several ways that CSS has to represent a single color. There are a number\u2026","rel":"","context":"With 6 comments","block_context":{"text":"With 6 comments","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/background-color\/#comments"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/08\/photoshopcolorpicker.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/08\/photoshopcolorpicker.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/08\/photoshopcolorpicker.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":249274,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/select-random-item-array\/","url_meta":{"origin":5000,"position":5},"title":"Select Random Item from an Array","author":"Chris Coyier","date":"December 23, 2016","format":false,"excerpt":"var myArray = [ \"Apples\", \"Bananas\", \"Pears\" ]; var randomItem = myArray[Math.floor(Math.random()*myArray.length)]; See the Pen gLJPZv by Chris Coyier (@chriscoyier) on CodePen.","rel":"","context":"With 7 comments","block_context":{"text":"With 7 comments","link":"https:\/\/css-tricks.com\/snippets\/javascript\/select-random-item-array\/#comments"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5000"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5000\/revisions"}],"predecessor-version":[{"id":304037,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5000\/revisions\/304037"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3357"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5000"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}