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.There are at least 140 named colors, although some sources suggest 145 or 147. This variation reflects different HTML or CSS versions.
This is NOT recommended for production; however, it’s the easiest way to learn HTML and CSS.
Unfortunately, the color names may not be very descriptive. For example, compare gray and darkgray. Which do you expect to be the darker color?
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.
There are 16,777,216 RGB or Hex color codes possible.
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.
There are 16,777,216 RGB or Hex color codes possible.
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).
There is now an alpha value for hex codes; check browser support on caniuse.com before using this.
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 Gamut
The sRGB (standard RGB) Color Gamut is a grouping of colors reflected in the RGB or hex codes listed above. Most modern browsers are limited to this color space.
The P3 color gamut provides a roughly 50% greater range of colors. Safari is the only major browser to support this as of February 2023. There are other color spaces as well.
More details are availble in the textbook and online.
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.
Color Schemes and Color Theory
Many authors discuss color theory and color schemes for web design. I recommend starting with these links and then searching for more.
Common Color Codes (Name / Hex / RGB / HSL)
- White / #FFFFFF / RGB(255, 255, 255) / hsl(0, 100%, 100%)
- Silver #C0C0C0 RGB(192, 192, 192) hsl(0, 0%, 75%)
- Gray / #808080 / RGB(128, 128, 128) / hsl(0, 0%, 50%)
- Black / #000000 / RGB(0, 0, 0) / hsl(0, 0%, 0%)
- Red / #FF0000 / RGB(255, 0, 0) / hsl(0, 100%, 50%)
- Yellow / #FFFF00 / RGB(255, 255, 0)/ hsl(60, 100%, 50%)
- Green / #008000 / RGB(0, 128, 0) / hsl(120, 100%, 25%)
- Blue / #0000FF / RGB(0, 0, 255) / hsl(240, 100%, 50%)
