• HTML
• CSS
• JS

HTML

<div class="contenedor">
    <button id="btn">Generar color</button>
    <span>#d6b19f</span>
</div>

CSS

body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    margin:0;
    font-family:sans-serif;
    background:#d6b19f;
    transition:0.3s all;
}
.contenedor{
    text-align:center;
    padding:2em;
    display:flex;
    align-items:stretch;
}
.contenedor button{
    border:none;
    background:#17202a;
    color:#fff;
    padding:1em;
    cursor:pointer;
    font-size:1.2em;
}
.contenedor span{
    background:#fff;
    padding:0.9em 0.5em 0em 0.5em;
    font-size:1.4em;
}

JS

const btn = document.querySelector('#btn');

btn.addEventListener('click',()=>{
    
    let char  = '0123456789abcdef';
    let color = '#';
    
    for(let i=0; i<6; i++){
        color = color + char[Math.floor(Math.random()*16)];
    }
    
    document.querySelector('span').innerHTML = color;
    document.body.style.background = color;
    
});