# Random Color Palette

by [kirupa](https://www.kirupa.com/about/whatiskirupa.htm) | filed under [Coding Exercises](https://www.kirupa.com/codingexercises/index.htm)

Picking colors that look good together is hard. That's why designers love ***color palette generators***. We press a button, and we get a fresh batch of colors to try out. See one we like? We copy its hex value and use it in our own projects.

In this exercise, we are going to build our own color palette generator. Take it for a spin below (or [open it in a new window](https://www.kirupa.com/codingexercises/examples/random_color_palette.htm)):

Here is what your palette generator needs to do:

1. Display five color swatches
2. Give each swatch a random color, and display that color's hex value (such as `#4A90E2`) on it
3. Generate a brand new palette when the **Generate** button is clicked or when the spacebar is pressed
4. Clicking a swatch copies its hex value to the clipboard, and the swatch shows some feedback that the copy worked

Note: For the spacebar to work in the example above, click on the example first so that it has focus.

For extra credit, make sure the hex value is easy to read on both light and dark colors. Light colors should get dark text, and dark colors should get light text. Another fun addition is the ability to lock a color so that it stays put when a new palette is generated.

Onwards!

## Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Color Palette</title>
  <style>
    
  </style>
</head>
<body>
  <div class="palette">
    <div class="swatch"></div>
    <div class="swatch"></div>
    <div class="swatch"></div>
    <div class="swatch"></div>
    <div class="swatch"></div>
  </div>

  <button id="generate">Generate</button>

  <script>
    
  </script>
</body>
</html>
```

This gives us five empty swatches and a button for generating new palettes. The styling and all of the JavaScript are what you will add entirely on your own!

#### Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: [Generating Random Colors](https://www.kirupa.com/html5/generating_random_colors.htm), [Working with the Keyboard](https://www.kirupa.com/html5/keyboard_events_in_javascript.htm), [Handling Events for Many Elements](https://www.kirupa.com/html5/handling_events_for_many_elements.htm), [Setting CSS Styles Using JavaScript](https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm)

For copying text to the clipboard, take a look at the `navigator.clipboard.writeText()` method.

## Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to [your collection](https://forum.kirupa.com/badges/):

![Random Color Palette badge](https://www.kirupa.com/codingexercises/images/random_color_palette_badge.png)

To claim it, head over to the forums and respond in the [Random Color Palette topic](https://forum.kirupa.com/t/random-color-palette-frontend-coding-exercise/683595). **Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:**

![](https://www.kirupa.com/codingexercises/images/create_forum_topic.webp)

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

## Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please [ask on the forums](https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!