Code Colours

Code: Thanks to Gemini

<!DOCTYPE html>

<head>

<title>Color Palette Generator</title>

<style>

body {

font-family: 'Inter', sans-serif;

background-color: #f3f4f6;

color: #1f2937;

}

</style>

</head>

<h1 class="text-3xl font-bold text-center mb-6 text-gray-800">Color Palette Generator</h1>

Click on a color to add it to your custom palette below.

</p>

<h2 class="text-xl font-bold text-gray-700 mb-4">Click to select colors:</h2>

</div>

Your Selected Colors:

(<span id="color-count">0</span> colors)

</span>

</h2>

</div>

Copy Code

</button>

</div>

<span id="copy-message" class="absolute top-2 right-4 text-xs text-green-400 opacity-0 transition-opacity duration-300">Copied!</span>

</div>

Please add at least one color before generating the code.

</div>

document.addEventListener('DOMContentLoaded', () => {

const swatchesContainer = document.getElementById('swatches-container');

const selectedPaletteContainer = document.getElementById('selected-palette-container');

const customPaletteContainer = document.getElementById('custom-palette-container');

const colorCountSpan = document.getElementById('color-count');

const copyCodeBtn = document.getElementById('copy-code-btn');

const codeOutputContainer = document.getElementById('code-output-container');

const codeOutput = document.getElementById('code-output');

const copyMessage = document.getElementById('copy-message');

const messageBox = document.getElementById('message-box');

let selectedColors = [];

// Function to show a custom message

const showMessage = (text) => {

messageBox.textContent = text;

messageBox.classList.remove('hidden');

setTimeout(() => {

messageBox.classList.add('hidden');

}, 3000);

};

// Function to convert HSL to Hexadecimal color string

const hslToHex = (h, s, l) => {

l /= 100;

const a = s * Math.min(l, 1 - l) / 100;

const f = n => {

const k = (n + h / 30) % 12;

const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);

return Math.round(255 * color).toString(16).padStart(2, '0');

};

return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();

};

// Function to create and append a color swatch

const createSwatch = (container, color, isRemovable = false) => {

const swatch = document.createElement('div');

swatch.className = `w-6 h-6 rounded-md shadow-sm cursor-pointer transition-transform duration-100 hover:scale-110`;

swatch.style.backgroundColor = color;

if (isRemovable) {

// Add a click listener to remove the color from the custom palette

swatch.addEventListener('click', () => {

const index = selectedColors.indexOf(color);

if (index > -1) {

selectedColors.splice(index, 1);

}

refreshCustomPalette();

});

} else {

// Add a click listener to add the color to the custom palette

swatch.addEventListener('click', () => {

if (!selectedColors.includes(color)) {

selectedColors.push(color);

refreshCustomPalette();

}

});

}

container.appendChild(swatch);

};

// Function to generate the code and update the display

const generateAndDisplayCode = () => {

if (selectedColors.length === 0) {

codeOutputContainer.classList.add('hidden');

copyCodeBtn.classList.add('hidden');

return;

}

const formattedColors = selectedColors.map(color => `'${color}'`).join(', ');

const codeString = `const palette = [${formattedColors}];`;

codeOutput.textContent = codeString;

codeOutputContainer.classList.remove('hidden');

copyCodeBtn.classList.remove('hidden');

};

// Refresh the display of the custom palette and update the counter

const refreshCustomPalette = () => {

customPaletteContainer.innerHTML = '';

if (selectedColors.length > 0) {

selectedPaletteContainer.classList.remove('hidden');

selectedColors.forEach(color => createSwatch(customPaletteContainer, color, true));

} else {

selectedPaletteContainer.classList.add('hidden');

}

colorCountSpan.textContent = selectedColors.length;

generateAndDisplayCode();

};

// Function to generate and display the main color spectrum

const generateAndDisplaySpectrum = () => {

// Define 15 base hues for a diverse palette, with pinks and purples grouped at the top

const baseHues = [320, 300, 280, 260, 220, 200, 190, 180, 150, 100, 60, 30, 0, 20, 0];

baseHues.forEach((hue, index) => {

const rowContainer = document.createElement('div');

rowContainer.className = 'flex flex-wrap gap-1 justify-start w-full';

swatchesContainer.appendChild(rowContainer);

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

// Special handling for red, brown and grey rows

let saturation;

if (index === 12) { // Red row (new position)

saturation = 70 + (i % 3) * 10;

} else if (index === 13) { // Brown row (new position)

saturation = 50 - (i / 19) * 30;

} else if (index === 14) { // Grey row (new position)

saturation = 5;

} else {

saturation = 50 + (i % 3) * 15;

}

const lightness = 95 - (i / 19) * 60; // Light to darker, but not too dark

const hexColor = hslToHex(hue, saturation, lightness);

createSwatch(rowContainer, hexColor);

}

});

};

// Event listener for the "Copy Code" button

copyCodeBtn.addEventListener('click', () => {

const textToCopy = codeOutput.textContent;

// Use a more reliable method for copying text to the clipboard

const tempInput = document.createElement('textarea');

tempInput.value = textToCopy;

document.body.appendChild(tempInput);

tempInput.select();

try {

document.execCommand('copy');

copyMessage.classList.add('opacity-100');

setTimeout(() => {

copyMessage.classList.remove('opacity-100');

}, 1500);

} catch (err) {

console.error('Failed to copy text: ', err);

}

document.body.removeChild(tempInput);

});

// Generate the spectrum when the page first loads

generateAndDisplaySpectrum();

});

</script>

</body>

</html>