HTML Colors

Color Formats in HTML

Colors in HTML are usually applied with CSS, either through the style attribute, an internal stylesheet, or an external stylesheet. They are used for text, backgrounds, borders, outlines, shadows, and many other visual effects.

Modern browsers support several color formats, and each one has its own strengths. Some are short and readable, some are better for transparency, and others are easier when you want to adjust hue, saturation, or lightness.

1. Color Names

HTML supports 140+ named colors. Simple and readable, but limited.

<p style="color: red;">Red text</p>
<p style="color: blue;">Blue text</p>
<p style="color: green;">Green text</p>
<p style="background-color: yellow;">Yellow background</p>
<p style="color: tomato;">Tomato</p>
<p style="color: steelblue;">Steel Blue</p>
<p style="color: coral;">Coral</p>

2. Hexadecimal (Hex)

The most common format is hexadecimal, written as #RRGGBB. Each pair represents the intensity of red, green, and blue using hexadecimal values from 00 to FF.

<!-- Full hex: #RRGGBB -->
<p style="color: #ff0000;">Red</p>
<p style="color: #00ff00;">Green</p>
<p style="color: #0000ff;">Blue</p>
<p style="color: #ffffff; background:#333;">White on dark</p>
<p style="color: #000000;">Black</p>
<p style="color: #e74c3c;">Custom red</p>
<p style="color: #3498db;">Custom blue</p>

<!-- Shorthand hex: #RGB (when pairs are identical) -->
<p style="color: #f00;">Red (shorthand)</p>
<p style="color: #0f0;">Green (shorthand)</p>
<p style="color: #fff;">White (shorthand)</p>

3. RGB & RGBA

rgb(red, green, blue) uses decimal values from 0 to 255 for each color channel. rgba adds an alpha value for transparency, where 0 means fully transparent and 1 means fully opaque.

<!-- RGB -->
<p style="color: rgb(255, 0, 0);">Red</p>
<p style="color: rgb(0, 128, 0);">Green</p>
<p style="color: rgb(52, 152, 219);">Custom blue</p>

<!-- RGBA - with transparency -->
<p style="background-color: rgba(231, 76, 60, 1.0);">Fully opaque red</p>
<p style="background-color: rgba(231, 76, 60, 0.5);">50% transparent red</p>
<p style="background-color: rgba(231, 76, 60, 0.1);">10% transparent red</p>

<!-- Overlay effect -->
<div style="background: url('photo.jpg'); padding: 20px;">
    <div style="background: rgba(0,0,0,0.5); color: white; padding: 10px;">
        Dark overlay on image
    </div>
</div>

4. HSL & HSLA

hsl(hue, saturation%, lightness%) is often easier to understand when adjusting colors. Hue represents the color wheel angle from 0 to 360, while saturation and lightness are percentages.

<!-- HSL: hue(0-360), saturation(%), lightness(%) -->
<p style="color: hsl(0, 100%, 50%);">Red (hue=0)</p>
<p style="color: hsl(120, 100%, 35%);">Green (hue=120)</p>
<p style="color: hsl(240, 100%, 50%);">Blue (hue=240)</p>
<p style="color: hsl(39, 100%, 50%);">Orange (hue=39)</p>

<!-- Lightness variations of the same hue -->
<p style="background: hsl(210, 80%, 20%);">Dark blue</p>
<p style="background: hsl(210, 80%, 50%);">Medium blue</p>
<p style="background: hsl(210, 80%, 80%);">Light blue</p>

<!-- HSLA with transparency -->
<p style="background: hsla(210, 80%, 50%, 0.5);">50% transparent blue</p>

Color Formats Comparison

Common Color Properties

Colors are not limited to text. In real web pages, they are also applied to backgrounds, borders, form focus states, icons, shadows, and more. This makes color one of the most important design tools in HTML and CSS.

<!-- Text color -->
<p style="color: #2c3e50;">Dark text</p>

<!-- Background color -->
<div style="background-color: #ecf0f1; padding: 10px;">Light background</div>

<!-- Border color -->
<div style="border: 2px solid #3498db; padding: 10px;">Blue border</div>

<!-- Outline color -->
<input style="outline-color: #e74c3c;" type="text" placeholder="Red outline on focus">

<!-- currentColor - inherits the element's color value -->
<div style="color: #e74c3c; border: 2px solid currentColor;">
    Border matches text color
</div>

Where Colors Are Commonly Used

• Text color for headings, paragraphs, links, and labels.
• Background color for sections, cards, buttons, and alerts.
• Border and outline colors for inputs, tables, and focus states.
• Transparent overlays for images, modals, and hero sections.
• Theme systems using reusable CSS variables or utility classes.

Choosing the Right Color Format

There is no single best format for every situation. Hex values are common in design tools and style guides, RGB and RGBA are useful when working with transparency, and HSL/HSLA are often easier when you want to adjust brightness or create variations of the same color.

• Use named colors for quick demos and simple examples.
• Use hex for most everyday design and UI work.
• Use RGBA or HSLA when you need transparency.
• Use HSL when you want to generate lighter, darker, or more muted versions easily.

Color Contrast and Accessibility

Good color choices are not only about appearance. Text must have enough contrast against its background so users can read it comfortably. Low-contrast combinations such as light gray text on a white background may look stylish at first but are difficult for many users to read.

Accessible design usually means choosing colors with clear contrast, especially for body text, buttons, links, and form controls. Important information should never depend on color alone.

<!-- Better contrast -->
<p style="color:#1f2937; background:#ffffff;">Readable dark text on white</p>

<!-- Poor contrast -->
<p style="color:#d1d5db; background:#ffffff;">Hard to read light gray text</p>

Best Practices

• Keep a consistent color palette across the page or site.
• Maintain strong contrast between text and backgrounds.
• Use transparency carefully so layered content stays readable.
• Prefer CSS classes or variables for repeated colors instead of inline styles everywhere.
• Do not rely on color alone to communicate errors, warnings, or success states.