HTML Colors

HTML colors are used to add visual appeal to web pages. Learn to specify colors using color names, hex codes, RGB, and HSL values for text, backgrounds, and other elements.

Colors play a crucial role in web design, affecting user experience, accessibility, and visual appeal. HTML provides multiple ways to specify colors, each with its own advantages and use cases.

HTML Color Names

HTML supports 140 standard color names that browsers recognize. These are predefined names that make it easy to use common colors.

Color Names Examples

<h1 style="color: red;">Red Heading</h1>
<p style="color: blue;">This paragraph is blue.</p>
<p style="color: green;">This paragraph is green.</p>
<p style="color: purple;">This paragraph is purple.</p>
<p style="color: orange;">This paragraph is orange.</p>

<div style="background-color: yellow; padding: 10px;">
    <p style="color: black;">Black text on yellow background</p>
</div>

<p style="color: darkred;">Visit htmlfreecodes.com for more tutorials!</p>

Result:

Red Heading

This paragraph is blue.

This paragraph is green.

This paragraph is purple.

This paragraph is orange.

Black text on yellow background

Visit htmlfreecodes.com for more tutorials!

Hexadecimal Color Codes

Hexadecimal (hex) color codes start with # followed by 6 characters (0-9, A-F) representing red, green, and blue values. You can also use 3-character shorthand.

Hex Color Examples

<h1 style="color: #FF0000;">Red using #FF0000</h1>
<p style="color: #00FF00;">Green using #00FF00</p>
<p style="color: #0000FF;">Blue using #0000FF</p>
<p style="color: #FF6B35;">Orange using #FF6B35</p>
<p style="color: #6A4C93;">Purple using #6A4C93</p>

<div style="background-color: #F8F8F8; padding: 15px; border: 2px solid #CCCCCC;">
    <p style="color: #333333;">Dark gray text on light gray background</p>
    <p style="color: #666666;">Learn more at htmlfreecodes.com</p>
</div>

<!-- Short hex codes (3 characters) -->
<p style="color: #F00;">Red using short hex #F00</p>
<p style="color: #0F0;">Green using short hex #0F0</p>

Result:

Red using #FF0000

Green using #00FF00

Blue using #0000FF

Orange using #FF6B35

Purple using #6A4C93

Dark gray text on light gray background

Learn more at htmlfreecodes.com

Red using short hex #F00

Green using short hex #0F0

RGB Color Values

RGB colors are specified using the rgb() function with values from 0-255 for red, green, and blue. RGBA adds an alpha channel for transparency.

RGB Color Examples

<h1 style="color: rgb(255, 0, 0);">Red using RGB(255, 0, 0)</h1>
<p style="color: rgb(0, 255, 0);">Green using RGB(0, 255, 0)</p>
<p style="color: rgb(0, 0, 255);">Blue using RGB(0, 0, 255)</p>
<p style="color: rgb(255, 165, 0);">Orange using RGB(255, 165, 0)</p>
<p style="color: rgb(128, 0, 128);">Purple using RGB(128, 0, 128)</p>

<!-- RGB with transparency (RGBA) -->
<div style="background-color: rgba(0, 123, 255, 0.3); padding: 15px;">
    <p style="color: rgba(0, 0, 0, 0.8);">Semi-transparent blue background</p>
    <p style="color: rgb(67, 56, 202);">Visit htmlfreecodes.com</p>
</div>

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

Result:

Red using RGB(255, 0, 0)

Green using RGB(0, 255, 0)

Blue using RGB(0, 0, 255)

Orange using RGB(255, 165, 0)

Purple using RGB(128, 0, 128)

Semi-transparent blue background

Visit htmlfreecodes.com

Semi-transparent red text

HSL Color Values

HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0-360), saturation is a percentage (0-100%), and lightness is a percentage (0-100%).

HSL Color Examples

<h1 style="color: hsl(0, 100%, 50%);">Red using HSL(0, 100%, 50%)</h1>
<p style="color: hsl(120, 100%, 50%);">Green using HSL(120, 100%, 50%)</p>
<p style="color: hsl(240, 100%, 50%);">Blue using HSL(240, 100%, 50%)</p>
<p style="color: hsl(39, 100%, 50%);">Orange using HSL(39, 100%, 50%)</p>
<p style="color: hsl(300, 100%, 25%);">Purple using HSL(300, 100%, 25%)</p>

<!-- Different saturation and lightness -->
<div style="background-color: hsl(200, 50%, 90%); padding: 15px;">
    <p style="color: hsl(200, 100%, 20%);">Light blue background with dark blue text</p>
    <p style="color: hsl(200, 80%, 30%);">Learn at htmlfreecodes.com</p>
</div>

<!-- HSL with transparency (HSLA) -->
<p style="color: hsla(120, 100%, 50%, 0.5);">Semi-transparent green</p>

Result:

Red using HSL(0, 100%, 50%)

Green using HSL(120, 100%, 50%)

Blue using HSL(240, 100%, 50%)

Orange using HSL(39, 100%, 50%)

Purple using HSL(300, 100%, 25%)

Light blue background with dark blue text

Learn at htmlfreecodes.com

Semi-transparent green

Background Colors

Use the background-color property to set background colors for HTML elements. This can be applied to any HTML element.

Background Color Examples

<body style="background-color: #f0f8ff;">
    <h1 style="background-color: #4CAF50; color: white; padding: 10px;">
        Green Background Header
    </h1>

    <div style="background-color: lightblue; padding: 20px; margin: 10px 0;">
        <h2 style="color: darkblue;">Light Blue Section</h2>
        <p>This div has a light blue background.</p>
    </div>

    <div style="background-color: #FFE5B4; padding: 20px; margin: 10px 0;">
        <h2 style="color: #8B4513;">Peach Section</h2>
        <p>Visit htmlfreecodes.com for more color examples.</p>
    </div>

    <p style="background-color: yellow; color: black; padding: 10px;">
        Yellow highlighted paragraph
    </p>
</body>

Result:

Green Background Header

Light Blue Section

This div has a light blue background.

Peach Section

Visit htmlfreecodes.com for more color examples.

Yellow highlighted paragraph

Popular Color Combinations

Here are some popular color combinations for web design that provide good contrast and visual appeal.

Color Combination Examples

<!-- Professional Blue Theme -->
<div style="background-color: #2c3e50; color: #ecf0f1; padding: 15px;">
    <h3>Professional Blue Theme</h3>
    <p>Dark blue background with light text - htmlfreecodes.com</p>
</div>

<!-- Fresh Green Theme -->
<div style="background-color: #27ae60; color: white; padding: 15px;">
    <h3>Fresh Green Theme</h3>
    <p>Green background with white text for nature themes</p>
</div>

<!-- Warning Orange Theme -->
<div style="background-color: #f39c12; color: #2c3e50; padding: 15px;">
    <h3>Warning Orange Theme</h3>
    <p>Orange background with dark text for alerts</p>
</div>

<!-- Elegant Gray Theme -->
<div style="background-color: #95a5a6; color: #2c3e50; padding: 15px;">
    <h3>Elegant Gray Theme</h3>
    <p>Gray background for subtle, professional designs</p>
</div>

Result:

Professional Blue Theme

Dark blue background with light text - htmlfreecodes.com

Fresh Green Theme

Green background with white text for nature themes

Warning Orange Theme

Orange background with dark text for alerts

Elegant Gray Theme

Gray background for subtle, professional designs

Complete Colors Example

Here's a comprehensive example that demonstrates different color methods working together:

Complete Color Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Colors Tutorial</title>
</head>
<body style="background-color: #f4f4f4;">
    <header style="background-color: navy; color: white; padding: 20px;">
        <h1>HTML Colors Showcase</h1>
    </header>

    <main style="padding: 20px;">
        <section style="background-color: rgb(255, 248, 220); padding: 15px; margin: 10px 0;">
            <h2 style="color: #8B4513;">Color Names</h2>
            <p style="color: darkgreen;">Using color names like 'darkgreen'</p>
        </section>

        <section style="background-color: hsl(200, 80%, 95%); padding: 15px; margin: 10px 0;">
            <h2 style="color: hsl(200, 100%, 25%);">HSL Colors</h2>
            <p style="color: hsl(200, 80%, 30%);">Using HSL for consistent color variations</p>
        </section>

        <footer style="background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px;">
            <p>Learn more at htmlfreecodes.com</p>
        </footer>
    </main>
</body>
</html>

♿ Accessibility Guidelines

Always ensure sufficient color contrast! Follow these guidelines:

  • Minimum contrast ratio of 4.5:1 for normal text
  • Minimum contrast ratio of 3:1 for large text
  • Don't rely on color alone to convey information
  • Test your colors with accessibility tools
  • Consider color-blind users when choosing colors

Try it Yourself

Experiment with different color methods and combinations!

Try Colors Example

Test Your Knowledge

Previous HTML Comments
Next HTML CSS