reading-notes

View project on GitHub

Color in CSS

IMG

1. Foreground Color

The color property allows you to specify the color of text inside an element. You can specify any

color in CSS in one of three ways:

  • rgb values These express colors in terms of how much red, green and blue are used to make it up. For example: rgb(100,100,90)

  • hex codes These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or hash # sign. For example: #ee3e80

  • color names There are 147 predefined color names that are recognized by browsers. For example: rad

2. Background Color

CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of the background for that box.

You can specify your choice of background color in the same three ways you can specify foreground colors: RGB values, hex codes, and color names (covered on the next page).

If you do not specify a background color, then the background is transparent. By default, most browser windows have a white background, but browser users can set a background color for their windows, so if you want to be sure that the background is white you can use the background-color property on the <body> element.

Every color on a computer screen is created by mixing amounts of red,green, and blue. To find the color you want, you can use a color picker.

  • Contrast

    When picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible.

  • Opacity

    CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child elements. The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15% opacity).

  • HSL Colors

    • hue
    • saturation
    • lightness

Summary:

  1. Color not only brings your site to life, but also helps convey the mood and evokes reactions.
  2. There are three ways to specify colors in CSS: RGB values, hex codes, and color names.
  3. Color pickers can help you find the color you want.
  4. It is important to ensure that there is enough contrast between any text and the background color (otherwise people will not be able to read your content).
  5. CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA.
  6. CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA.