Color Scheme Generator Tool with colorful styling and all its features use any free library...

 

Color Scheme Generator

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f0f0f0; } .container { max-width: 600px; margin: 50px auto; text-align: center; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; } input[type="color"] { width: 100%; height: 50px; border: none; border-radius: 5px; cursor: pointer; } button { margin-top: 20px; padding: 10px 20px; border: none; background-color: #3498db; color: #fff; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #2980b9; } .color-schemes { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .color-scheme { padding: 20px; border-radius: 5px; color: #fff; text-align: center; transition: transform 0.3s; } .color-scheme:hover { transform: scale(1.05); } document.getElementById('generateBtn').addEventListener('click', () => { const baseColor = document.getElementById('baseColor').value; const colorSchemes = document.getElementById('colorSchemes'); // Clear previous schemes colorSchemes.innerHTML = ''; // Generate color schemes const colors = [ chroma(baseColor).brighten(1).hex(), chroma(baseColor).darken(1).hex(), chroma(baseColor).saturate(2).hex(), chroma(baseColor).desaturate(2).hex(), chroma(baseColor).spin(30).hex(), chroma(baseColor).spin(-30).hex() ]; // Create color scheme elements colors.forEach(color => { const colorDiv = document.createElement('div'); colorDiv.className = 'color-scheme'; colorDiv.style.backgroundColor = color; colorDiv.textContent = color; colorDiv.style.color = chroma(color).luminance() < 0.5 ? '#fff' : '#000'; // Adjust text color for contrast colorSchemes.appendChild(colorDiv); }); });