Make a Color Palette Generator Website

Making a color palette generator website is a fun project. Using the color-mix() function (introduced in Chrome 111, Firefox 113, Edge 111 and Safari 16.2), you can create beautiful palettes using only HTML, CSS and Javascript.

Note that the code samples are licensed under the MIT License instead of CC BY-SA.

Supplies

There are very few things needed to make a color palette generator website.

A computer (Windows 7+ or macOS 10.12 Sierra or later) or a mobile device (Android 5.0+ / iOS 16.2+)
A web browser
Computers: Windows 7 / 8.1 / macOS 10.12-10.14: Firefox 115 ESR / Windows 10 / 11 / macOS 10.15+: latest version of any supported browser (Chrome / Firefox / Edge / Safari)
Mobile: Android: Firefox (Android 5.0+) or Chrome (Android 7.0+) / iOS: Safari iOS 16.2+
An IDE or a code editor (Visual Studio Code for desktop, GitHub Codespaces online, or search for code editor/IDE on Play Store or App Store on Android or iOS).

Set Up the HTML Structure

First, create a file named "index.html" and insert the code into the code editor. This will form the basis of the website.

<!DOCTYPE html>

<html>

<head>

<title>Color Palette Generator</title>

</head>

<body>

</body>

</html>

Add HTML Content

Add the following HTML code inside the <body> tag, above <script> tags. Replace [AUTHOR] with your name.

<h1>

Color Palette Generator

</h1>

<p>

Color Palette Generator uses <code>color-mix()</code> function, which requires Chrome 111+, Edge 111+, Firefox 113+, Safari 16.2+ or Opera 97+, but this browser is too old for this tool. Please consider updating the browser.

</p>

<p>

<strong>Windows 7/8 users using Chrome or IE:</strong> Please install and use Firefox 115 ESR instead of Chrome 109 or IE 11, which the latter two don't support this tool.

</p>

</div>

<p></p>

<label for="from" class="form-label" style="display: block;">Starting color</label>

</div>

<label for="to" class="form-label" style="display: block;">Finishing color</label>

</div>

<label for="steps" class="form-label" style="display: block;">Number of steps</label>

</div>

<label for="method" class="form-label" style="display: block;">Method</label>

<option value="srgb-linear">srgb-linear</option>

<option value="display-p3">display-p3</option>

<option value="prophoto-rgb">prophoto-rgb</option>

<option value="hsl shorter hue">hsl shorter hue</option>

<option value="hsl longer hue">hsl longer hue</option>

<option value="hwb shorter hue">hwb shorter hue</option>

<option value="hwb longer hue">hwb longer hue</option>

<option value="oklab"selected>oklab</option>

<option value="lch shorter hue">lch shorter hue</option>

<option value="lch longer hue">lch longer hue</option>

<option value="oklch shorter hue">oklch shorter hue</option>

<option value="oklch longer hue">oklch longer hue</option>

</select>

</div>

<button type="button" class="btn btn-primary btn-block my-3" onclick="submitColorPalette()">Submit</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>

</p>

</div>

Add Some CSS to Only Show the Tool When the Browser Is Supported

Create a CSS file, named styles/style.css and add the following CSS code. This will check if the tool is supported and the tool will only show if the browser is supported; otherwise a warning will show.

.supported-browser {

display: none;

}

@supports (color: color-mix(in srgb, red 50%, blue 50%)) {

.unsupported-browser {

display: none;

}

.supported-browser {

display: block;

}

Add Some JavaScript Code

Create a file named "script.js" and enter the JavaScript code below. This is needed to make the color palette generator work. Once finished, test the code on a browser and make corrections if needed.

const colorPaletteResult = document.getElementById("color-palette-result");

const fromColorText = document.getElementById("from-color-text");

const toColorText = document.getElementById("to-color-text");

function updateColorText() {

const fromColor = document.getElementById("from").value;

const toColor = document.getElementById("to").value;

fromColorText.textContent = fromColor; // Update the text for from-color-text

toColorText.textContent = toColor; // Update the text for to-color-text

}

function submitColorPalette() {

var fromColor = document.getElementById("from").value;

var toColor = document.getElementById("to").value;

var steps = document.getElementById("steps").value;

var method = document.getElementById("methods").value;

colorPaletteResult.innerHTML = "";

for (let i = 0; i < steps; i++) {

var colorPaletteDiv = document.createElement("div");

colorPaletteDiv.className = "col-4 col-sm-3 col-md-2 col-xl-1";

var colorPaletteDivInner = document.createElement("div");

colorPaletteDivInner.className = "py-5 my-2 w-auto rounded";

colorPaletteDivInner.style.backgroundColor = "color-mix(in " + method + ", " + fromColor + ", " + toColor + " " + (i / (steps - 1)) * 100 + "%)";

colorPaletteResult.appendChild(colorPaletteDiv);

colorPaletteDiv.appendChild(colorPaletteDivInner);

}

// Add event listeners to update the color text when the color inputs change

document.getElementById("from").addEventListener("input", updateColorText);

document.getElementById("to").addEventListener("input", updateColorText);

Finished!

The project is now complete!