HTML Colors Explained: Color Names, Hex Codes, RGB, HSL And Styling Guide for Beginners

How to Use Colors in HTML: Complete Guide with Code Examples-HTML Colors Tag -

HTML (HyperText Markup Language) is the standard language used to create web pages. Colors work in a main role in web design. In HTML, colors are used to style text, backgrounds, borders, and other elements using either names, hexadecimal values, RGB, HSL, or other color models.

Color Names-

1)HTML supports 140 standard color names. These are predefined names like red, blue, green, orange, and purple. You can use them directly in CSS to set the color of elements.

✅ Examples:-Examples of HTML Color syntax:-

<p style="color: blue;">This is a blue paragraph.</p>

✅ Examples:-Examples of HTML Color syntax:-

<h1 style="background-color:#ff6347;">...</h1>

✅ Examples:-Examples of HTML Color syntax:-

<div style="background-color: rgba(0, 0, 255, 0.3);">Transparent Blue Background</div>

✅ Examples:-Examples of HTML Color syntax:-Color in CSS-

<style>
.highlight {
    color: #4CAF50;
    background-color: #f0f0f0;
}
</style>

<p class="highlight">Styled with CSS class</p>

Color Names-✅ Basic Color Names and Their Colors

✅ Common Color Properties-

Try It Yourself (Copy This Code and Paste. See how it works). Paste any color example on this page into the live playground below and swap the color value to instantly preview a different shade.

Live Code Preview

Understanding Hex Color Codes

A hex color code is a six-digit value, always starting with a hash symbol, such as #FF6347. Those six digits break down into three pairs, each pair representing the intensity of red, green, and blue on a scale written in hexadecimal, from 00 (none) to FF (full intensity).

Hex codes are the most widely used color format in real stylesheets, since design tools like Photoshop and Figma display and export colors as hex values by default, making it easy to copy a designer's exact color straight into your CSS.

Understanding RGB and RGBA Colors

Where hex codes use hexadecimal digits, the rgb() function uses plain decimal numbers from 0 to 255 for red, green, and blue, which some people find more intuitive to read and adjust than a hex string.

<p style="color: rgb(255, 99, 71);">This text uses RGB color.</p>

Adding a fourth value turns rgb() into rgba(), where the extra "a" stands for alpha, a transparency value between 0 (fully invisible) and 1 (fully solid). This is exactly the format already used in the transparent blue background example earlier on this page.

<div style="background-color: rgba(255, 0, 0, 0.5);">50% transparent red</div>

RGBA is especially useful for overlays, subtle background tints, and hover effects, where you want a color to blend partially with whatever sits behind it rather than fully covering it.

Understanding HSL and HSLA Colors

HSL stands for hue, saturation, and lightness, and it describes color in a way many people find the most intuitive of all: pick a base color on a wheel, decide how vivid it should be, and decide how light or dark it should be.

• Hue is a value from 0 to 360, representing a position on the color wheel (0 is red, 120 is green, 240 is blue).
• Saturation is a percentage from 0% (gray) to 100% (fully vivid).
• Lightness is a percentage from 0% (black) to 100% (white), with 50% being the purest version of the hue.

<p style="color: hsl(280, 70%, 45%);">This paragraph uses an HSL purple.</p>

Just like RGB, HSL also has a transparency-aware version, hsla(), which adds the same 0-to-1 alpha value as a fourth parameter.

<div style="background-color: hsla(200, 80%, 50%, 0.4);">Semi-transparent blue</div>

HSL is particularly handy when you want to create a set of related colors, since keeping the hue fixed and only adjusting lightness produces a natural, consistent range of lighter and darker shades of the same base color.

Comparing Color Formats: Names vs Hex vs RGB vs HSL

All four formats can describe the exact same color, they are simply different ways of writing the same underlying value, so choosing between them is mostly a matter of which one is easiest to read, adjust, or generate for the situation you are styling.

Extended Named Color Reference

The Common Color Properties table earlier on this page covers 13 of the most frequently used named colors, but HTML's full palette of 140 standard names includes many more useful, everyday shades worth knowing:

Color and Accessibility: Why Contrast Ratios Matter

Beyond simply avoiding obviously clashing colors, professional web design follows measurable contrast guidelines, most commonly the Web Content Accessibility Guidelines (WCAG), which recommend a minimum contrast ratio between text and its background so that visitors with low vision can still read it comfortably.

• Body text generally needs a contrast ratio of at least 4.5:1 against its background to meet standard accessibility guidelines.
• Large headings are allowed a slightly lower ratio, around 3:1, since bigger text remains legible with somewhat less contrast.
• Dark text on a light background, such as the near-black body text used throughout this tutorial page, is one of the simplest ways to comfortably clear these thresholds.

You do not need to calculate exact contrast ratios by hand while learning, but keeping this guideline in mind, especially when picking a text color to sit on top of a colored background, will save you from choosing combinations that look fine on your own screen but are genuinely hard for other visitors to read.

Using Color Beyond Text and Backgrounds

Every example so far has styled either text color or background color, but the same named, hex, RGB, and HSL values work identically on several other properties too, most commonly borders and shadows.

<p style="border: 2px solid #2563eb; padding: 10px;">
    A paragraph with a blue border.
</p>
<p style="text-shadow: 2px 2px 4px rgba(0,0,0,0.4);">
    Text with a soft drop shadow.
</p>

Because border and shadow colors accept exactly the same four formats already covered, named, hex, rgb/rgba, and hsl/hsla, everything learned so far in this tutorial transfers directly, with no new color syntax left to learn for these properties.

Real-World Example: A Styled Alert Box Using Color

To see several color formats working together the way a real page often uses them, here is a small "alert box" combining a named color, a hex border, and an RGBA background tint:

<div style="
    background-color: rgba(255, 165, 0, 0.15);
    border: 2px solid #FFA500;
    color: darkorange;
    padding: 14px;
    border-radius: 6px;
">
    <strong>Notice:</strong> This alert box mixes RGBA, hex, and a named color.
</div>

Reading through this example: the background uses rgba() with a low alpha value so the orange tint stays subtle rather than overwhelming. The border uses the exact hex code for orange already listed in the Common Color Properties table earlier on this page. The text itself simply uses the named color darkorange for readability.

Try pasting this alert box example into the live editor above, then adjust the alpha value, the hex border color, or swap the named text color, to get a feel for how the same small set of color tools can produce a wide range of practical, real-looking UI elements.

Practice Exercises: Test Every Color Format

The fastest way to make named colors, hex codes, RGB, and HSL all feel equally natural is to deliberately practice writing the same color four different ways. Try each of these directly in the live editor above:

1. Style a paragraph's text color using a named color, then rewrite the exact same color as a hex code.
2. Style a div's background using rgba() with an alpha value of 0.2, then try 0.8, and compare how the transparency changes.
3. Pick one hue value in hsl() and create three versions of it with different lightness values, to see a light, medium, and dark shade of the same color.
4. Build a small internal stylesheet with a .highlight class, similar to the Color in CSS example earlier on this page, and apply it to two different paragraphs.
5. Choose two colors from the Common Color Properties table above and check, just by eye, whether one would be readable as text on top of the other.

By the end of these five exercises you will have written every color format covered in this tutorial at least once, which is the quickest way to stop needing to look up the syntax for any of them.

Frequently Asked Questions About HTML Colors