Home / Design Blog / Creating a Color Palette Generator: A Step-by-Step Guide

Creating a Color Palette Generator: A Step-by-Step Guide

By: Simon Urbina
Updated:
Jan 11, 2023
Posted: Jan 10, 2023

Summary: Looking to have some fun with color schemes and palettes? This blog post dives into the creative possibilities of crafting a UI Color Generator by utilizing chroma.js, jQuery and nes.css! Follow along as we break down how to build your own palette with a base color that updates automatically – Unleash your inner artist today with this unique guide!

Check it out in action 


Let’s spin this color wheel

Inspiration for this palette generator

Colors are critical when creating memorable products. There are a ton of apps online that do this and more. The purpose of this post is to have fun and get to monochromatic color palettes very quickly. We are especially interested in getting to primary and secondary colors or color combinations.

Using NES.css for a beautiful and simple ui

Talk about color scheme. I was looking for an interesting way to display the work so I started with bootstrap. It just didn’t fit visually. This is about having fun not building an analytics dashboard. I came across NES.css and was a must have for this little palette generator.

The goal is to get to a color combination

So there are 2 fields the user is presented with. The first field is a name field. This is where the enters a color name like “red” and hex codes are created with a primary color at the center. The second field is similar to the color name field. The only difference is the user is entering a hex code. Both fields will create beautiful color palettes with simplicity. This isn’t a color picker.

Accessibility and color blindness

There are some improvements that I would like to make to help designers with color challenges to be able to, as an example, be able to easily distinguish between orange and red with text help.

Technology and Libraries used in UI Color Generator

HTML, CSS, Chroma.js, jQuery, and nes.css (to give it that retro NES look)

Let’s go through the jQuery and build ui color palettes

Generate a palette of colors based on the base color

Let’s explore how we can develop a selection of colors based on the core hue. Whether you specify it as an HTML hexcode or by name, our system can accommodate both! For example if your base color is referenced through its given name, chroma.js will allow us to convert that into a suitable hexadecimal code for use throughout our palette development process.


// Generate a palette of colors based on the base color
function generatePalette(baseColor) {
let color;
if (baseColor[0] === '#') {
// The base color is a hex code, so use it directly
color = baseColor;
} else {
// The base color is a name, so convert it to a hex code using chroma.js
color = chroma(baseColor).hex();
}

Next let’s set up the colors with chroma.js. Use mix to get to our monochromatic results.


// Generate 5 shades of the base color
const color0 = chroma.mix(chroma(color), 'black', .76);
const color1 = chroma.mix(chroma(color), 'black', .60);
const color2 = chroma.mix(chroma(color), 'black', .48);
const color3 = chroma.mix(chroma(color), 'black', .32);
const color4 = chroma(color).hex();
const color5 = chroma.mix(chroma(color), 'white', .12);
const color6 = chroma.mix(chroma(color), 'white', .36);
const color7 = chroma.mix(chroma(color), 'white', .64);
const color8 = chroma.mix(chroma(color), 'white', .88);

Build the HTML for the color swatches

Let’s bring the color palette to life with HTML! We’ll be crafting each swatch in its own individual div and setting background colors for an eye-catching result. A professional, personalized look that any user will appreciate.


  // Build the HTML for the color swatches
  const html = `
  <div class="wrap nes-container is-rounded">
    <div class="result" style="background-color: ${color0};">
      <div style="color:${color7}">${color0}</div>
    </div>
    <div class="result" style="background-color: ${color1};">
      <div style="color:${color6}">${color1}</div>
     </div>
    <div class="result" style="background-color: ${color2};">
      <div style="color:${color5}">${color2}</div>
    </div>
    <div class="result" style="background-color: ${color3};">
      <div style="color:${color5}">${color3}</div>
    </div>
    <div class="result" style="background-color: ${color4};">${color4}</div>
    <div class="result" style="background-color: ${color5};">${color5}</div>
    <div class="result" style="background-color: ${color6};">${color6}</div>
    <div class="result" style="background-color: ${color7};">${color7}</div>
        <div class="result" style="background-color: ${color8};">${color8}</div>
        </div>
  `;

Update the results div with the generated color

After constructing the HTML for our exciting range of color swatches, we can easily update the results div with jQuery. Simply select and replace its current contents to display a dynamic array of colorful options!


 // Update the results div with the generated colors
$('#results').html(html);

Hide the form and show the reset button

By leveraging jQuery, we can enhance the user experience by hiding the form element and displaying a reset button in its place. The hide() and show() methods provide us with an efficient way to make this happen.


 // Hide the form and show the reset button
$('#color-form').hide();
$('#reset').show();
}

Reset the form and results

Easily reset your form and results by utilizing the reset() method on the form, as well as wiping out any previous contents in the results div.


your code here

Clear the form input

jQuery makes it easy to clear form inputs and results – simply select the input field using jQuery and use val() to erase its content, then select the results div with empty() for a fresh start. jQuery makes it easy to display and hide certain elements on our pages quickly. By selecting the form with jQuery, we can harness its show() method for a simple reveal; likewise, the reset button is easily hidden away using hide().


function reset() {
  // Clear the form input
  $('#color-input').val('');
  $('#hex-input').val('');

  // Clear the results div
  $('#results').html('');

  // Show the form and hide the reset button
  $('#color-form').show();
  $('#reset').hide();
}


Listen for form submission


$('#color-form').submit(event => {
  event.preventDefault(); // Prevent the form from being submitted

  // Get the base color from the form input
  const baseColor = $('#color-input').val() || $('#hex-input').val();

  // Generate the palette of colors
  generatePalette(baseColor);
});

Listen for reset button click


$('#reset').click(reset);

You’re own NES flavored UI Color Generator

In conclusion, we have explored how chroma.js, jQuery, and nes.css can be used in tandem to create a unique and interesting UI color generator. With this tool, users have the power to create cohesive color palettes with the assistance of a very simple generator. Oh yeah looks like a Nintendo game. This tool is incredibly useful for web developers and designers trying to grab monochromatic colors quickly no fluff. Furthermore, We hope that this blog post has inspired you to use these three components together and create something beautiful.

 

Simon Urbina
Simon Urbina

Simon’s a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.

Advertisement

WordPress.com