Random HTML Colors

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
<link href="lib/style.css" rel="stylesheet"/>
</head>
<body>
  <h1>Random HTML Colors</h1>
<div id="main">
  

</div>



<script src="lib/script.js"></script>
</body>

body{

    font-family:"arial narrow",sans-serif;
    font-size:125%;
}

p {
    padding:5px;
    font-weight:666;
    font-size:115%;
    margin-top:5px;
}

/**
 * Returns a random number between min (inclusive) and max (exclusive)
 */
function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

/**
 * Returns a random integer between min (inclusive) and max (inclusive).
 * The value is no lower than min (or the next integer greater than min
 * if min isn't an integer) and no greater than max (or the next integer
 * lower than max if max isn't an integer).
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


const randColor = () => {

    const arr = ['a', 'b', 'c', 'd', 'e', 'f', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    const key = () => Math.floor(getRandomArbitrary(0, arr.length));
    let i = 0;
    let color = '#';
    while (i < 6) {
        color += arr[key()];
        i++;
    }
    return color;

}



function refresh() {
    const main = $('#main');
    const h1=$('h1');
    main.html('');
    h1.css({
        color: randColor(),
        backgroundColor: randColor(),
        borderRadius: '5px',
        padding: '3px',
        border: '2px solid ' + randColor()
    });
    let j = 6;
    while (j > 0) {
        main.append('<p style="color:' + randColor() + ';background-color:' + randColor() + ';">Click anywhere on this page</p>');
        j--;
    }
}
$(document).ready(function () {
    refresh();
    $('body').on('click', function () {
        refresh();
    })
})