TYPE html>
Color Scheme Generator
Base Color
Complementary
Analogous
Triadic
document.getElementById(‘generateScheme’).addEventListener(‘click’, generateColorScheme);
function generateColorScheme() {
const baseColor = document.getElementById(‘baseColor’).value;
const baseColorObj = chroma(baseColor);
document.getElementById(‘base’).style.backgroundColor = baseColor;
document.getElementById(‘complementary’).style.backgroundColor = baseColorObj.saturate(2).hex();
document.getElementById(‘analogous’).style.backgroundColor = baseColorObj.set(‘hsl.h’, ‘+=30’).hex();
document.getElementById(‘triadic’).style.backgroundColor = baseColorObj.set(‘hsl.h’, ‘+=120’).hex();
}
