HTML Colors and Inline Styles

Change text and background colours with the style attribute, write colours as names, HEX, RGB and HSL values, and learn when inline styles are the right tool.

Lesson 12 of 44Beginner15 min read

Plain black text on a white background works, but most websites use colour to show their brand, highlight important information and make pages easier to scan. The quickest way to add colour to a single element in HTML is the style attribute, which holds CSS declarations directly on the element.

With style you can change the text colour, the background colour, the font size, alignment and much more: <p style="color: navy;">. Colours themselves can be written in several ways: as a name like tomato, a HEX code like #ff6347, an RGB value like rgb(255, 99, 71) or an HSL value like hsl(9, 100%, 64%). All four can describe the same colour.

This lesson is your first step into styling. You'll learn the colour formats, how inline styles work, how to keep text readable with good contrast, and why real projects move most styling into CSS files, which the CSS tutorial covers in depth.

The style attribute

HTML
<p style="color: white; background-color: teal; padding: 8px;">Inline styled text</p>
  • The value is one or more CSS declarations: a property, a colon, a value and a semicolon.
  • color sets the text colour; background-color sets the background.
  • Other common properties: font-size, font-family, text-align, padding, border.
  • Inline styles apply to that one element only, and they override most rules in style sheets.

Four ways to write a colour

FormatExampleNotes
Nametomato, navy, gold140+ named colours; easy to read
HEX#ff6347 or short #f63Red, green and blue as two-digit hex pairs
RGBrgb(255 99 71)Each channel from 0 to 255
HSLhsl(9 100% 64%)Hue (0 to 360), saturation and lightness

Add transparency with an alpha value: #ff634780, rgb(255 99 71 / 50%) or hsl(9 100% 64% / 0.5). HSL is handy for making lighter or darker shades of one colour by changing only the lightness.

Readable colour and when to use inline styles

  • Contrast is the difference between text and background brightness. Low contrast, such as light grey on white, is hard to read for many people, especially on phones outdoors. Aim for a contrast ratio of at least 4.5 to 1 for normal text; browser developer tools show the ratio when you inspect a colour.
  • Don't rely on colour alone to carry meaning: an error message should say "Error", not just be red.
  • When to use inline styles: quick experiments, one-off tweaks, HTML emails and values set by JavaScript. For a whole site, put styles in a CSS file so one change updates every page, as explained in adding CSS to HTML.

HTML Colors Syntax

Colour and style syntax

<p style="color: navy;">Navy text</p>
<p style="background-color: #fff3c4;">Pale yellow background</p>
<p style="color: rgb(220 38 38);">Red with RGB</p>
<p style="color: hsl(150 60% 30%);">Green with HSL</p>
<div style="background: rgb(0 0 0 / 60%); color: white;">Semi-transparent black</div>
<h1 style="font-size: 40px; text-align: center;">Big centred heading</h1>

HTML Colors Summary

  • The style attribute holds CSS declarations for one element.
  • color changes text colour and background-color changes the background.
  • Colours can be names, HEX, RGB or HSL, and can include transparency.
  • Keep text readable with strong contrast, at least 4.5 to 1 for body text.
  • Use inline styles for one-off cases; use CSS files for real sites.

HTML Colors Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

The same colour four ways

<p style="color: white; background-color: tomato; padding: 8px;">Named: tomato</p>
<p style="color: white; background-color: #ff6347; padding: 8px;">HEX: #ff6347</p>
<p style="color: white; background-color: rgb(255 99 71); padding: 8px;">RGB: rgb(255 99 71)</p>
<p style="color: white; background-color: hsl(9 100% 64%); padding: 8px;">HSL: hsl(9 100% 64%)</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 4All four lines produce exactly the same orange-red background.
  2. Line 1padding adds space inside the coloured box so the text isn't cramped.
Example 2

Shades with HSL and transparency

<div style="background: hsl(210 80% 92%); padding: 10px;">Lightness 92%</div>
<div style="background: hsl(210 80% 70%); padding: 10px;">Lightness 70%</div>
<div style="background: hsl(210 80% 45%); padding: 10px; color: white;">Lightness 45%</div>
<div style="background: hsl(210 80% 25%); padding: 10px; color: white;">Lightness 25%</div>
<p style="background: hsl(210 80% 45% / 30%); padding: 10px;">Same blue at 30% opacity</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 4Changing only the lightness gives a family of matching blues, from pale to dark.
  2. Lines 3 to 4Darker backgrounds need white text to keep good contrast.
  3. Line 5The value after the slash makes the colour see-through.
Example 3

Readable and unreadable contrast

<p style="color: #c8c8c8; background: white; padding: 8px;">Light grey on white is hard to read.</p>
<p style="color: #1f2937; background: white; padding: 8px;">Dark grey on white is easy to read.</p>
<p style="color: #b91c1c; font-weight: bold;">Error: please enter your email address.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Very low contrast, which fails accessibility guidelines.
  2. Line 2High contrast, comfortable for long reading.
  3. Line 3The message says "Error" in words, so it doesn't rely on red alone.

Common HTML Colors Mistakes

Forgetting the colon or semicolon

Don't
<p style="color red background-color yellow">Hi</p>
Do
<p style="color: red; background-color: yellow;">Hi</p>

Each declaration needs property: value;, or the browser ignores it.

Using the old font and bgcolor attributes

Don't
<font color="red">Sale!</font>
<body bgcolor="yellow">
Do
<p style="color: red;">Sale!</p>
<body style="background-color: yellow;">

<font> and bgcolor are obsolete. Use CSS properties instead.

Styling every element inline

Don't
<p style="color: #333; font-size: 16px;">One</p>
<p style="color: #333; font-size: 16px;">Two</p>
<p style="color: #333; font-size: 16px;">Three</p>
Do
<style> p { color: #333; font-size: 16px; } </style>
<p>One</p><p>Two</p><p>Three</p>

Repeated inline styles are hard to change; one CSS rule styles them all.

HTML Colors in Real Projects

Colour in practice

Brand guidelines list colours as HEX codes, design tools like Figma export HEX and RGB values, and CSS frameworks define palettes in HSL. Inline styles survive mostly in HTML emails, where many email apps ignore style sheets, and in values set by JavaScript, such as a progress bar's width or a user-chosen theme colour.

HTML Colors Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the inline style to make the text blue.

<p style=": blue;">Blue text</p>
Multiple choiceeasy

Which property changes the background colour?

Multiple choicemedium

Which of these is the same colour as #000000?

Multiple choicemedium

Why is light grey text on a white background a problem?

Fix the bugmedium

The style declarations are written incorrectly. Fix them so the box has white text on a dark green (#14532d) background with 12px padding.

<div class="box" style="color=white, background-color=#14532d, padding=12px">Welcome!</div>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Text is white
  • Background is dark green
  • Padding is 12px

HTML Colors Quiz

5 questions to check what you learned.

  1. What does the style attribute contain?

    • HTML tags
    • CSS declarations
    • JavaScript
    • A file name

  2. In rgb(255 0 0), what colour is shown?

    • Green
    • Red
    • Blue
    • Black

  3. What does the value after the slash in rgb(0 0 0 / 50%) control?

    • Transparency (alpha)
    • Brightness
    • Hue
    • Size

  4. Which colour format makes it easiest to create lighter and darker shades?

    • Names
    • HEX
    • HSL
    • None

  5. Why are inline styles avoided for whole websites?

    • Browsers ignore them
    • They don't support colours
    • They must be repeated on every element and are hard to update consistently
    • They make pages invalid

HTML Colors Challenge

A colourful notice

Create a notice box:

  1. A <div class="notice"> with an inline style
  2. Background colour #fef3c7 and text colour #78350f
  3. Padding of 16px and a <strong> word inside
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The notice has a pale yellow background
  • The text is dark brown
  • 16px padding
  • Contains a strong element

Related HTML topics

05AttributesGive elements extra information with name="value" pairs.08Text FormattingBold, italic, highlighted, deleted and code text, chosen for meaning.06ColorsColour names, HEX, RGB, HSL, transparency and contrast.
Esc
↑↓ to navigateEnter to open