C⊙l⊙r L⊙⊙p

match the target color!

Spacebar: stop slider/new game

Choose Mode:

RGB Red, Green, Blue

HSL Hue, Saturation, Lightness

RGB Color Model

RGB uses Red, Green, and Blue light to create all colors.

Each channel ranges from 0-255, where mixing creates new colors:

Red (255, 0, 0)

Green (0, 255, 0)

Blue (0, 0, 255)

Yellow (255, 255, 0)

Magenta (255, 0, 255)

Cyan (0, 255, 255)

RGB Sliders Demo

Try to make orange by adjusting the RGB sliders:

Orange (255, 128, 0)

R 128

G 128

B 128

HSL Color Model

HSL uses Hue, Saturation, and Lightness to create all colors.

Each channel has different ranges and creates different effects:

Red (0°, 100%, 50%)

Green (120°, 100%, 50%)

Blue (240°, 100%, 50%)

Yellow (60°, 100%, 50%)

Magenta (300°, 100%, 50%)

Cyan (180°, 100%, 50%)

White (0°, 0%, 100%)

Black (0°, 0%, 0%)

Hue (0° - 360°)

The color itself - like a color wheel

Saturation (0% - 100%)

How vivid the color is - from gray to pure color

Lightness (0% - 100%)

How bright the color is - from black to white

HSL Sliders Demo

Try to make purple by adjusting the HSL sliders:

Purple (270°, 100%, 50%)

H 180

S 50

L 50

R 128

G 128

B 128

Attempt:

1st

2nd

3rd

Target

Best
Attempt Target Diff

R 0 0 (+0)

G 0 0 (+0)

B 0 0 (+0)