RGB: the implementation model
Three light emitters form each pixel of a display
→
Hex: #FFFFFF
Using RGB
or
Then use the number controls above to experiment with this model.
- Starting with Red, Green, and Blue at their maximum value, use the All control to lower them equally, producing shades of gray █ █ down to black.
- Now bring Red to its full value, going through progressively lighter █ █ shades. In HSL, saturation immediately jumps to 100%, light increases gradually to 50%.
- Add Green. The color (hue) moves through orange █ to yellow. Take Red back down to 0 for pure green; Blue to 255 for Cyan; Green to 0 for Blue; Red to 255 for Magenta. Saturation and light remain the same throughout.
- With full Red and Blue, gradually add Green again. The color is still magenta, but it is becoming lighter █ and lighter █. Leaving Green a little lower, reduce both Red and Blue; you've now desaturated █ the color. Play with intermediate values of all three colors to produce any combination you like.
You can work with HSL and RGB models together on our Demo page, and see both models discussed in our Video.
To use the RGB model for Web stylesheets (css), the format is: "rgb(rrr, ggg, bbb)", where "rrr", "ggg", and "bbb" represent the red, green, and blue values that you have set in the controls above. You can also use the hexidecimal value exactly as it is shown above, starting with the "#" sign.