title: Choose random color pallet from the list on page load
body: <p>Need some help with Javascript. </p>
  
  <p>Description: there are 3 different color combinations (pallets). Every combination has 3 colors.</p>
  
  <p>Goal: randomly choose color combination on page load and change elements like: background-color, font-color, underline-color.</p>
  
  <p>Problem: can't figure out how to make it for color combination, but not a 1 color like in code example below.</p>
  
  <p>Example:</p>
  
  <ul>
  <li>Pallet-1: red, blue, green</li>
  <li>Pallet-2: yellow, cyan, orange</li>
  <li><p>Pallet-3: cyan, orange, blue</p>
  
  <ol>
  <li>Script randomly choosing Pallet-2.</li>
  <li>Change background-color to yellow, font-color to cyan, border-color to orange.</li>
  </ol></li>
  </ul>
  
  <p>Sorry if it's too simple, but I spent a day and found a solution for random color pick <strong>of 1 color only</strong> from the list, but <strong>can't make it work with color combinations</strong>.</p>
  
  <p>Thanks in advance.</p>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){ 
    var colors = ['red','blue','green','yellow','cyan','orange'];
    var new_color = colors[Math.floor(Math.random()*colors.length)];
    $('#color-div').css('background-color',new_color);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#color-div{
    border:1px solid gray;
    width:50px;
    height:50px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="color-div"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/40r2gcsk/7/" rel="nofollow noreferrer">Fiddle</a></p>