Color Scheme Generator

Color Scheme Generator Tool

Base Color: Scheme Type: Analogous Monochromatic Triad Complementary

body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100vh; } .container { text-align: center; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; } .controls { margin-bottom: 20px; } label, select { margin-right: 10px; } .color-scheme { display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 20px; } .color-box { width: 100px; height: 100px; margin: 5px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } /* Add more styling as needed */ function generateColorScheme() { const baseColorInput = document.getElementById('baseColor'); const schemeTypeSelect = document.getElementById('schemeType'); const colorSchemeContainer = document.getElementById('colorScheme'); const baseColor = tinycolor(baseColorInput.value); const schemeType = schemeTypeSelect.value; colorSchemeContainer.innerHTML = ''; for (let i = 0; i < 5; i++) { let newColor; switch (schemeType) { case 'analogous': newColor = baseColor.analogous(i * 15).toString(); break; case 'monochromatic': newColor = baseColor.darken(i * 10).toString(); break; case 'triad': newColor = baseColor.triad()[i].toString(); break; case 'complementary': newColor = baseColor.complement().toString(); break; default: newColor = baseColor.toString(); } const colorBox = document.createElement('div'); colorBox.style.backgroundColor = newColor; colorBox.classList.add('color-box'); colorBox.textContent = newColor; colorSchemeContainer.appendChild(colorBox); } }