• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Colors

← Previous Next →

Colors play an important role in shaping the look of a webpage. They help highlight text, separate sections, create visual focus and give a page a more polished appearance. HTML supports several color formats, and these formats are the same ones used in CSS. Learning them now will make styling easier when you move to CSS.

This chapter explains how color names, HEX values, RGB, RGBA, HSL and HSLA work, and how to apply colors to text, backgrounds and borders using inline styles.

What Are HTML Colors?

HTML colors allow you to change the appearance of any element. You can apply a color to:

  • Text

  • Backgrounds

  • Borders

  • Boxes and sections

Colors are usually applied through the style attribute inside an HTML tag.

Example:

<p style="color: red;">This is red text.</p>

Even though full styling happens in CSS, inline colors are useful for learning and for small adjustments.

Using Color Names

HTML supports many predefined color names such as red, blue, green, orange, purple, teal and yellow. These are the easiest to use.

Example:

<p style="color: blue;">Simple blue text.</p>

Color names are good for quick testing but not ideal for detailed design because you cannot choose exact shades.

HEX Color Codes

HEX values are the most common color format on websites. A HEX color starts with # and is followed by six characters that represent red, green and blue values.

Example:

<p style="color: #ff5722;">Bright orange text using HEX.</p>

HEX codes are widely used for branding, themes and UI designs.

RGB Colors

RGB stands for Red, Green and Blue. Each value ranges from 0 to 255.

Example:

<p style="color: rgb(0, 150, 136);">Teal text using RGB.</p>

RGB is useful when adjusting shades or matching colors precisely.

RGBA Colors

RGBA is the same as RGB but includes an opacity value.
Opacity ranges between:

  • 0.0 – fully transparent

  • 1.0 – fully opaque

Example:

<div style="background-color: rgba(33, 150, 243, 0.3);">
    Transparent blue background box.
</div>

RGBA is often used for overlays and soft background sections.

HSL Colors

HSL stands for Hue, Saturation and Lightness.
Designers often prefer HSL because it feels more natural to adjust colors using lightness and saturation.

Example:

<p style="color: hsl(340, 70%, 45%);">Pink shade using HSL.</p>

HSLA Colors

HSLA adds transparency to HSL values.

Example:

<div style="background-color: hsla(200, 80%, 40%, 0.4);">
    Transparent box using HSLA.
</div>

Applying Color to Text

You can apply color to any text element.

Example:

<h2 style="color: #3f51b5;">Welcome to Bengaluru</h2>
<p style="color: #616161;">This is a paragraph with a neutral color.</p>

You can also color part of a sentence using <span>.

<p>
    Aarohi visited <span style="color: #d32f2f;">Cubbon Park</span> last week.
</p>

Applying Background Colors

Backgrounds help highlight sections and improve readability.

Example:

<div style="background-color: #f0f0f0; padding: 15px;">
    Light grey background example.
</div>

Another example:

<div style="background-color: rgb(255, 236, 179); padding: 15px;">
    Important update for visitors.
</div>

Applying Border Colors

Borders look more defined when color is added.

Example:

<div style="border: 2px solid #4caf50; padding: 10px;">
    Green border with padding.
</div>

Combined styling:

<div style="border: 2px solid #3f51b5; background-color: #e8eaf6; padding: 15px;">
    Review from a visitor in Jaipur.
</div>

Transparent Color Effects

Transparent colors are helpful when placing text over images.

Example:

<div style="background-color: rgba(0, 0, 0, 0.6); color: white; padding: 20px;">
    Overlay text example.
</div>

Choosing the Right Color Format

Format Best Use Case
Color Names Simple tests
HEX Branding and UI
RGB Precise shade control
RGBA Transparent effects
HSL Easy shade adjustments
HSLA Transparent HSL colors

Example: Small Color-Based Section

<div style="background-color: #fff3e0; padding: 20px;">
    <h3 style="color: #e65100;">Welcome to Ahmedabad</h3>
    <p style="color: #4e342e;">
        This example shows how heading color, background color and text color work together.
    </p>
</div>

Summary of HTML Colors

In this chapter, you learned how HTML handles colors using different formats such as color names, HEX, RGB, RGBA, HSL and HSLA. You also saw how to apply colors to text, backgrounds and borders, and how to use transparent color effects for overlays. Each color format has its own purpose, and understanding them makes your styling work easier when you start using CSS.

Practice Questions

Q1. Create a paragraph with text color set to blue using a color name.

Q2. Use a hex code to make text green.

Q3. Apply a yellow background to a heading.

Q4. Use rgb() to display red text.

Q5. Display semi-transparent text using rgba().

Q6. Style a box with a background color and white text.

Q7. Use hsl() to color a paragraph dark blue.

Q8. Create a button with a colored border using style.

Q9. Add color to a table header using background-color.

Q10. Make a full section background orange and text black.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top