<div class="palette-container">
  <div class="colors">
    <div class="color-box" id="c1"></div>
    <div class="color-box" id="c2"></div>
    <div class="color-box" id="c3"></div>
    <div class="color-box" id="c4"></div>
  </div>
  <button onclick="generatePalette()">Generate New Palette</button>
</div>

.palette-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}
.colors {
  display: flex;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.color-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
button {
  padding: 10px 20px;
  background: #1f2937;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

function generatePalette() {
  const boxes = document.querySelectorAll(".color-box");
  boxes.forEach(box => {
    const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, "0");
    box.style.backgroundColor = randomColor;
    box.innerText = randomColor;
  });
}
// Init
generatePalette();

Back to Snippets

Simple Color Palette Generator JS

Inspire designers with this random color palette generator. Click the button to create new color schemes instantly and see the hex codes, which is perfect for design tools or mood boards.

447

#javascript

#css

#color

#palette

#generator

#random

#design

#tool

/HTML *CSS ()JS Output Live Updates

Simple Color Palette Generator JS

Share Code Snippet