Deviopath › React

RGB Color Mixer

Medium · Forms

Build an RGB color mixer.

Render three sliders <input type="range" min="0" max="255"> with the classes red, green and blue. They start at red 255, green 128 and blue 0.

Show the mixed color:

- <div className="swatch"> whose inline style backgroundColor is the color, e.g. rgb(255, 128, 0)

- <p className="rgb">rgb(255, 128, 0)</p>

- <p className="hex">#FF8000</p> (uppercase, always 2 digits per channel)

Add two buttons: "Invert" replaces every channel with 255 - value, and "Reset" goes back to the starting color.

The sliders must always show the current values (controlled inputs). Remember that e.target.value is a string.

Next: Poll with Percentages