Color Blender
</p> <p> body {</p> <p> font-family: sans-serif;</p> <p> padding: 20px;</p> <p> }</p> <p> #colorBox {</p> <p> width: 200px;</p> <p> height: 200px;</p> <p> background-color: white;</p> <p> border: 2px solid #ccc;</p> <p> margin-bottom: 20px;</p> <p> }</p> <p> .swatch {</p> <p> display: inline-block;</p> <p> width: 40px;</p> <p> height: 40px;</p> <p> margin: 5px;</p> <p> cursor: pointer;</p> <p> border: 2px solid transparent;</p> <p> }</p> <p> .swatch.selected {</p> <p> border-color: black;</p> <p> }</p> <p>
</p> <p> const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'cyan'];</p> <p> const swatchesContainer = document.getElementById('swatches');</p> <p> const colorBox = document.getElementById('colorBox');</p> <p> let selectedColors = [];</p> <p></p> <p> // Create swatches</p> <p> colors.forEach(color => {</p> <p> const swatch = document.createElement('div');</p> <p> swatch.className = 'swatch';</p> <p> swatch.style.backgroundColor = color;</p> <p> swatch.dataset.color = color;</p> <p> swatch.addEventListener('click', () => toggleColor(swatch));</p> <p> swatchesContainer.appendChild(swatch);</p> <p> });</p> <p></p> <p> function toggleColor(swatch) {</p> <p> const color = swatch.dataset.color;</p> <p> if (selectedColors.includes(color)) {</p> <p> selectedColors = selectedColors.filter(c => c !== color);</p> <p> swatch.classList.remove('selected');</p> <p> } else {</p> <p> selectedColors.push(color);</p> <p> swatch.classList.add('selected');</p> <p> }</p> <p> updateBlendedColor();</p> <p> }</p> <p></p> <p> function updateBlendedColor() {</p> <p> if (selectedColors.length === 0) {</p> <p> colorBox.style.backgroundColor = 'white';</p> <p> return;</p> <p> }</p> <p></p> <p> const rgbValues = selectedColors.map(color => getRGB(color));</p> <p> const blended = rgbValues.reduce((acc, rgb) => {</p> <p> acc.r += rgb.r;</p> <p> acc.g += rgb.g;</p> <p> acc.b += rgb.b;</p> <p> return acc;</p> <p> }, { r: 0, g: 0, b: 0 });</p> <p></p> <p> const count = selectedColors.length;</p> <p> const avgColor = `rgb(${Math.round(blended.r / count)}, ${Math.round(blended.g / count)}, ${Math.round(blended.b / count)})`;</p> <p> colorBox.style.backgroundColor = avgColor;</p> <p> }</p> <p></p> <p> function getRGB(color) {</p> <p> const temp = document.createElement('div');</p> <p> temp.style.color = color;</p> <p> document.body.appendChild(temp);</p> <p> const rgb = window.getComputedStyle(temp).color;</p> <p> document.body.removeChild(temp);</p> <p></p> <p> const match = rgb.match(/\d+/g);</p> <p> return {</p> <p> r: parseInt(match[0]),</p> <p> g: parseInt(match[1]),</p> <p> b: parseInt(match[2])</p> <p> };</p> <p> }</p> <p>