DEV Community

Cover image for Create a Copy-Pasteable Color Palette to Simplify Your Workflow 🚀
Zoe
Zoe

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Applying the styles above will get us here :

Color Palette

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);
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
#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;
}
Enter fullscreen mode Exit fullscreen mode

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

Alert Message

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();
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
    });
  });
});

Enter fullscreen mode Exit fullscreen mode

And That's It!

Thanks for reading, and happy coding!

Top comments (0)