CSS Color

CSS supports a wide variety of colors.

We can change the text color with the color property and the background with background-color.

h2 {
  color: black;
  background-color: blue;
}

I. Colors in CSS

There are four ways to represent color in CSS:

1. Named colors

There are 147 named colors. For example: blue, yellow, white, etc.

2. Hexadecimal or hex colors

A hex color begins with a hash character (#) followed by three or six characters. They could be numbers from 0 to 9 or letters from A to F.

The Hex codes are made up of 3 channels: red, blue, and green. When we combine different digits from each channel, we have a color.

For each channel, 0 represents the darkest shade while F represents the lightest shade.

For example: #BC1823.

3. RGB

RGB colors use the rgb() syntax with one value for red, one for blue, and one for green.

RGB values range from 0 to 255. For example: rgb(5, 150, 20).

4. HSL

HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).

Hue ranges from 0 to 360, and saturation and lightness are represented as percentages: hsl(120, 20%, 50%).

5. Opacity

You can add opacity to color in RGB and HSL by adding a fourth value, a, representing a percentage.

II. Color theory

1. The Color Wheel

It comprises three color groups: primary, secondary, and tertiary.

  1. Primary colors are red, blue, and yellow.
  2. Secondary colors are created by mixing two primary colors, forming green, orange, and purple.
  3. Tertiary colors are formed when mixing secondary and primary. For example:
  • Red-orange (Vermillion)
  • Yellow-orange (Amber)
  • Yellow-green (Chartreuse)
  • Blue-green (Teal)
  • Blue-purple (Violet)
  • Red-purple (Magenta)

We can use Adobe Color CC and Cloudflare to help generate color schemes.

2. HSLA

HSLA is the most semantic system of setting colors with CSS. Semantic provides more direct control over the color scheme and a more direct ability to manage contrast and create related color schemes.

p {
    color: hsla(34, 100%, 50%, 0.1); /* HSLA*/
}

Here is the meaning of each value

  • First value is Hue. This is expressed as the angle in degrees around the color wheel.
  • Saturation refers to the intensity or purity of that hue. Colors with full saturation (100%) are the color itself, and colors with no saturation (0%) are entirely grayscale.
  • Lightness refers to the lightness of the color. 0% is black, and 100% is white.
  • A, or alpha, refers to the opacity. 0% is fully transparent, and 100% is fully opaque.

3. Warm colors

Warm colors range between red and yellow. They present a feeling of aggression and are considered bold.

p {
  background-color: hsla(25, 100%, 50%, 1);
}

4. Cool colors

Cool colors range between blue, purple, and green. They also include gray. They bring a feeling of calming, soothing nature.

p {
  background-color: hsla(220, 100%, 50%, 1);
}

5. Tints and Shades

Tints occur when white is applied to color, adding or increasing the lightness of a hue.

Shades are created when black is added to a color, decreasing the hue’s lightness.

6. Color contrast

When applying color to your designs, you should ensure contrast levels to provide clarity for the elements on your page.

7. Color Schemes

Harmonizing colors will enable you to create elegant and usable designs.

Color schemes (or color palettes) result from pairing two or more colors together.

  • Monochromatic: Each color in the scheme is from the base color. It’s important to select a much lighter and much darker shade of the main color.
  • Complementary: It utilizes colors opposite each other on the color wheel.
  • Analogous: The schemes apply three or more colors adjacent to each other on the color wheel.
  • Triadic: The schemes consist of three colors equidistant from each other on the color wheel.

8. Color meaning

  • Red: Passionate, energetic, angry
  • Orange: Optimistic, playful, fun
  • Yellow: Welcoming, intellectual, impatient
  • Green: Prosperous, balanced, growing
  • Blue: Peaceful, loyal, cold
  • Purple: Imaginative, royal, spiritual
  • Gray: Unemotional, compromising
  • White: Innocent, pure
  • Black: Luxurious, powerful

III. Best practices for using Color

  • Use neon colors sparingly
  • Avoid vibrating colors
  • Use backdrops to separate vibrating colors
  • Avoid color combinations with insufficient contrast
  • It’s essential to Select a dominant brand color and supporting accent colors.
  • Use semantic colors for error and success messages
  • Use contrast to define sections and differentiate actions Having a neutral background (any color with low lightness or saturation) is a good base because it allows you to add high contrast to the parts of the site where you want to direct a user’s attention. Alternatively, a dark background with light-colored text is reasonable as well.
  • Keep users in mind when selecting color as many users can experience different types of color blindness:
    • red-green, where users struggle to differentiate between the red and green colors.
    • blue-yellow, where the blues tend to appear greener
    • monochromatic, when users can’t see color at all.