HTML Colors: Color Names, HEX, RGB and HSL

HTML colors can be written as color names, HEX codes, RGB or HSL values. Learn each format, how to color text, backgrounds and borders, and how to pick readable color combinations.

How do you add color in HTML?

HTML itself has no color tags. You add color with CSS, for example with the style attribute you met in the HTML Styles lesson. The three places you will color most often are:

• Text with color.
• Backgrounds with background-color.
• Borders with border, which takes a width, a style and a color.

<p style="color: white; background-color: teal; border: 3px solid darkslategray;">Free delivery on orders over £30</p>

The paragraph has white text on a teal background, with a thick dark grey line around it. Every color format below works in all three places.

Color names: the easy way to start

Browsers know about 140 named colors, such as red, tomato, gold, navy, teal, coral and rebeccapurple. They are easy to read and remember, so they are perfect while you learn.

<h2 style="color: tomato;">Summer Sale</h2>
<p style="background-color: lavender;">Up to 40% off garden furniture.</p>
<p style="border: 2px dashed seagreen;">Offer ends Sunday.</p>

You will see an orange-red heading, a soft purple band behind the sale text, and a dashed green border around the last line.

The problem is that named colors are limited. Your brand blue is probably not exactly royalblue. For exact colors, use one of the number formats.

HEX colors explained

A HEX color starts with # and has six characters, like #2e8b57. The characters come in three pairs: red, green and blue. Each pair goes from 00 (none) to ff (full). HEX uses the digits 0–9 and the letters a–f, which is why it can look strange at first.

HEX	Color	Why
#ff0000	Red	Full red, no green, no blue
#00ff00	Bright green	Full green only
#0000ff	Blue	Full blue only
#000000	Black	No light at all
#ffffff	White	All colors at full
#808080	Grey	Equal middle amounts

You can also write a short three-character version when each pair repeats: #ffcc00 becomes #fc0. HEX is the format you will see most in design tools like Figma, so it is worth getting used to.

RGB and HSL colors

RGB means red, green, blue, the three colors of light that every screen mixes. Each value goes from 0 to 255. rgb(46 139 87) is the same sea green as #2e8b57. Modern CSS separates the numbers with spaces; the older comma style rgb(46, 139, 87) still works everywhere.

HSL means hue, saturation, lightness. Many people find it the most human format:

• Hue is the position on a color wheel, from 0 to 360 degrees: 0 is red, 120 is green, 240 is blue.
• Saturation is how strong the color is: 0% is grey, 100% is very vivid.
• Lightness is how light it is: 0% is black, 50% is normal, 100% is white.

HSL makes it easy to create matching shades. Keep the hue the same and change only the lightness.

<div style="background-color: hsl(210 80% 95%); color: hsl(210 80% 25%); border: 2px solid hsl(210 80% 50%);">
  <h3>Your order is on its way</h3>
  <p>Expected delivery: Thursday.</p>
</div>

All three colors share hue 210 (blue). The background is a very light blue, the text is a dark blue, and the border is a medium blue. It looks calm and matched, because the colors come from one family.

Transparent colors with alpha

You can add a fourth value for alpha, which means transparency. 0 is invisible and 1 is solid. With spaces you write it after a slash: rgb(0 0 0 / 0.5) is black at 50%. HEX can also have eight characters, where the last pair is alpha: #00000080.

<p style="background-color: rgb(255 215 0 / 0.3); border-left: 6px solid rgb(255 165 0);">Tip: book early for weekend tables.</p>

The background is a soft see-through yellow, with a strong orange bar on the left. This is a common style for tip boxes.

How to pick readable colors

Pretty colors are useless if people cannot read the text. Contrast is the difference in lightness between the text and its background. Low contrast, like light grey on white, is hard to read for many people, especially on a phone in sunlight or for people with low vision.

• Aim for a contrast ratio of at least 4.5 to 1 for normal text (this is the WCAG accessibility guideline).
• Dark text on a light background, or light text on a dark background, is the safest choice.
• Don't use color alone to show meaning. "Fields in red are required" fails for colorblind users; add a word or symbol too.
• Use only two or three main colors on a page. Too many colors look messy.

Tip: In Chrome or Edge DevTools, inspect a text element and click its color swatch. The color picker shows the contrast ratio and a tick or cross for accessibility. Firefox has a similar check in its Accessibility panel.

Common mistake: Forgetting the # in HEX colors. color: 2e8b57 is ignored; it must be color: #2e8b57.

Practice exercise

Create a "Success" message box and an "Error" message box. Use HSL for both: green (hue around 130) for success and red (hue around 0) for error. Give each a very light background, dark text in the same hue, and a solid border in a medium shade.

Hint: change only the lightness value to get the three shades, for example 95%, 25% and 45%.

Key takeaways

• Add color with CSS using color, background-color and border.
• Color names are easy; HEX, RGB and HSL give you exact colors.
• HEX #rrggbb and rgb() both describe mixes of red, green and blue light.
• HSL makes matching shades easy: keep the hue, change the lightness.
• Always check contrast so everyone can read your text.