Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style type="text/css">
:root
    {
        background-color: #2f3237;
        font-family: 'Courier New', Courier, monospace;
    }
.a{
    color: white;
}
div{
    margin-top: 70px;
    width: 300px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #1f3237;
    text-align: center;
    border: 1px solid red;
    border-radius: 10px;
}
button{
    background-color: black;
    color: white;
    border-radius: 16px;
    width: 200px;
    height: 30px;
    border: 1px solid red;
    cursor:pointer;
    outline: none;
}

</style>
   <div>
   <p id="color-inner"></p>
   <button onClick="randomColor()">Wylosuj losowy kolor</button>
   </div>
<script>
    function randomColor(){
        const zakres = "0123456789ABCDEF";
        const text = document.getElementById('color-inner');
        let kolor = "#";

            for(i=0;i<6;i++){
                kolor += zakres[Math.floor(Math.random()*16)];
            }

            text.innerHTML = "<span class='a'>Twój kolor to: </span>" + kolor;
            text.style.color = kolor;
    }
randomColor();
</script>


</body>
</html>