{"id":5000,"date":"2009-12-10T12:06:23","date_gmt":"2009-12-10T19:06:23","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=5000"},"modified":"2020-02-19T14:50:01","modified_gmt":"2020-02-19T21:50:01","slug":"random-hex-color","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/javascript\/random-hex-color\/","title":{"rendered":"How To Generate a Random Color in JavaScript"},"content":{"rendered":"<p>Here&#8217;s a quicky (there is <a href=\"https:\/\/css-tricks.com\/snippets\/php\/random-hex-color\/\">a PHP version<\/a> too):<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var randomColor = Math.floor(Math.random()*16777215).toString(16);<\/code><\/pre>\n<p class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"js,result\" data-user=\"chriscoyier\" data-slug-hash=\"Xojwzw\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Generate New Random Hex Color with JavaScript\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/Xojwzw\" rel=\"noopener\"><br \/>\n  Generate New Random Hex Color with JavaScript<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>If you&#8217;d prefer they are a bit more pleasing or need to generator colors that work together, <a href=\"https:\/\/css-tricks.com\/re-pleasing-color-palettes\/\">we have an article about that<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;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 Color with JavaScript by Chris Coyier (@chriscoyier) on CodePen. If you&#8217;d prefer they are a bit more pleasing or need to generator colors that work together, we have an article about that.<\/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":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[837,838,12034],"acf":[],"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","date":"April 22, 2010","format":false,"excerpt":"Technique #1 Then echo out the $color value anywhere you need it. For example:","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196162,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-color\/","url_meta":{"origin":5000,"position":1},"title":"background-color","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","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},"classes":[]},{"id":19646,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/lighten-darken-color\/","url_meta":{"origin":5000,"position":2},"title":"Lighten \/ Darken Color","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\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198607,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","url_meta":{"origin":5000,"position":3},"title":"text-decoration-color","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links. a { text-decoration-color: #E18728; } Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322529,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-color\/","url_meta":{"origin":5000,"position":4},"title":"column-rule-color","date":"October 5, 2020","format":false,"excerpt":"The column-rule-color CSS property determines the color of a line between columns in a CSS multi-column layout. The property can't act alone! In order to see the color, we need to make the line \u2014 technically called a \"rule\" \u2014 between columns. That requires the column-rule-style property. .columns { column-count:\u2026","rel":"","context":"Similar post","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":5},"title":"Named Colors and Hex Equivalents","date":"January 29, 2012","format":false,"excerpt":"Color Name HEX Color AliceBlue\u00a0 #F0F8FF \u00a0 AntiqueWhite\u00a0 #FAEBD7 \u00a0","rel":"","context":"With 23 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5000"}],"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}]}}