Color mixer

A visual color picker built with three range sliders — one each for red, green, and blue. Drag to mix, watch the color change in real-time.

The Challenge

Create an interactive UI where three sliders control RGB values, displaying the resulting color as the sliders move.

Requirements:

• Three range inputs (0–255) for R, G, B values
• Display the mixed color in a large preview area
• Show the current hex code
• Sliders should feel smooth and responsive
• Mobile-friendly layout

What I Learned

This kata teaches two things:

1. Input events and real-time feedback — Using input event (fires on every drag) vs change event (fires on release). The input event is what makes the color update feel immediate.

2. Color math — Converting RGB to hex is straightforward: (r * 65536 + g * 256 + b).toString(16). The reverse is just shifting and masking.

Code Sketch

const red = document.querySelector("#red-slider");
const green = document.querySelector("#green-slider");
const blue = document.querySelector("#blue-slider");
const preview = document.querySelector(".color-preview");
const hexCode = document.querySelector(".hex-code");

function updateColor() {
  const r = parseInt(red.value);
  const g = parseInt(green.value);
  const b = parseInt(blue.value);

  const hex = `#${(r * 65536 + g * 256 + b).toString(16).padStart(6, "0")}`;

  preview.style.backgroundColor = hex;
  hexCode.textContent = hex;
}

red.addEventListener("input", updateColor);
green.addEventListener("input", updateColor);
blue.addEventListener("input", updateColor);

Why This Matters

Sliders are everywhere — volume controls, brightness, playback position. Understanding how they work and how to connect them to live preview is foundational UI work.