Create a Copy-Pasteable Color Palette to Simplify Your Workflow 🚀

Have you ever experienced the frustration of having to repeatedly copy and paste the same color code every time you start a new project? Trust me, I feel your pain.

That's why I came up with a brilliant solution: A project that brings all my frequently used color codes in one place, and automatically copies the color code to the clipboard, saving you time and effort.

Try Clicking the colors to see what happens!

Sounds great, right? Let me show you how you can achieve this convenient trick for yourself.

Step 1 : Find Commonly Used Colors

First off, let's find the colors you're always using in your projects. You know, the ones that make your brand pop, add some extra oomph, or just show up everywhere. In this case, we'll take a peek at Bootstrap's color codes for a little inspiration.

Step 2 : HTML

This will be the building block for each color. It's made up of two parts: one to display the color (.color-palette) and another to show the color code (.color-palette-hex-code).

<div class="color-palette" style="background: #0275d8;" title="Primary">
    <span class="color-palette-hex-code">#0275d8</span>
  </div>

Let's add some more colors!
To keep things organized, we'll create a parent div named color-palette-wrapper that brings all these colors together in one place.

<div class="color-palette-wrapper">
  <div class="color-palette" style="background: #0275d8;" title="Primary">
    <span class="color-palette-hex-code">#0275d8</span>
  </div>
  <div class="color-palette" style="background: #5bc0de;" title="Info">
    <span class="color-palette-hex-code">#5bc0de</span>
  </div>
  <div class="color-palette" style="background: #5cb85c;" title="Success">
    <span class="color-palette-hex-code">#5cb85c</span>
  </div>
  <div class="color-palette" style="background: #f0ad4e;" title="Warning">
    <span class="color-palette-hex-code">#f0ad4e</span>
  </div>
  <div class="color-palette" style="background: #d9534f;" title="Danger">
    <span class="color-palette-hex-code">#d9534f</span>
  </div>
  <div class="color-palette" style="background: #292b2c;" title="Inverse">
    <span class="color-palette-hex-code">#292b2c</span>
  </div>
  <div class="color-palette" style="background: #f7f7f7;" title="Faded">
    <span class="color-palette-hex-code">#f7f7f7</span>
  </div>
</div>

Step 2 : CSS

Now let's add some styles.

.color-palette-wrapper {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.color-palette {
    width:65px; 
    height: 75px;
    display: flex;
    justify-content: start;
    align-items: flex-end;
    font-size: 12px;
    cursor: pointer;
}
.palette-title {
    font-size: 25px;
    text-transform: capitalize;
}

.color-palette-hex-code {
    background: rgba(255, 255, 255, 0.31);
    color: rgb(18, 18, 18);
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    padding-left: 2px;
}

Applying the styles above will get us here :

Step 3 : JavaScript

Now the only thing left to do is add some JavaScript magic for the copy-paste functionality! Here's what we need :

$(".color-palette").click(function (e) {
  // copy the code to clipboard
  var copyText = $(this).find(".color-palette-hex-code").text();
  navigator.clipboard.writeText(copyText);
});

But hey, we don't want to keep it a secret! We want to make sure the user knows when we've successfully copied the color code, right? So, let's add a little something extra to make that alert message appear and give us a little high-five moment.

Step 4 : Create an alert message

Here's the HTML & CSS for the alert message.

<div id="alertMessage">Copied to Clipboard!</div>

#alertMessage {
  z-index: 1000;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #0275d8;
  color: #d1d5db;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

Put these together and we'll get a simple alert message looking like this :

I went ahead and fixed the position of the alert message to the bottom right corner. However, feel free to tweak it and make it work exactly the way you want!

Step 5 : Make the alert message pop up

Since the alert message is hidden by default, we need to start by adding this line of code to hide it:

$("#alertMessage").hide();

Now, we will make the alert message visible for 3 seconds (but feel free to change that duration to your choice) whenever the user clicks on the .color-palette element.

var copyText = $(this).find(".color-palette-hex-code").text();
  navigator.clipboard.writeText(copyText).then(() => {
    // Alert the user that the action took place.
    $("#alertMessage").show();
    // hide the alert message
    setTimeout(function () 
      $("#alertMessage").hide();
  }, 3000);

Now, when we bring all of these pieces together, we've got our final JavaScript code, ready to rock and roll:

$(document).ready(function () {
  // Hide the alert message by default
  $("#alertMessage").hide();

  // when the user clicks the color palette
  $(".color-palette").click(function (e) {
    // copy the code to clipboard
    var copyText = $(this).find(".color-palette-hex-code").text();
    navigator.clipboard.writeText(copyText).then(() => {
      // Alert the user that the action took place.
      $("#alertMessage").show();
      // hide the alert message
      setTimeout(function () {
        $("#alertMessage").hide();
      }, 3000);
    });
  });
});

And That's It!

Thanks for reading, and happy coding!