Trying to randomly select an class from an array and apply to body (JS NOOB)

Trying to randomly select on of the color classes once the color span is clicked then apply it to the body, not sure how to randomize the array selection and apply per click.

Test site located here: http://alexcoven.com/type/

<script type="text/javascript">
    // Select the element
    var body = document.querySelector('body');

    // Array of color Classes
    var classColorArray = ['tan-red', 'orange-green', 'deep-green-orange'];

    // Apply the new classes
    var cl = body.classList;

    document.querySelector('span.reverse').addEventListener('click', (e) => {
        body.className = ''; // Clear
        cl.add('reverse'); // Add
          event.preventDefault();
    });
    document.querySelector('span.default').addEventListener('click', (e) => {
        body.className = ''; // Clear
          event.preventDefault();
    });
    document.querySelector('span.color').addEventListener('click', (e) => {
        body.className = ''; // Clear
        cl.add.apply(cl, classColorArray);
          event.preventDefault();
    });
</script>