Skip to main content
WPFSharp Academy
Syllabus

HTML Colors (Names, HEX, RGB, HSL)

Badar KhalilUpdated September 27, 2026 2 min read
Share X Facebook LinkedIn WhatsApp

HTML Colors (Names, HEX, RGB, HSL)

HTML colors can be defined in several different formats, and knowing when to use each one is an essential modern front-end development skill — especially when working with transparency, design systems, and dynamic theming.

1. Named Colors

HTML supports 140 predefined color names like red, blue, tomato, and rebeccapurple:

Code
<p style="color: tomato;">This text is tomato colored.</p>

2. HEX Color Codes

HEX codes represent colors using a 6-digit hexadecimal value prefixed with #, combining red, green, and blue values:

Code
<p style="color: #ff6347;">Tomato in HEX</p>
<p style="color: #000000;">Black</p>
<p style="color: #ffffff;">White</p>

3. RGB and RGBA

RGB defines colors using Red, Green, and Blue values from 0–255. RGBA adds an Alpha channel for transparency (0 = fully transparent, 1 = fully opaque):

Code
<p style="color: rgb(255, 99, 71);">RGB Tomato</p>
<p style="background-color: rgba(255, 0, 0, 0.5);">50% transparent red background</p>

HSL (Hue, Saturation, Lightness) is increasingly popular among modern designers because it's far more intuitive for creating color palettes and variations — you can adjust lightness or saturation without recalculating RGB values:

Code
<p style="color: hsl(9, 100%, 64%);">HSL Tomato</p>
<p style="background-color: hsla(9, 100%, 64%, 0.3);">30% transparent HSL background</p>

Choosing the Right Color Format

  • Use named colors for quick prototyping and simple demos.
  • Use HEX for design handoffs, since most design tools (Figma, Adobe XD) export HEX values by default.
  • Use RGBA or HSLA whenever you need transparency/opacity control.
  • Use HSL when building a scalable design system or color palette, since it's easier to reason about lightness and saturation.

Key Takeaways

  • HTML supports named colors, HEX, RGB/RGBA, and HSL/HSLA formats.
  • RGBA and HSLA add an alpha channel for transparency.
  • HSL is preferred in modern design systems for intuitive color adjustments.
  • HEX remains the most common format handed off from design tools.
Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Exercise: Convert Between Color FormatsHTML

Style three paragraphs so the first uses a named color 'gold', the second uses the HEX equivalent of gold (#FFD700), and the third uses an RGB equivalent (255, 215, 0).

Try it Yourself HTML
Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?