← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 7 of 26

HTML Colors

Imagine building a house and only using raw concrete for everything. It is strong, but it looks incredibly gray and gloomy. Web design is the exact same. Without colors, your web layouts would look like a dry text spreadsheet from the nineties. HTML colors are your digital paint kits. By using different formats, you can style the text, background container fills, and borders of your elements to match your brand style. Colors are the key to evoking emotions, separating layout sections, and guiding your users toward call-to-action buttons in your tool applications.

In this page:

  1. Standard Color Names
  2. Hexadecimal Colors (HEX)
  3. RGB and RGBA Colors
  4. HSL and HSLA Colors
  5. Color Contrast and Web Accessibility
  6. CSS Custom Properties for Colors

Standard Color Names

Browsers recognize 140 official color names natively. This allows you to apply simple color styles like blue, red, or darkslategray directly in your style declarations without needing to look up complex coordinate codes.

Note: Color names are wonderful for fast drafting, but they limit your design choices to the predefined system catalog.

Warning: Avoid using rare color names because different browsers may render subtle shade differences on different monitor configurations.

Example: Standard Color Names

markup 
<p style="color: darkslategray;">Named color text</p>

Hexadecimal Colors (HEX)

Hexadecimal values are the industry standard for web design. They represent color coordinates using a six-digit code preceded by a hash symbol (#RRGGBB). The letters and numbers represent values from 00 to FF, representing the intensity of red, green, and blue respectively.

Note: You can use three-digit shorthand codes like #F00 for #FF0000 when the double digits are identical.

Warning: Always remember to prefix your hexadecimal code with a hash symbol, or the browser will completely fail to display the color.

Example: Hexadecimal Colors (HEX)

markup 
<p style="color: #FF0000;">Full hex code</p>
<p style="color: #F00;">Shorthand hex code</p>

RGB and RGBA Colors

RGB values define color blends using the intensity of Red, Green, and Blue on a scale from 0 to 255. By upgrading to RGBA, you gain access to an Alpha channel that controls transparency from 0.0 (completely invisible) to 1.0 (fully opaque).

Note: Use RGBA colors when you want to create beautiful, semi-transparent overlays that show content underneath.

Warning: Do not confuse RGB values with HSL values since their parameter scales and measurement methods are entirely different.

Example: RGB and RGBA Colors

markup 
<p style="color: rgb(255,0,0);">RGB red</p>
<p style="color: rgba(255,0,0,0.5);">Semi-transparent RGBA red</p>

HSL and HSLA Colors

HSL stands for Hue, Saturation, and Lightness. Hue represents the base color on a 360-degree color wheel, Saturation is the intensity of gray from 0% to 100%, and Lightness represents black or white saturation. Adding the Alpha channel (HSLA) introduces adjustable opacity.

Note: HSL is highly intuitive because adjusting the lightness percentage instantly brightens or darkens your color without changing its shade.

Warning: Always write the percentage symbols inside the Saturation and Lightness parameters, or the rule will be discarded by the browser.

Example: HSL and HSLA Colors

markup 
<p style="color: hsl(0, 100%, 50%);">HSL red</p>
<p style="color: hsla(0, 100%, 50%, 0.5);">Semi-transparent HSLA red</p>

Color Contrast and Web Accessibility

Designing websites is not just about choosing your favorite aesthetics. Web Content Accessibility Guidelines (WCAG) require that your text colors have sufficient contrast against the background fill. This ensures that users with visual impairments or people reading screens under bright sunlight can read your content.

Note: A standard contrast checker tool should show a ratio of at least 4.5:1 for regular paragraph text to meet minimum requirements.

Warning: Using light gray text on white backgrounds makes your page inaccessible, causing search engine bots to mark down your quality score.

Example: Color Contrast and Web Accessibility

markup 
<p style="color: #000000; background-color: #FFFFFF;">
  High contrast text for accessibility
</p>

CSS Custom Properties for Colors

CSS custom properties, also called CSS variables, let you define a color once with a name like --primary-color and reuse it everywhere in your stylesheet. If the brand color ever changes, you update it in one single place instead of hunting through every rule.

Note: Define your color palette as custom properties on the :root selector so they are available everywhere in your CSS.

Warning: Custom properties are not supported in very old browsers like Internet Explorer 11, so check your audience's browser support before relying on them exclusively.

Example: CSS Custom Properties for Colors

markup 
<style>
  :root {
    --primary-color: #0000ff;
  }
  p {
    color: var(--primary-color);
  }
</style>
<p>Styled with a custom property</p>
Common Mistakes
  1. Forgetting to write the hashtag symbol before hex codes, causing them to break.
  2. omitting percentage symbols inside HSL and HSLA color arguments.
  3. Combining low-contrast colors that make your content unreadable and violate accessibility guidelines.
Chapter Summary
  • HTML handles colors through names, hexadecimal coordinates, RGB systems, and HSL layouts.
  • The RGBA and HSLA variants introduce alpha transparency parameters to blend containers.
  • Maintaining high color contrast is structurally essential for SEO rankings and accessibility support.
Browser Support

Standard color formatting systems are universally supported by all modern and legacy browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Comments Next Lesson → HTML RGB Colors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.