HTML Colors
Learn all HTML color formats — color names, HEX codes, RGB, RGBA, HSL, and HSLA — with live color swatches, real examples, and practical tips for using colors in your webpages.
- What are HTML Colors?
- Color Names
- HEX Color Codes
- RGB Colors
- RGBA (with Opacity)
- HSL Colors
- HSLA (with Opacity)
- Where to Use Colors
- Related Lessons
- Try It Yourself
- FAQ
What are HTML Colors?
Colors in HTML are specified using CSS color values. You can set colors on text, backgrounds, borders, and many other elements. HTML supports 5 different ways to define a color — each with its own use cases and advantages.
Colors are a core part of web design. Learning to use them correctly helps you build beautiful, accessible, and professional-looking websites. You'll use color knowledge in every lesson from here on — in HTML Styles, HTML Tables, HTML Links, and beyond.
Color Names
HTML supports 140+ predefined color names that all modern browsers understand directly. You just type the color name as a string — no numbers needed. Great for beginners and quick prototyping.
<!-- Color names on text --> <h1 style="color: tomato;">Tomato Heading</h1> <p style="color: dodgerblue;">Blue paragraph</p> <!-- Color names on backgrounds --> <body style="background-color: powderblue;"> <div style="background-color: limegreen; color: white;"> Green box </div>
Tomato Heading
Blue paragraph text
When to use color names: Color names are perfect for learning and quick styling. For production websites, use HEX or RGB for more precise color control. You already used color in the HTML Styles lesson — here you'll learn the full range of formats.
HEX Color Codes
#RRGGBB — Hexadecimal Colors
HEX colors start with # followed by 6 hex digits — 2 for Red, 2 for Green, 2 for Blue. Each pair ranges from 00 (none) to ff (maximum). The shorthand form uses 3 digits: #rgb.
<h1 style="color: #ff6347;">Tomato (#ff6347)</h1> <p style="color: #7c3aed;">Purple text (#7c3aed)</p> <div style="background-color: #0f172a; color: #f8fafc; padding: 8px;"> Dark background, light text </div> <!-- Shorthand: #rgb (same as #rrggbb when digits repeat) --> <p style="color: #f00;">Red (shorthand)</p> <p style="color: #000;">Black (shorthand)</p>
RGB Colors
rgb(r, g, b) — Red Green Blue
RGB uses three values — one each for Red, Green, and Blue. Each value ranges from 0 (none) to 255 (maximum). Mix these three channels to produce any color.
<h1 style="color: rgb(255, 99, 71);">Tomato</h1> <p style="color: rgb(124, 58, 237);">Purple</p> <p style="color: rgb(0, 0, 0);">Black (0,0,0)</p> <p style="color: rgb(255, 255, 255);">White (255,255,255)</p> <p style="color: rgb(100, 100, 100);">Gray (equal values)</p>
RGB quick tips: rgb(0,0,0) = black | rgb(255,255,255) = white | Equal R, G, B values always make shades of gray.
RGBA — RGB with Opacity
rgba(r, g, b, a) — RGB + Alpha
RGBA is just like RGB but with a 4th value — the alpha channel — which controls opacity/transparency. Alpha ranges from 0 (fully transparent) to 1 (fully opaque). Use it for overlays, glassmorphism, and subtle UI effects.
<!-- Fully opaque --> <p style="background: rgba(124, 58, 237, 1.0); color: white; padding: 8px;"> Fully opaque purple </p> <!-- 50% transparent --> <p style="background: rgba(124, 58, 237, 0.5); color: white; padding: 8px;"> 50% transparent purple </p> <!-- Dark overlay --> <div style="background: rgba(0, 0, 0, 0.4); color: white; padding: 8px;"> Dark semi-transparent overlay </div>
HSL Colors
hsl(hue, saturation, lightness)
Hue is the color wheel angle (0–360°): 0/360 = red, 120 = green, 240 = blue. Saturation is how vivid the color is (0% = gray, 100% = pure color). Lightness is how bright it is (0% = black, 50% = normal, 100% = white).
HSL is the most human-friendly format — if you want a lighter or darker version of a color, simply change the lightness value.
<!-- hsl(hue, saturation%, lightness%) --> <p style="color: hsl(0, 100%, 50%);">Red</p> <p style="color: hsl(120, 100%, 35%);">Green</p> <p style="color: hsl(240, 100%, 60%);">Blue</p> <p style="color: hsl(270, 70%, 50%);">Purple</p> <!-- Lightness variants of same hue --> <p style="color: hsl(270, 70%, 20%);">Dark purple</p> <p style="color: hsl(270, 70%, 80%);">Light purple</p>
HSLA — HSL with Opacity
hsla(h, s%, l%, a) — HSL + Alpha
HSLA adds an alpha (opacity) channel to HSL — exactly like RGBA does for RGB. The alpha value ranges from 0 (transparent) to 1 (opaque). Use HSLA when you want precise hue control and transparency together.
<p style="background: hsla(270, 70%, 50%, 1.0); color:white; padding:8px;"> Fully opaque </p> <p style="background: hsla(270, 70%, 50%, 0.5); color:white; padding:8px;"> Half transparent </p> <p style="background: hsla(270, 70%, 50%, 0.2); padding:8px;"> Very transparent </p>
Where to Use Colors in HTML
You can apply color to almost any HTML element using these three CSS properties: color for text, background-color for backgrounds, and border for borders.
<!-- Text color --> <p style="color: #7c3aed;">Purple text</p> <!-- Background color --> <div style="background-color: #f3eeff; padding: 10px;"> Light purple box </div> <!-- Border color --> <p style="border: 2px solid #e85d04; padding: 8px;"> Orange border </p> <!-- All three combined --> <h2 style="color: white; background: #7c3aed; border-bottom: 3px solid #e85d04; padding: 10px;"> TipsInLearning </h2>
Purple text
Orange border
TipsInLearning
Which format should I use? Use HEX when copying from a color picker. Use RGBA when you need transparency in JavaScript or overlays. Use HSL when you want to easily tweak shades — just change the lightness value to go darker or lighter.
Related HTML Lessons
Colors are used across almost every HTML topic. Continue your learning with these closely related lessons from the same course:
Try It Yourself
HTML supports 5 color formats: named colors (e.g. tomato), HEX codes (#rrggbb), RGB values rgb(r,g,b), RGBA rgba(r,g,b,a) with opacity, and HSL/HSLA hsl(h,s%,l%). All formats work in any modern browser.
RGB takes three values for Red, Green, and Blue (0–255 each). RGBA adds a fourth alpha value (0–1) that controls transparency — 0 is fully transparent, 1 is fully opaque. Use RGBA any time you need a semi-transparent color effect.
HTML and CSS support 140+ predefined color names, such as tomato, dodgerblue, limegreen, and hotpink. These are recognized by all modern browsers without needing a number value.
Use HEX for most cases — it's easy to copy from color pickers and widely used. Use RGBA when you need opacity or transparency. Use HSL when you want to tweak shades easily — just change the lightness percentage to go darker or lighter without changing the hue.
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360°), Saturation is the vibrancy (0%=gray, 100%=vivid), and Lightness controls brightness (0%=black, 50%=normal, 100%=white). It's the most intuitive format for adjusting color shades.
Yes! You can apply colors to any HTML element using the CSS color property for text, background-color for backgrounds, and the border property for borders. These work on headings, paragraphs, divs, tables, links, and every other element.