In this post, I am going to show you how to use simple formulas, for mixing basic pure colors, Red Green Blue Yellow Cyan and Magenta, using RRGGBB Hexadecimals, aka Hex. And how to create for them, tints and shades, by way of adjusting the light and adding in Grey. But first…
Basic Hexadecimal Review + Mixing Pure Color RRGGBB
RRGGBB — is ab/ab/ab — RR is red, GG is green, BB is blue.
#000000 is pure computer black. Hueless and Lightless. Lower numbers less light for the hue. 00 for Red, 00 for Green, 00 for Blue, creates pure Black.
#FFFFFF is pure white light. The higher digit the more the light, F=16 (the highest digit, explained below), adding light for hue all the way up to absolute white which is FFFFFF. FF Red FF Green FF Blue is pure White.
ab/ab/ab — The first digit: a is multiplier x 16. The second digit: b is simply added to it.
RRGGBB Formula: First letter is multiplied by 16, second is added to it, in order to create a combined color number for Red, for Green, and for Blue, that goes from 0 to 255.
Lovely computer geeks had to use two digits in order to arrive at formula that would work for 0 to 255. 00 being no hue or brightness, 255 being pure light as hue.
After the number 9, digits take on letters in order to meet the number 16.
The scale is:
DARK 0 1 2 3 4 5 6 7 8 9 A B C D E F LIGHT
Pure Bright Red #FF0000
Broken Out: FF pure bright red light, 00 no green light, 00 no blue light.
Pure Bright Green #00FF00
Broken Out: 00 No red light, FF pure bright green light, 00 no blue light.
Pure Bright Blue #0000FF
Broken Out: 00 No red light, 00 no green light, FF pure bright blue light.
FF = 255, 00 = 0. RRGGBB.
Color-hex.com
This site https://www.color-hex.com/color/ffff00 gives you a Panel for inputing Hex using RRGGBB. It’s a MUST for color lovers.
To access a color directly, at the color-hex.com site, simply add to ending:
/color/
plus the the six digits for the Hex, example:
https://www.color-hex.com/color/ffff00
I used color-hex.com to produce the images here.
Site includes all the tints and shades I have also depicted below, where you can, for any color’s tint or shade, quickly do a copy on the Hex digits to input on Substack in the Branding Section.
Yellow Magenta Cyan RRGGBB
Yellow is a mix of Pure Red and Green, no Blue Light #FFFF00, for RRGGBB:
Cyan is a mix of Pure Green and Blue, no Red light #00FFFF, for RRGGBB:
Magenta is a mix of Pure Red and Blue, no Green light #FF00FF, for RRGGBB:
Yellow Tints - FFFFab
For Tints of a mixed pure color Yellow, you adjust the light coming in through the blue, by changing the 00 digits for blue, but keeping the pure color for yellow FFFF. FFFFab.
FFFF will give you pure yellow (via RR and GG), what you tack on using the Blue digits at end, is how much light white, you are adding in. Going from Left to Right, all the way up to FF for a pure white:
DARKER 0 1 2 3 4 5 6 7 8 9 A B C D E F LIGHTER
Higher the combined digit for blue using grey scale for light, the lighter the tint: FFFF + b2, FFFF + cc, FFFF + e5, or FFFF + ff — pure white.
To include a letter in the first slot for Blue, results in a greater multiplied addition of white (second number incrementals produce much smaller differences, as they are only added in the formula, not multiplied).
Middle tints are higher numbers,FFFF + 66, FFFF + 7f, FFFF + 99.
Purer yellow tints use a lower number in the first slot: FFFF + 00, FFFF + 19, or FFFF + 32 etc.
Yellow Shades — abab00
For shades, we add in darkness by changing the Red and Green to a grey, and leaving the Blue 00. FFFF is changed to a grey formula using abab, and Blue remains 00.
Grey, as demonstrated in the post on making greys (link below), are structured ab/ab/ab across RRGGBB, the digits are repeated exactly or nearly exactly identical for RR GG and BB. For example: efefef is a grey, 999999 is a grey, 191919 is a grey. Lower the number the darker the grey.
To get a shade of Yellow, you add a grey made with Red and Green, abab, and completely leave out the blue 00.
Examples: e5e5 + 00, cccc + 00, b2b2 + 00. Lighter shades use letters in the first slot.
DARKER 0 1 2 3 4 5 6 7 8 9 A B C D E F LIGHTER
The lower the digits, the darker the shade: 1919+ 00, 3333+ 00, 4c4c + 00, for no blue. Darker shades use lower numbers in the first slot for RR and GG.
Cyan: Shades 00abab and Tints abFFFF
Shades of #00FFFF. 00abab is 00 for no red, plus identical grey values for Green and Blue.
00 + e5e5, 00 + 6666, 00 + 1919. Again, letters in the first slot give you brighter shades, lower numbers in the first slot give you darker shades.
Tints of #00FFFF. For tints use abFFFF, Blue and Green FFFF remain the same, retaining the hue, while light is added in using digits for red, 19 + FFF, 66 + FFFF, e5 + FFFF. Whiter tints have letter in first slot, richer tints have numbers.
Magenta: Shades ab00ab and Tints FFabFF
#FF00FF, has the grey on either side of zeros for Green, ab00ab: cc + 00 + cc, 33 + 00 + 33, letters are brighter, numbers are darker, all the way down to 000000.
#FF00FF, use FFabFF to make tints for Magenta, the outside digits for Red and Blue remain FF, while the 00 in the center for Green, is adjusted with a grey formula in order to add in white: FFabFF. FF + 19 + FF. FF + e5 + FF. All the way up to pure white, which is FFFFFF.
Red Green Blue : Tints and Shades
Pure colors work the same but appear a little different, because pure color is applied to one color slot: FF, and the others are set to 00. Red FF0000, Green 00FF00, Blue 0000FF.
FF0000 is pure bright red. FF in the RR slot and 00 for green and for blue.
To add shade, only the Red is changed into a formula for grey, the blue and green remain 00. Red formula for shades: ab0000.
e5 + 0000, 19 + 0000. Higher the first digit, brighter the shade. Lower the first digit, lower the shade.
For Red tints, the formula is FFabab. The Red remains FF, while the Green and Blue are changed to add in white using formulas for grey.
FF + 1919, FF + e5e5. The higher the digit in the first slot, the whiter the tint.
GREEN: Shades 00ab00 and Tints abFFab
For Green Shades the formula is 00ab00, ab adds in a shade for Green, while Red and Blue remain 00.
Green Tints use abFFab, Red and Blue are changed to add white using formulas for grey, while Green is set to FF.
BLUE Shades 0000ab and Tints ababFF
For Blue Shade use 0000ab, ab adds in grey shade of Blue while Red and Green remain 0000.
For Blue Tints use ababFF, Red and Green are changed to add white using formulas for grey while blue remains FF.
Substack Text Break Points for Colors, depends upon how bright that color reads, we will explore in a future post.
And later, a post on mixing hues, via adjusting increments in the first slot, and slight changes using increments in the second slot.
Here’s First Post on Making Greys:
keep these coming, i love it!