HTML · Chapter 12 of 45

HTML Colors

Colors in HTML/CSS can be specified using names (like "red"), HEX codes (like #ff0000), RGB values (like rgb(255,0,0)), or HSL values.

HEX and RGB are the most common formats used in professional development, since they allow precise control over exact shades, while named colors are handy for quick prototyping.

Syntax
color: #ff0000; / color: rgb(255,0,0);

Color formats

HEX codes use six hexadecimal digits (#RRGGBB). RGB uses rgb(red, green, blue) with values 0-255. RGBA adds an alpha (transparency) channel.

Using colors

Colors are usually applied via CSS properties like color (text) and background-color, often set through the style attribute or a stylesheet.

Example 1 (html)
<p style="color:#ff0000;">Red text using HEX</p>
Output
Red text using HEX

#ff0000 represents full red, no green, no blue.

Example 2 (html)
<p style="background-color: rgba(0,0,255,0.3);">Semi-transparent blue background</p>
Output
Semi-transparent blue background

rgba adds an alpha channel controlling opacity from 0 to 1.

Key points

  • Colors can be named, HEX, RGB, or HSL.
  • HEX format is #RRGGBB, each pair from 00 to ff.
  • RGBA and HSLA add transparency with an alpha value.
  • Color values are applied via CSS properties, not raw HTML.
💡 Note: Use online color pickers to convert between HEX, RGB, and HSL formats easily.

📝 Quick Quiz

1. What does #ff0000 represent?

2. Which format includes transparency?

3. RGB values range from: