Colors in CSS

By default, an HTML page looks pretty plain:

  • White background
  • Black text
  • Blue links

That’s it. Luckily, CSS gives us powerful tools to add color to our designs.

The main properties are:

  • color → text color
  • background-color → background fill
  • border-color → border styling

Each accepts a color value, which can be expressed in different formats.

Named Colors

CSS supports a large set of named colors. Originally there were 16, but now there are over 140, including:

aliceblue, aqua, beige, blue, coral, crimson, gold, green, hotpink, indigo, lavender, lime, magenta, navy, orange, orchid, pink, plum, purple, red, salmon, silver, skyblue, teal, tomato, turquoise, violet, white, yellow, and many more.

Special values:

  • transparent → fully transparent
  • currentColor → inherits the element’s color property (useful for borders)

Named colors are case‑insensitive.

Example:

Code Block Loading...

RGB and RGBA

Colors can also be defined using RGB notation (rgb()), which specifies red, green, and blue values from 0–255.

Code Block Loading...

Adding transparency is possible with RGBA (rgba()), where the fourth value is the alpha channel (0 = fully transparent, 1 = fully opaque):

Code Block Loading...

Hexadecimal Notation

Another common format is hexadecimal, where each pair of digits represents red, green, and blue values.

  • Black → #000000 or shorthand #000
  • White → #ffffff or shorthand #fff

Code Block Loading...

You can also add transparency by appending extra digits:

Code Block Loading...

Note: Always use the full 6‑digit form for maximum browser support.

HSL and HSLA

HSL stands for Hue, Saturation, Lightness. It’s often more intuitive than RGB.

  • Black → hsl(0, 0%, 0%)
  • White → hsl(0, 0%, 100%)

Code Block Loading...

HSLA adds transparency:

Code Block Loading...

Example

Code Block Loading...

Key Takeaways

  • CSS supports multiple color formats: named colors, RGB/RGBA, hex, HSL/HSLA.
  • Use currentColor to inherit text color for borders.
  • RGBA and HSLA allow transparency.
  • Hex is compact and widely supported, while HSL is more intuitive for designers.