Color

Mathematics of Color

BITS: All information in computer systems are stored, transmitted, and processed as electrical signals, either on or off. The on or off state of an electrical signal is known as a bit, and is represented as a 1 for on and a 0 for off.

BYTE: When multiple bits are put into a sequence, they are mathematically combined in order to form a byte. A common byte length is 8-bit. An 8-bit byte is 2 to the 8th power, which has 256 unique combinations. The 8-bit byte below has the value of 73.

Hexadecimal Notation

Hexadecimal notation uses base 16 mathematical notation, so each digit is between 0 - 9 and then A - F, totally 16 possible character states. When two base 16 digits are combined to create a number, there are 256 possible unique combinations. Hexadecimal colors are constructed using red, green, and blue color channels, each utilizing two base-16 digits. The order is #RRGGBB. Black is #000000, white is #ffffff. If the second digit for a channel is set to F, for example #9F0000, then the notation can be shortened to a single digit per channel, such as #900. Three 8-bit color channels combined is 2 to the 24th power, or 16,777,216 different colors.

background-color: #ff0000;
color: #ff0000;

Red/Green/Blue (RGB) Decimal Notation

RGB decimal notation utilizes a numeric system between 0 and 255 to determine the amount of saturation from each color channel.

background-color: rgb(255,0,0);
color: rgb(255,0,0);

RGB with Transparency

An additional color channel called "alpha" is used to control transparency of a color. Unlike the color channels, this channel uses a value between 0 and 1, representing 0% opaque (fully transparent) and 100% opaque (no transparency).

background-color: rgba(255,0,0,0.5);
color: rgba(255,0,0,0.5);

Hue/Saturation/Lightness (HSL) Decimal Notation

Hue/Saturation/Lightness (HSL) is a different way of describing color from Red/Green/Blue (RGB). Instead of the individual channels being primary colors of a color model, the hue channel determines what the "color" will be, while the saturation channel determines how vibrant that color is, and the lightness channel determines how bright that color is.

Hue is established as a value between 0 and 360, representing the degrees of a circle, aka the color wheel. Saturation and lightness are determined between 0 and 100, based on percentage. Saturation 0 would be grayscale, while saturation 100 would be full color. Lightness, however, is a bit different, where 0 is completely black, 100 is completely white, and 50 is the full brightness of the hue. You also must include the percentage sign for the saturation and lightness channel.

background-color: hsl(0,100,50);
color: hsl(0,100,50);

HSL with Transparency

Adding the addition of transparency allows the use of HSL with the additional 8-bit channel of alpha.

background-color: hsla(0,100,50,0.5);
color: hsla(0,100,50,0.5);