Color Palette Generator in Javascript

Publish in Javascript el 19/05/2025 15:51

As someone passionate about design and front-end development, I’ve always been fascinated by how colors can shape the mood and usability of a project. That’s why I built this interactive color palette generator — a lightweight yet powerful tool that helps designers and developers create stunning, harmonious color schemes right in the browser.

This tool uses the Chroma.js library, a fantastic utility for handling color manipulations in JavaScript. It allows users to generate palettes based on different color theories — from complements to triads — all while customizing the number of colors they want in their output.

Let me walk you through how it works and what makes it special.

Core Features

1. Live Color Picker

The base color input lets users select any starting point using a native HTML5 color picker. The moment a new color is selected, the palette updates instantly.

2. Palette Type Selection

I’ve implemented several classic color harmony rules:

Complement : Generates two contrasting colors opposite each other on the color wheel.
Analogic : Creates a soft and cohesive palette using adjacent hues.
Triad : Forms a triangle of evenly spaced hues for vibrant contrast.
Tetrad (Double-complement) : Offers a balanced four-color scheme.
Monochrome : Focuses on lightness variations of a single hue.

Each option ensures flexibility depending on the visual effect you’re aiming for.

3. Customizable Number of Colors

Want a minimalist 3-color palette or something more complex with 9 shades? Just select your preferred count, and the generator will interpolate the steps between key colors using Chroma’s LAB color space interpolation for smooth transitions.

4. Dynamic Display

Once generated, the colors are rendered as clickable, labeled color swatches. Each box displays the hex value of the color and applies a subtle shadow for legibility and depth.

Technical Insights

Under the hood, the generatePalette() function handles all logic:

It reads values from the inputs (base color, palette type, and number of colors)
Depending on the selected type, it calculates the appropriate color shifts using .set("hsl.h", "+X") to rotate the hue angle.
Then, it interpolates between those key points using chroma.scale().mode("lab").colors(n) ensuring perceptually uniform gradients.

The final result is passed to displayPalette() , which dynamically creates divs with inline background styles and labels — no external rendering engines needed.

Play Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>
<style>
	body {
		font-family: Arial, sans-serif;
		text-align: center;
		padding: 20px;
	}
	#palette {
		display: flex;
		flex-direction: column;
        align-items: center;
		justify-content: center;
		margin-top: 20px;
	}
	.color-box {
		width: 100%;
		height: 36px;
		margin: 5px;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		display: flex;
        justify-content: center;
        align-items: center;
	}
	.color-box span{
	    color: white;
	    text-shadow: 2px 2px 4px black;
	}

</style>

<input type="color" id="baseColor" value="#3498db" onchange="generatePalette()">

<select id="colorCount" onchange="generatePalette()">
    <option value="" disabled selected hidden>Number of Colors</option>
	<option value="3">3</option>
	<option value="5">5</option>
	<option value="7">7</option>
	<option value="9">9</option>
</select>

<select id="paletteType" onchange="generatePalette()">
    <option value="" disabled selected hidden>Palette Type</option>
	<option value="complement">Complement</option>
	<option value="analogic">Analogic</option>
	<option value="triad">Triad</option>
	<option value="tetrad">Tetrad</option>
	<option value="monochrome">Monochrome</option>
</select>

<div id="palette"></div>
                
                
<script>
function generatePalette() {
	const colorCount = parseInt(document.getElementById("colorCount").value);
	const paletteType = document.getElementById("paletteType").value;
	const baseColor = chroma(document.getElementById("baseColor").value);

	let colors = [];

	switch (paletteType) {
		case "complement":
			colors = [baseColor.hex(), chroma(baseColor).set("hsl.h", "+180").hex()];
			colors = chroma.scale(colors).mode("lab").colors(colorCount);
			break;
		case "analogic":
			colors = chroma.scale([
				chroma(baseColor).set("hsl.h", "-30").hex(),
				baseColor.hex(),
				chroma(baseColor).set("hsl.h", "+30").hex()
			]).mode("lab").colors(colorCount);
			break;
		case "triad":
			colors = [
				baseColor.hex(),
				chroma(baseColor).set("hsl.h", "+120").hex(),
				chroma(baseColor).set("hsl.h", "+240").hex()
			];
			colors = chroma.scale(colors).mode("lab").colors(colorCount);
			break;
		case "tetrad":
			colors = [
				baseColor.hex(),
				chroma(baseColor).set("hsl.h", "+90").hex(),
				chroma(baseColor).set("hsl.h", "+180").hex(),
				chroma(baseColor).set("hsl.h", "+270").hex()
			];
			colors = chroma.scale(colors).mode("lab").colors(colorCount);
			break;
		case "monochrome":
			colors = chroma.scale([chroma(baseColor).brighten(2), baseColor.darken(2)])
							.mode("lab").colors(colorCount);
			break;
	}

	displayPalette(colors);
	return colors;
}

function displayPalette(colors) {
	const paletteDiv = document.getElementById("palette");
	paletteDiv.innerHTML = "";

	colors.forEach(color => {
		const colorBox = document.createElement("div");
		colorBox.className = "color-box";
		colorBox.style.backgroundColor = color;
		

		const colorText = document.createElement("span");
		colorText.textContent = color.toUpperCase();
		

		colorBox.appendChild(colorText);
		paletteDiv.appendChild(colorBox);
	});
}
</script>

Why Use This Tool?

This isn’t just another online color generator. It’s fully embeddable, customizable, and open-source — perfect for integrating into tutorials, design systems, or even your own projects. You can tweak the CSS, expand the functionality, or export the palette data for use elsewhere.

Since it runs entirely in the browser, there’s no need for server-side processing or API calls. Everything happens client-side, making it fast, responsive, and private.

Want to Try It Yourself?

Just copy and paste the code into your favorite HTML editor or test it directly in the live code-sharing tool I built on artdraw . Modify the code, click “Run”, and see your changes reflected immediately — no setup required.

Whether you’re designing a website, creating a brand identity, or experimenting with UI themes, this generator gives you a solid foundation to start building with confidence.

So go ahead — play with the hues, explore the combinations, and bring your creative vision to life with smart, science-backed color choices.

Let me know if you build something cool with it — I’d love to see it!