In this article you will know how to create Color Palette Generator with HTML, CSS and JavaScript. You can create this JavaScript Color Palette Generator very easily if you know basic JavaScript.

Simple Color Palette Generator With Javascript

by

In this article you will know how to create Color Palette Generator with HTML, CSS and JavaScript. You can create this JavaScript Color Palette Generator very easily if you know basic JavaScript.

This Random Color Palette Generator can generate random color on every click. Besides, you can select the color here.

JavaScript Color Palette Generator

This is a simple Color Palette Generator so I tried to make this design in a simple way. Here you can select the base color and then select the other colors to create the Color Palette.

In this article, we’ll delve into the world of colors, exploring how to dynamically generate beautiful color palettes for your websites.

See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.

Hopefully from the above demo you have learned how this JavaScript Color Palette Generator works.

Color Palette Generator using HTML CSS JavaScript

Now I have shared step by step tutorial to create this JavaScript Color Palette Generator. If you just want the source code then you can use the download button below the article.

To create a Color Palette Generator, we’ll use HTML for the structure and JavaScript for the functionality. Begin by setting up your HTML file with a simple layout that includes a button to trigger color generation and a container to display the generated palette.

Step 1: Basic Structure of Color Palette

Now we will create the basic structure of Color Palette Generator. Within this basic structure we will add all the elements.

Copy Text 
    <div class="container">

    </div>
Copy Text 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  width: min(500px, 90%);
  text-align: center;
  padding: 36px;
  border-radius: 16px;
  background-color: #ffffff;
}

Step 2: Color input place

Now we will create a place to input the color using HTML’s input element.

Copy Text 
<label for="base-color">Select a Base Color:</label>
<input type="color" value="#0091fe" id="base-color" />
Copy Text 
label {
  font-size: 18px;
  margin-right: 10px;
}
input {
  padding: 5px;
  cursor: pointer;
}

Step 3: Color Palette Generator Button

Now add a button in this Color Palette Generator to generate the color. When you click on this button the color will be generated.

Copy Text 
<button id="generate-btn">Generate Palette</button>
Copy Text 
button {
  border: 3px solid #000000;
  background-color: transparent;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  margin-left: 10px;
}

Step 4: Color Palette Copy Area

Now create an area where there will be many colors whose color code you can copy.

Copy Text 
<div id="color-palette" class="color-palette"></div>
Copy Text 
.color-palette {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.color-box {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
}

Step 5: Activate the Color Palette Generator

Now we need to activate this Color Palette Generator by JavaScript.

Copy Text 
let generatePalette = () => {
  const baseColorInput = document.getElementById("base-color");
  const colorPaletteContainer = document.getElementById("color-palette");
  const baseColor = baseColorInput.value;
  document.body.style.backgroundColor = baseColor;
  //Clear previous palette
  colorPaletteContainer.innerHTML = "";
  const palette = generateHarmoniousPalette(baseColor);
  palette.forEach((color) => {
    const colorBox = document.createElement("div");
    colorBox.style.backgroundColor = color;
    colorBox.className = "color-box";
    colorBox.addEventListener("click", copyCode);
    colorPaletteContainer.append(colorBox);
  });
};

function generateHarmoniousPalette(baseColor) {
  const numberOfColors = 5;
  const baseHue = extractHue(baseColor);
  const colorPalette = [];
  for (let i = 0; i < numberOfColors; i++) {
    const hue = (baseHue + (360 / numberOfColors) * i) % 360;
    const color = `hsl(${hue},70%,50%)`;
    colorPalette.push(color);
  }
  return colorPalette;
}

function extractHue(color) {
  const hex = color.slice(1);
  const rgb = parseInt(hex, 16);

  const r = (rgb >> 16) & 0xff;
  const g = (rgb >> 8) & 0xff;
  const b = (rgb >> 0) & 0xff;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);

  let hue;
  if (max === min) {
    hue = 0;
  } else {
    const d = max - min;
    switch (max) {
      case r:
        hue = ((g - b) / d + (g < b ? 6 : 0)) * 60;
        break;
      case g:
        hue = ((b - r) / d + 2) * 60;
        break;
      case b:
        hue = ((r - g) / d + 4) * 60;
        break;
    }
  }
  return hue;
}

function copyCode(e) {
  let input = document.createElement("input");
  input.type = "text";
  let text = e.target.style.backgroundColor;
  let hex = "#";
  let rgbcode = text.replace(/[rgb()]+/g, "") || rgbcode;
  rgbcode = rgbcode.split(",");
  rgbcode.forEach((value) => {
    value = parseInt(value).toString(16);
    hex += value.length == 1 ? "0" + value : value;
  });
  input.value = hex;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  alert("Color Copied: " + hex);
}

window.addEventListener("load", generatePalette);
document
  .getElementById("generate-btn")
  .addEventListener("click", generatePalette);

Hopefully here you have learned how to create a Color Palette Generator using HTML, CSS and JavaScript. You can check out more projects like this that I have shared before. Comment me how you like this Color Palette Generator.

Creating a color palette in HTML involves using HTML for structure and CSS for styling. Here’s a simple example:

HTML:

<body>
<div class=“color-palette”>
<div class=“color” style=“background-color: #ff5733;”></div>
<div class=“color” style=“background-color: #33ff57;”></div>
<div class=“color” style=“background-color: #5733ff;”></div>
</div>
</body>

CSS:

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.color-palette {
display: flex;
justify-content: space-around;
}

.color {
width: 50px;
height: 50px;
border-radius: 4px;
margin: 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}

.color:hover {
transform: scale(1.1);
}

To create a color palette using JavaScript, you can dynamically generate color elements and apply styles to them based on a set of colors. Here’s a simple example:

HTML:

<div class=“color-palette” id=“colorPalette”></div>

JS:

// Define an array of colors
const colors = [‘#FF5733’, ‘#33FF57’, ‘#5733FF’, ‘#FF33A1’, ‘#33A1FF’];

// Function to create and display the color palette
function createColorPalette() {
const colorPaletteContainer = document.getElementById(‘colorPalette’);

// Loop through the colors array
colors.forEach(color => {
// Create a div element for each color
const colorBlock = document.createElement(‘div’);
colorBlock.className = ‘color’;
colorBlock.style.backgroundColor = color;

// Append the color block to the color palette container
colorPaletteContainer.appendChild(colorBlock);
});
}

// Call the function to generate the color palette
createColorPalette();

CSS:

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.color-palette {
display: flex;
justify-content: space-around;
}

.color {
width: 50px;
height: 50px;
border-radius: 4px;
margin: 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}

.color:hover {
transform: scale(1.1);
}

 

Source Code

Leave a Comment

Home
Menu
Instagram
Search