DEV Community

Cover image for How to identify color from an RGB value
Tebogo Nomnqa
Tebogo Nomnqa

Posted on • Edited on • Originally published at tebza.dev

How to identify color from an RGB value

This article is a supplement to the recent project I built Color Dash (formerly Guess the color game), you can play the game here and read about its making here.

edit: change game name to Color Dash

RGB color space

is a mathematical model used to represent color. Compromising of three channels: red, green, and blue. Each of these channels has a value between 0 - 255. The value represents how much of each color channel should be added together.

To identify the color represented by an RGB value, we first need to know the colors at their

purest forms

RGB(0,0,0) gives you black simply because there's no color.

and RGB(255,255,255) which is all of the colors combined gives you white.

Black and white.png

red is rgb(256,0,0) ; green rgb(0,256,0); blue rgb(0,0,256)

RGB.png

basic color combinations of the three colors

red and green => yellow. Playing with just the two we get to brown and dark olive.

RGB(256,256,0) ; RGB(100,100,0); RGB(50,50,0)

Image description

red and blue => pink. Playing with just the two we get to purple

RGB(256, 0, 256) ; RGB(100, 0, 100) ; RGB(50, 0, 50)

pink to purple.png

green and blue (0,256,256) => aqua to teal, dark green

RGB(0,256,256) , RGB(0,100,100) , RGB(0,50,50)

aqua to dark green.png

👀 notice that as the values decrease, the color gets darker.

Now to put what we learned to good use

Example 1

given this random color code and other random colors
identify the correct color

example 1.jpg

( the code and the colors are taken from Color Dash😉 )

First We identify the dominating color hue(s). It is green with a whopping 110, followed by 53 blue and 17 red.

Of the 6 given colors, only three are green, but the correct type of green is the darker one because of 110. Remember as you go up to 255 the color gets lighter.

Example 2

example 2.jpg

Again we first identify the dominating color hue(s):
green with 235, blue with 217, and red with 157.

two colors dominate here, and we know that green and blue make aqua. so our best guess here is the one close to aqua. Which is the first color.

Conclusion

Now it's your turn. Apply these tips and see if you can break my high score of 60! If you also have any tips share them!✌️

Top comments (0)