HTML and CSS colors can use named values, hex, rgb, or hsl with optional alpha. Choose a notation that stays readable and verify contrast in every interactive state.
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.
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>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>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>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>| Format | Example | Transparency | Best for |
|---|---|---|---|
| Named | red, tomato | No | Quick prototyping |
| Hex | #e74c3c | No (use #RRGGBBAA) | Most common - design tools output hex |
| RGB | rgb(231, 76, 60) | No | When you know exact RGB values |
| RGBA | rgba(231, 76, 60, 0.5) | Yes | Overlays, semi-transparent backgrounds |
| HSL | hsl(4, 76%, 57%) | No | Generating color variations programmatically |
| HSLA | hsla(4, 76%, 57%, 0.5) | Yes | Transparent color variations |
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>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.
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><section>
<h2>HTML Colors HEX RGB RGBA HSL Color Codes</h2>
<p>Use semantic structure so the content is readable and accessible.</p>
</section><button type="button" aria-label="Review HTML Colors HEX RGB RGBA HSL Color Codes">Review</button>The main formats are named colors, hexadecimal values, RGB/RGBA, and HSL/HSLA. These are usually applied through CSS.
RGB defines red, green, and blue channel values, while RGBA adds an alpha channel for transparency.
HSL makes it easier to think in terms of hue, saturation, and lightness, which can be more intuitive when creating color variations.
Explore 500+ free tutorials across 20+ languages and frameworks.