There are several different ways to represent color within HTML and CSS. These include:
Color names
We can simply identify colors by name, such as red, blue, or green. Browsers may use different variations for the actual colors, however.
This is NOT recommended for production; however, it’s the easiest way to learn HTML and CSS.
body {background-color: blue;}
RGB values
We specify values for the amount of red, green, and blue. These are quite similar to the hex codes below.
body {background-color: rgb(0,0,255);}
Notes
Each value goes from 0 to 255.
- Red is 255,0,0
- Lime Green is 0,255,0
- Blue is 0,0,255
Hex values
This is a common approach to color codes.
We use a hexadecimal code to identify the color. There are six digits to these codes, and they generally occur in pairs
body {background-color: #0000FF;}
Notes
- Red is #FF0000
- Lime Green is #00FF00
- Blue is #0000FF
HSL values
We specify the hue, saturation, and lightness values.
- Hue is a degree on the color wheel, ranging from 0-360. 0 is red.
- Saturation is a percentage value where 0% represents a shade of gray and 100% represents full color.
- Lightness is a percentage value where 0% represents black and 100% represents white.
body {background-color: hsl(240, 100%, 50%);}
Notes
- Red is hsl(0, 100%, 50%)
- Lime Green is hsl(120, 100%, 50%)
- Blue is hsl(240, 100%, 50%)
Alpha Channel
RGBA and HSLA are both modifications of their initial versions (RGB and HSL).
These just add an alpha channel, which is essentially a transparency degree. 0 is transparent while 1 is opaque.
While this seems similar to the opacity property, that property impacts the ENTIRE element rather than just a color.
Web Safe Color Palette
The web color palette is a standard group of 216 colors that will display the same on a Mac or PC. Using the hex system, all numbers will contain collections of 00, 33, 66, 99, CC, and FF.
Today, this is probably outdated and safe to ignore! Further, this is INFORMAL and not standardized.
See https://websafecolors.info/ for more details.
Color choices
Select color schemes with good contrast between font color and background color. This helps with accessibility.
Remember that some people are color blind.
Many people prefer simple monochromatic color schemes where there is a single dominant color (blue is popular), also using white and black.
Color preferences are claimed to vary by age.
Common Color Codes (both hex and rgb)
- White #FFFFFF RGB(255, 255, 255)
- Silver #C0C0C0 RGB(192, 192, 192)
- Gray #808080 RGB(128, 128, 128)
- Black #000000 RGB(0, 0, 0)
- Red #FF0000 RGB(255, 0, 0)
- Maroon #800000 RGB(128, 0, 0)
- Yellow #FFFF00 RGB(255, 255, 0)
- Olive #808000 RGB(128, 128, 0)
- Lime #00FF00 RGB(0, 255, 0)
- Green #008000 RGB(0, 128, 0)
- Aqua #00FFFF RGB(0, 255, 255)
- Teal #008080 RGB(0, 128, 128)
- Blue #0000FF RGB(0, 0, 255)
- Fuchsia #FF00FF RGB(255, 0, 255)
- Purple #800080 RGB(128, 0, 128)
