COLORBLIND GUIDE
All you need to know about color blindness
THE CREATIVE COURSE
Proven Guide For Colorblind Artists & Designers
Understanding color schemes, navigating color codes, and choosing the right colors for your projects are all made easy with this course for colorblind artists & designers!
Click here to start this FREE online course from the beginning.
6. USE COLOR PICKER
AS A COLORBLIND ARTIST OR DESIGNER, HOW SHOULD I USE THE COLOR PICKER?
ON THIS PAGE:
Many programs include a Color Picker feature that allows the user to select a specific color to work with. We must learn how to use the color picker because we frequently fail to recognize the color we are looking for and, as a result, select the incorrect color. I will explain all the necessary information on how to choose colors like purple, magenta, or pink.
-
RGB color system model:
RGB stands for Red, Green, and Blue.
.
It’s all about a dark environment and light. If in a dark environment you add red light and then add green light together, it will seem yellow. Isn’t amazing?
We use the RGB model on all digital screens because they create lights. So if you closely look at the screen's pixels, you will see that they are made up of tiny little red, green, and blue lights. If we mix full red light with blue and green, the result will be white color, or, as we see it on screen, white light. So in this system, it's all about lights, remember?
To your knowledge, some screen companies add white light to the RGB instead of using all three lights to make white light separately, and because the screen doesn't need to use all three RGB lights to make white light, it helps the screen lights work longer without losing power and saves more power.It’s good to make a gray color too. So we can call it RGBW.
The Mystery of Magenta
-
CMYK COLOR SYSTEM
CMYK stands for Cyan, Magenta, Yellow, and Key color. To understand CMYK, we need to know how ink or paint works.
CMYK is the opposite of RGB or RGBW because it’s not about lights but about real physical colors like ink and pigments for the printing industry or painting.
If you remember, we see leaves as green in color because they don’t absorb the green color of the white light they reflect. We use the same thing in the CMYK system.
For printing green on paper, the printer will print a layer of cyan and a layer of yellow, and we will see it as green.
For printing a red color, the printer will print a layer of magenta followed by a layer of yellow, and then we will see it as red.
In the end, K is the key color in printing, which is black. We can make black by printing layers of cyan, magenta, and yellow on top of each other, but we use simple black color because we use a lot of black, just like we use a lot of white light in RGBW.
NOW, HOW IS IT RELATED TO THE SOFTWARE’S COLOR PICKER?
Like a color wheel, we use a color system in software. By learning how this system works, we can easily choose the right color we are looking for or guess the colors of different objects on the screen.
If you remember, I said:
A color can be defined by hue (0°–360°), saturation (0%–100%), and lightness (0%–100%).
By having the RGB and CMY systems on a circle, we will have this color circle, and this is exactly what we use to select hues in HSB or HSV color picker software.
A circle has 360 degrees because it is divided into 360 parts, each of which is called one degree.This is why we defined color hue from 0 to 360 degrees.
It begins at 0 on the top, in which the red color is there and followed by the yellow color at 60 degrees, the green color at 120 degrees, cyan at 180 degrees, blue at 240 degrees, magenta at 300 degrees, and red at 360 degrees again.
So, on a circle, 0 and 360 degrees are in the same place.
There are other colors in the circle too, and we can find them by knowing to what degree they are placed, for example, the orange color:
We know orange is a mixture of red and yellow, so red is 0 and yellow is 60, so in the middle is 30, and exactly the orange color is at 30 degrees.
So when we want to use an orange color in the software, we open a color picker, and on the H, which is hue, we write 30 degrees, and we will have an orange color.
By changing the saturation and brightness, or value, we can have a different type of orange color according to our needs.
By typing 30 on the H, we can be 100% sure that we selected the orange color, even if we can’t see it perfectly.
So if most colorblind people cannot see the difference between purple, magenta, and violet, how can we use them in digital projects and artworks?
Let me show you how to find magenta, which, as I mentioned, is at 300 degrees in this color system, and we can easily select a magenta color by typing 300 on the H part.
You need to know that violet is on the 270th degree of the circle. But purple is different, with different saturation and brightness.
Let’s see, where is the pink color? Pink is between red and magenta; red is at 360 degrees and magenta is at 300 degrees, so deep pink is in the middle at 330 degrees.
In the software’s color picker, we have another option to select colors. For example, for the pink color, we can use the RGB system too.
In the RGB system, numbers start from 0 to 255. If we want to select red on the RGB system, we don’t need green and blue. We just need the full amount of red, so we defined it by these numbers: 255 for red, 0 for green, and 0 for blue.
The same pattern is used to select blue, green, and other colors. For example, blue is 0.0.255 and green is 0.255.0, but what about the deep pink that I mentioned above?
Deep pink is defined as 255.0.127 in the RGB system, which means a fully red color with no green and 127 amount of blue. This combination will produce a deep pink in the RGB system.
This knowledge is exciting but quite complicated. The best way to find a color that we or our client want to use in projects is to follow a table I made to make it easier to apply colors as a color-blind user.
You need to memorize these numbers or write them down as your cheat sheet, or buy this MUG!
.jpg)
Each software will give you different options for selecting a color.
Here, we can see some of them. You can mostly use the RGB system, which is from 0 to 255, or the HSB or CMYK system.
Most of the software lets you use HEX code to pick a color, and some 3D software works with HSV. And even some of them let the user select a color scheme to pick the perfect color.
-
HEX COLOR CODE
Designers and developers use the HEX color code in web design.
A HEX color is expressed as a six-digit combination of numbers and letters defined by its mix of red, green, and blue (RGB). Basically, a HEX color code is a shorthand for its RGB values, with a little conversion gymnastics in between.
You can choose a color by specifying a hexadecimal value that defines the R, G, and B components in a color. The three pairs of numbers are expressed in values from 00 (minimum luminance) to FF (maximum luminance). For example, 000000 is black, ffffff is white, and ff0000 is red.
You can easily grab the color by eyedropper in Photoshop or other software by using the HSB numbers that I explained before and then using the provided Hex code for your projects.