Copy to clipboard javascript navigator.clipboard.write

 const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
 const btn = document.getElementById("button");
 const color = document.querySelector(".color");
 btn.addEventListener("click", function() {
    let hexColor = "#";
    for (let i = 0; i < 6; i++) {
        hexColor += hex[getRandomNumber()];
    }
    color.textContent = hexColor;
    document.body.style.backgroundColor = hexColor;
 });

 function getRandomNumber() {
    return Math.floor(Math.random() * hex.length);
 }

 function myFunction() {
    let copyText = document.getElementById("color-code");
    console.log("copytext" + copyText);
    copyText.select();
    navigator.clipboard.write(copyText.value);
    alert("Copied the text: " + copyText.value);
 }

 <section class="hero  is-large">
     <div class="hero-body">
         <div class="container has-text-centered">
             <div class="columns is-mobile">
                 <div class="column is-half is-offset-one-quarter">
                     <div class="card">
                         <div class="card-header field is-grouped">
                             <h3 class="card-header-title is-inline">
                                 <span> Background Color <span class="tag is-large  is-pulled-right color" id="color-code">hexcode </span>
                                 </span>
                             </h3>
                             <button class="button p-4 m-4" id="copyColorHex" onclick="myFunction()">
                                 <span class="icon is-small is-right">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                     </svg>
                                 </span>
                             </button>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container has-text-centered">
             <div class="p-5 ">
                 <button class="button " id="button">click me</button>
             </div>
         </div>
     </div>
 </section>