DEV Community

Cover image for Color generator 🎨
Ezequiel_Caste
Ezequiel_Caste

Posted on • Originally published at ezecastellanos.com.ar

Color generator 🎨

If you ever want to build a color generator app please don't try to reinvent the wheel. There are many npm packages to help and assist you and most importantly, save you a lot of time. Sometimes it can be good practice to write your own script but don't let it get too complicated.

I found an interesting package called values.js that provides us with tints and shades of a given color. Before I discovered this package I was going crazy converting colors from HEX to RGB and later to HSL, wasting time when I could have done a simple google search for: "npm color shades and tints"

Installation

npm install values.js --save
Enter fullscreen mode Exit fullscreen mode

Usage

import Values from 'values.js';
let color = new Values('#aaa');

// Generate the tints and shades of the base color as specified by weight 10.
console.log(color.all(10));
Enter fullscreen mode Exit fullscreen mode

For my case of the Color Generator, I needed 10 tints (lighter) and 10 shades (darker). The all() method returns an array of color objects. Each object contains several useful properties such as weight, type, and rgbString, but for this particular case, I used the hex string to extract the HEX color code and the weight to represent the percentage of light/darkness.

https://i.imgur.com/mlMGZTf.png

Next Step: Copy to Clipboard

Let's add some additional functionality to this app by allowing the user to copy a color to their clipboard. Be careful 🚧 You may come across

document.execCommand();
Enter fullscreen mode Exit fullscreen mode

but this method is deprecated. The alternative to use is Clipboard API:

navigator.clipboard.writeText('text to copy');
Enter fullscreen mode Exit fullscreen mode

Remember to change the style of the color divs so that it shows it can be clicked on (hint: cursor: pointer).

Now the tricky part is showing a message to the user that the color code has been copied to their clipboard. This message should only appear for a couple of seconds, and it will have to disappear. Here I used the setTimeout method that will hide the message after 2 seconds:

const showMessage = (id: string) => {
  // show message
  document.getElementById(id).setAttribute('style', 'display: block');
  navigator.clipboard.writeText(`#${id}`);
  // wait 1 sec
  // hide message
  setTimeout(() => {
    document.getElementById(id).setAttribute('style', 'display: none');
  }, 2000);
};
Enter fullscreen mode Exit fullscreen mode

The id parameter is the HEX Color String and is included in each of the color divs:

<p id="{color.hex}" className="color-box-copy">COPIED TO CLIPBOARD</p>
Enter fullscreen mode Exit fullscreen mode

Live Color Generator: https://color-generator-drab.vercel.app/

Find the code on GitHub: https://github.com/EzequielCaste/react-projects/tree/main/color-generator

https://i.imgur.com/4ziuHGk.png

Good luck! πŸ₯³


Credits & References

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

https://noeldelgado.github.io/values.js/

Top comments (0)