Let’s do Color & Math

Understanding the formulas of color conversion

I’m a GIF that can’t handle more than 256 colours. Excuse me for my gradients.

Color Wheel

Colors are the way our brain, through our eyes, interprets electromagnetic radiation of a wavelength within the visible spectrum. Yum. Visible light lies between 400 and 700 nanometers. Radiation with a wavelength of over 750 nm is called infra-red and radiation under 350 nm is ultra-violet.

RGB

RGB refers to a system for representing the colors to be used on a computer display. RGB is a combination of Red, Green and Blue. These colors can be combined in various proportions to obtain any color in the visible spectrum.

RGB = (54, 155, 229)  |  Note: 54 = Red, 155 = Green and 229 = Blue

HEX

HEX is a widely known and used format for defining colors on the web. The name comes from the phrase hexadecimal, which is used by humans to shorten binary to a more easily understandable form. Each of the HEX numbers use numbers and letters to represent values between 0–16. Numbers are used for the range 0–9 and letters A, B, C, D, E, F for the range 10–16.

HEX = #A3D645  |  Note: A3 = Red, D6 = Green and 45 = Blue
R / 16 = X1 + Y1G / 16 = X2 + Y2B / 16 = X3 + Y3
R = 54 / 16 = 3 + 6G = 155 / 16 = 9 + 11  |  Note: 11 = B in hexadecimalB = 229 / 16 = 14 + 5  |  Note: 14 = E in hexadecimal
R = X1 x 16 + Y1G = X2 x 16 + Y2B = X3 x 16 + Y3
R = 3 x 16 + 6 = 54G = 9 x 16 + 11 = 155  |  Note: 11 = B in hexadecimalB = 14 x 16 + 5 = 229  |  Note: 14 = E in hexadecimal

What do you call friends who like maths?

Alge-bros.

Keep smiling. We’re off to continue our journey to the world of HSL.

HSL

HSL is a common cylindrical coordinate representation of points in an RGB color model. HSL stands for Hue, Saturation and Luminosity. Hue refers to the colour family of the specific color we’re looking at. It indicates the actual dominant color on the RGB color wheel. Luminosity refers to how much white or black is mixed in the color. Saturation indicates the amount of grey in the same color.

Luminosity

Luminosity (also called brightness, lightness or luminance) stands for the intensity of the energy output of a visible light source. It basically tells how light a color is and is measured on the following scale: L = [0, 1]

R = 54 / 255 = 0,212G = 155 / 255 = 0,608B = 229 / 255 = 0,898
L = (1 / 2) x (Max(RGB) + Min(RGB))
L = (1 / 2) x (0,898 + 0,212) = 0,555 ~ 56%

Hue

Most sources of visible light contain energy over a band of wavelengths. Hue is the wavelength within the visible light spectrum at which the energy output from a source is greatest. It is indicated by its position (in degrees) on the RGB color wheel: H= [0°, 360°]

(A) If R ≥ G ≥ B  |  H = 60° x [(G-B)/(R-B)](B) If G > R ≥ B  |  H = 60° x [2 - (R-B)/(G-B)](C) If G ≥ B > R  |  H = 60° x [2 + (B-R)/(G-R)](D) If B > G > R  |  H = 60° x [4 - (G-R)/(B-R)](E) If B > R ≥ G  |  H = 60° x [4 + (R-G)/(B-G)](F) If R ≥ B > G  |  H = 60° x [6 - (B-G)/(R-G)]
R = 54 / 255 = 0,212G = 155 / 255 = 0,608B = 229 / 255 = 0,898
H = 60° x [4 - (0,608-0,212)/(0,898-0,212)] = 205,4°

Saturation

Saturation is an expression for the relative bandwidth of the visible output from a light source. As saturation increases, colors appear more pure. As saturation decreases, colors appear more washed-out. It is measured on the following scale: S = [0, 1]

(A) If L < 1  |  S = (Max(RGB) — Min(RGB)) / (1 — |2L - 1|)(B) If L = 1  |  S = 0
S = (0,8980,212) / (1 — |2 x 0,555 - 1|) = 0,770 ~ 77%
This is you right now.

We have successfully calculated Luminosity, Hue and Saturation from a single HEX code

Now we can define our own rules for accepting colors solely relying on a HEX code. For example, we can set a desired range for the Luminosity or exclude certain colors from the color wheel with Hue. With Saturation we can also influence how washed-out or colorful our screens look.

L = 56%H = 205,4°S = 77%

--

--

Lead Product Designer | www.donatbalipapp.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store