Colour Values: Giving Your Page a Palette

Your page has a coloured name, lavender sections, and a bordered Skills, all living in styles.css from the last lesson. This lesson gives it a real palette: colours chosen on purpose, in three different forms, applied to your name, your sections, and the page itself.

The concept

Here is your page as it stands. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat">GitHub</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

Every colour you have used so far, darkslateblue, lavender, teal, is a named colour: a plain English word the browser already understands. There are more where those came from. Run this:

THREE MORE NAMES, THE SAME WAY · HTML

Untitled

RUN TO SEE YOUR PAGE

Three more words, three more colours, written the exact same way. Named colours cover a lot of ground, but the list is fixed. Sooner or later you want an exact shade no name covers. Run this:

THE SAME NAVY, WRITTEN TWO WAYS · HTML

Untitled

RUN TO SEE YOUR PAGE

Two boxes, one identical navy. The first is written as #2b3a67, a hex colour. The second is written as rgb(43, 58, 103). Both describe the same three amounts of red, green and blue, one in base 16, the other in base 10. Neither depends on a name existing for that exact shade.

The syntax

A named colour is the word alone.

h1 {
  color: coral;
}

A hex colour starts with #, followed by six digits. Two are for red, two for green, two for blue, each pair running from 00 to ff.

h1 {
  color: #2b3a67;
}

An rgb() value lists the same three amounts as plain numbers, separated by commas. Each number runs from 0 to 255.

h1 {
  color: rgb(43, 58, 103);
}

Either property, color or background-color, accepts any of the three forms equally. Pick whichever names the shade you actually want. A name is quick to type. Hex and rgb reach shades no name covers.

One more thing decides whether a colour choice actually works: contrast, how much a foreground colour stands out against its background. Dark text on a light background, or the reverse, reads well. Two close shades sitting together do not, no matter how valid the CSS is. Common mistakes below shows exactly what that looks like.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Colour values</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Your Name</h1>
    <p>A short bio line.</p>
  </body>
</html>

styles.css

body {
  background-color: ghostwhite;
}
h1 {
  color: #2b3a67;
}
p {
  color: rgb(60, 60, 60);
}

One named colour, one hex colour, one rgb value, three properties, one page.

Common mistakes

You write color: 2b3a67; and nothing turns navy. The # is not decoration. Without it, the value is not a colour the browser recognises at all. Run it:

A HEX VALUE WITH NO # · HTML

Untitled

RUN TO SEE YOUR PAGE

The heading keeps its previous colour. No error names the problem. Check for a missing # first whenever a hex value does nothing.

You write rgb(43, 58) and forget the third number. Run it:

AN RGB() WITH ONE NUMBER MISSING · HTML

Untitled

RUN TO SEE YOUR PAGE

rgb() always needs red, green and blue. Two numbers are not enough, so the whole declaration is invalid and gets ignored, the same silent way a missing # does.

Your colours are both valid, and the page still fails you. Run this pale card:

TEXT YOU CAN BARELY READ · HTML

Untitled

RUN TO SEE YOUR PAGE

Nothing is broken. lightgray on a pale background is a real, working declaration. It is also close to unreadable. Compare it with the same card, changed only in its text colour:

THE SAME CARD, WITH A DARKER TEXT COLOUR · HTML

Untitled

RUN TO SEE YOUR PAGE

Same background, one darker color value. Browsers never flag a low-contrast pairing as an error, since it is a design choice, not a mistake in the code. When text looks faint or strains the eye, check how close its color sits to its background-color, and move one of them further away.

Try it yourself

Your page still wears the same three colours from the last several lessons. Give it a real palette. After each Run that checks Skills, scroll the preview to Skills if you do not see the teal border yet.

Run the starting code below. Scroll the preview to Skills if you do not see it yet. Confirm your name is dark slate blue, your sections are lavender, and Skills keeps its teal border, all on a plain white page.
Add a background-color to body, using a named colour such as ghostwhite. Run it. Confirm the whole page's background changes, not only one section.
Change h1's color to a hex value: #2b3a67. Run it. Confirm your name shifts to this new navy.
Change .block's background-color to rgb(237, 242, 244). Run it. Scroll through the sections if you need to. Confirm every section now shares this pale grey-blue instead of lavender.
Break it on purpose: add color: lightgray; inside the .block rule. Run it. Scroll through the sections if you need to. Confirm the text inside every section is now hard to read against its own background.
Fix it: remove that line, or change it to a dark value such as color: #333333;. Run it. Scroll through the sections if you need to. Confirm the text is readable again.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your page now carries a real palette: a named background, a hex heading, and an rgb section colour, chosen on purpose instead of borrowed. The next lesson moves that stylesheet into a folder, breaks the path on purpose, and repairs it. You will learn exactly how a browser decides where styles.css actually is.