</>
Skip to content
HTML lessons (58/60)

HTML — Color Reference

Friendly introduction – what & why

Colors make a web page pleasant to look at.
They help you highlight important parts, separate sections, and guide the reader’s eye.
In HTML you can set colors on text, backgrounds, borders, and more.
Understanding the different ways to write a color will save you time and avoid bugs.

Good to know: Browsers understand several color formats. Choose the one that feels most natural for your project.

Basic color notations

HTML does not have its own color syntax; it relies on CSS color values.
The most common notations are:

  • Named colors – words like red or steelblue.
  • Hexadecimal – a six‑digit code prefixed by #.
  • RGB – rgb(red, green, blue) where each component is 0‑255.
  • RGBA – like RGB but with an extra alpha (opacity) value.
  • HSL – hsl(hue, saturation, lightness).
  • HSLA – HSL with an alpha channel.

Below you will see each notation in action.

Named colors

<p style="color: tomato;">This text is tomato colored.</p>
<p style="background-color: lightgreen;">Background is light green.</p>

What the browser displays

The first paragraph shows orange‑red text.
The second paragraph has a pale green background.

Hexadecimal notation

<h1 style="color:#1e90ff;">Hex: #1e90ff (DodgerBlue)</h1>
<div style="background-color:#ffdead; width:150px; height:50px;">
  Hex background #ffdead
</div>

What the browser displays

A heading with a bright blue text.
A light orange rectangle as a background.

RGB notation

<p style="color: rgb(255,0,0);">RGB red text</p>
<p style="background-color: rgb(173,216,230);">RGB light blue background</p>

What the browser displays

First line: pure red text.
Second line: light blue background behind the text.

RGBA notation (adds opacity)

<p style="color: rgba(0,128,0,0.6);">
  RGBA green text at 60% opacity
</p>
<div style="background-color: rgba(255,165,0,0.3); width:200px; height:60px;">
  Semi‑transparent orange box
</div>

What the browser displays

Green text appears lighter because it is partially transparent.
The orange box lets the page background show through.

HSL notation

<h2 style="color: hsl(120, 100%, 25%);">
  HSL dark green heading
</h2>
<p style="background-color: hsl(240, 100%, 90%);">
  HSL very light blue background
</p>

What the browser displays

A dark green heading.
A pale blue background behind the paragraph.

HSLA notation (opacity with HSL)

<span style="color: hsla(0, 100%, 50%, 0.4);">
  HSLA semi‑transparent red text
</span>
<div style="background-color: hsla(60, 100%, 50%, 0.2); width:180px; height:50px;">
  HSLA 20% opaque yellow box
</div>

What the browser displays

Red text looks faint because it is 40% opaque.
A yellow rectangle is barely visible, showing the page behind it.

Using color attributes directly in HTML

Older HTML versions allowed a few color attributes. They still work but are considered outdated.

<table border="1" bgcolor="#f0f8ff">
  <tr>
    <th bgcolor="lightgray">Header 1</th>
    <th bgcolor="lightgray">Header 2</th>
  </tr>
  <tr>
    <td bgcolor="lavender">Cell A</td>
    <td bgcolor="lavender">Cell B</td>
  </tr>
</table>

What the browser displays

A table with a very light blue background.
Header cells have a light gray background.
Data cells are lavender colored.

Common mistake: Mixing old HTML color attributes (bgcolor, text, link) with modern CSS can create confusing code. Prefer CSS style or external stylesheets.

Color in CSS vs. HTML

Where you write itExample syntaxTypical use case
Inline style attribute<p style="color:#ff0000;">Quick test, single element
Internal <style> block<style> p { color: red; } </style>Page‑wide styling without extra files
External stylesheet (.css)p { color: rgb(255,0,0); }Reusable across many pages

Inline styles have the highest priority, but they make HTML noisy.
Internal styles keep all CSS in one HTML file, useful for small projects.
External styles are the cleanest and most maintainable for larger sites.

Example: internal vs. external

<!-- internal style -->
<head>
  <style>
    .notice { background-color: #ffebcd; padding: 8px; }
  </style>
</head>
<body>
  <div class="notice">This box uses internal CSS.</div>
</body>

<!-- external style (style.css) -->
<link rel="stylesheet" href="style.css">
<div class="alert">This box uses external CSS.</div>

style.css

.alert {
  background-color: #ffe4e1;
  padding: 8px;
}

What the browser displays

Two boxes, each with a light peach background and some padding.
One is styled from a <style> block, the other from an external file.

Choosing the right notation

NotationWhen to useReadabilityBrowser support
Named colorsQuick prototypes, limited paletteVery high (words)All browsers
Hex (#rrggbb)Precise control, design tools outputMedium (hex digits)All browsers
RGBWhen you calculate colors programmaticallyMediumAll browsers
RGBANeed transparencyMedium‑highAll modern browsers
HSLWhen you want to adjust hue, saturation, lightnessHigh (intuitive)All modern browsers
HSLATransparent HSL colorsHighAll modern browsers

Tip: If you plan to animate colors with CSS, HSL or HSLA often give smoother transitions because you can change just the hue value.

Applying colors to different HTML elements

<h1 style="color:#4b0082;">Heading with Indigo text</h1>

<p style="color:rgb(34,139,34);">
  Paragraph using RGB green.
</p>

<button style="background-color:#ff4500; color:white;">
  Orange button
</button>

<hr style="border-color:rgba(0,0,0,0.2);" />

<div style="border: 2px solid hsl(210, 100%, 40%); padding:10px;">
  Box with an HSL border
</div>

What the browser displays

A dark indigo heading, a green paragraph, an orange button with white text,
a faint gray horizontal rule, and a box with a blue‑gray border.

Color accessibility reminder

Always ensure enough contrast between text and its background.
A contrast ratio of at least 4.5:1 for normal text is recommended by WCAG.

Common mistake: Using light gray text on a white background. It looks fine on a high‑resolution screen but fails accessibility checks.

Summary

  • Use named colors for quick, simple choices.
  • Hex is concise and works everywhere.
  • RGB/RGBA give numeric control; add alpha for transparency.
  • HSL/HSLA are great for hue‑based adjustments and animations.
  • Prefer CSS (internal or external) over old HTML color attributes.
  • Check contrast to keep your site accessible.

Common mistakes checklist

  • Mixing old bgcolor attributes with modern CSS rules.
  • Forgetting the # in a hex value (ff0000 instead of #ff0000).
  • Using an invalid color name (blu instead of blue).
  • Setting opacity on text with rgba when you meant to affect only the background.
  • Ignoring contrast; run a contrast checker for each color pair.
  • Adding spaces inside hex codes (# ff 00 00).

Mini Practice

  1. Create a paragraph with the text “Welcome to my site!” and make the text color steelblue using a named color.
  2. Build a <div> 120 px wide and 60 px high with a background color of #8a2be2 (blue‑violet) using inline CSS.
  3. Write a button that has a semi‑transparent black background (rgba(0,0,0,0.5)) and white text.
  4. Add a horizontal rule (<hr>) whose border color is hsl(120, 100%, 25%).
  5. Using an external stylesheet, define a class .highlight that gives a yellow (#ffff00) background and dark red (#8b0000) text. Apply this class to a list item.

Happy coloring!

Related Topics

Event AttributesCharacter SetsURL Encoding

Frequently Asked Questions about Color Reference

What is Color Reference in HTML?

Color Reference is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Color Reference?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Color Reference.

Why is Color Reference important in HTML?

Color Reference is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.