Color Palette Generator

Color Palette Generator

Select a primary color:

Complementary:

Analogous:

Triadic:

How to Use the Color Palette Generator:

1. Pick a Primary Color: Use the color picker to select a base color.
2. Generate Color Palettes: Once a color is selected, the tool will automatically generate:
   • Complementary Color: A color that is on the opposite side of the color wheel.
   • Analogous Colors: Colors that are adjacent to the primary color on the color wheel.
   • Triadic Color: A color that forms an equilateral triangle with the primary color on the color wheel.
3. Apply in Your Projects: Use the colors in painting, decorating, or any design project to create a balanced and harmonious look.

Note: Always test paint or design colors in your actual space and lighting conditions before finalizing your selections.

[tcb-script] function generatePalette() { let primaryColor = document.getElementById('primaryColor').value; let complementaryColor = getComplementaryColor(primaryColor); let analogousColors = getAnalogousColors(primaryColor); let triadicColor = getTriadicColor(primaryColor); document.getElementById('complementaryColor').style.backgroundColor = complementaryColor; document.getElementById('complementaryColorText').textContent = complementaryColor; document.getElementById('analogousColor1').style.backgroundColor = analogousColors[0]; document.getElementById('analogousColor1Text').textContent = analogousColors[0]; document.getElementById('analogousColor2').style.backgroundColor = analogousColors[1]; document.getElementById('analogousColor2Text').textContent = analogousColors[1]; document.getElementById('triadicColor').style.backgroundColor = triadicColor; document.getElementById('triadicColorText').textContent = triadicColor; } function getComplementaryColor(color) { let r = parseInt(color.slice(1, 3), 16); let g = parseInt(color.slice(3, 5), 16); let b = parseInt(color.slice(5, 7), 16); r = (255 - r).toString(16).padStart(2, '0'); g = (255 - g).toString(16).padStart(2, '0'); b = (255 - b).toString(16).padStart(2, '0'); return `#${r}${g}${b}`; } function getAnalogousColors(color) { let hsl = rgbToHsl(color); let h1 = (hsl[0] - 30 + 360) % 360; let h2 = (hsl[0] + 30) % 360; return [hslToRgb(h1, hsl[1], hsl[2]), hslToRgb(h2, hsl[1], hsl[2])]; } function getTriadicColor(color) { let hsl = rgbToHsl(color); let h = (hsl[0] + 120) % 360; return hslToRgb(h, hsl[1], hsl[2]); } function rgbToHsl(color) { let r = parseInt(color.slice(1, 3), 16) / 255; let g = parseInt(color.slice(3, 5), 16) / 255; let b = parseInt(color.slice(5, 7), 16) / 255; let max = Math.max(r, g, b); let min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { let d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [(h * 360 + 0.5) | 0, (s * 100 + 0.5) | 0, (l * 100 + 0.5) | 0]; } function hslToRgb(h, s, l) { let r, g, b; h = h / 360; s = s / 100; l = l / 100; if (s === 0) { r = g = b = l; } else { function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; } let q = l < 0.5 ? l * (1 + s) : l + s - l * s; let p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return `#${Math.round(r * 255).toString(16).padStart(2, '0')}${Math.round(g * 255).toString(16).padStart(2, '0')}${Math.round(b * 255).toString(16).padStart(2, '0')}`; }[/tcb-script]