Tools of the Trade

Lesson 8: Understanding HTML Colors, RBG and Hex

HTML colors can be defined using color name, RGB (stands for red, green, blue) and hexadecimals.

Different Methods of Defining Color

The example below each method produces the same result.

Color Name

You can define colors by referring to its color name but the drawback to this is that you are limited to 140 colors.


<p style="color: yellow; background: black;">Hello World</p>

RGB Colors

RGB allows you to define colors by mixing the intensity within the Red, Green and Blue channels on a screen with a range between 0 to 255.


<!--This would give you yellow text (yellow is achieved by mixing red and green light) against a black background.-->

<p style="color: rgb(255,255,0); background: rgb(0,0,0);">Hello World</p>

Hexadecimal Colors

Hexadecimal (sometimes referred to as just Hex) colors are defined effectively in the same way as RGB colors except instead of using a decimal (base 10) counting system to define the intensity of each color channel, hexadecimal colors use a hexadecimal (base 16) counting system. Hexadecimal colors begin with a pound sign # followed by 3 sets of hexadecimals (each set describes one primary RGB color channel) ranging from 00 to FF in each set with no spaces.


<!--Note 00 is equivalent to 0 and FF is equivalent to 255 -->

<p style="color: #FFFF00; background: #000000;">Hello World</p>

Sidebar: With the decimal counting system that you and I are familiar with, the unit digits start with 0 and ends with 9 and for any numbers above that, you would use a combination of unit digits. In hexadecimal, the unit digits start with 0 and ends with F—so your unit digits would be 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Hexadecimal Color Shorthands

If the first and second digits are the same within each of the 3 sets of hexadecimals contained within a hexadecimal color, you are not required to repeat the digits.


<p style="color: #FF0; background: #000;">Hello World</p>

<!-- As another example, the hexadecimal color #11EEDD which is a shade of turqoise can also be written as just #1ED -->

Resources

Understanding Decimal (Base 10)
https://en.wikipedia.org/wiki/Decimal

Understanding Hexadecimal (Base 16)
https://en.wikipedia.org/wiki/Hexadecimal

Base Converter to convert between Binary (base 2), Decimal (base 10) and Hexadecimal (base 16)
http://baseconvert.com/

W3 Schools Complete List of HTML Color Names
http://www.w3schools.com/colors/colors_names.asp

W3 Schools Complete HTML Color Picker(RGB and Hexadecimal values are both provided)
http://www.w3schools.com/colors/colors_picker.asp

W3 Schools Complete RGB Color Mixer
http://www.w3schools.com/colors/colors_rgb.asp

W3 Schools Complete Hexadecimal Color Mixer
http://www.w3schools.com/colors/colors_hexadecimal.asp