Learn HTML and CSS: Colours

Colours

Gino puts a colour swatch on the table: the petrol green of the chairs in the salon. "Can the site have that colour?" Sure, once you know how to explain a colour to the browser.

Names and hex codes

The easiest colours have a name: red, teal, crimson… CSS knows about 140 of them.

For an exact colour you use a hex code: a # and six characters from 0 to 9 and a to f. Two for red, two for green, two for blue. 00 is none, ff is all.

So #2a9d8f is a little red, lots of green and slightly less blue: Gino's petrol green.

style.css

1h1 {2  color: crimson;3}4h2 {5  color: #2a9d8f;6}

kapsalon.example

rgb and hsl

The same colour works with numbers too. rgb(42 157 143) gives red, green and blue from 0 to 255: exactly the same as #2a9d8f.

hsl works differently, more like people think about colour. The first number is the hue, an angle on the colour wheel: 0 is red, 120 green, 240 blue. Then the saturation (0% is grey, 100% vivid) and the lightness (0% black, 50% the colour itself, 100% white).

Here the name is rgb and the subheadings are hsl(350 60% 45%), a deep pink.

style.css

1h1 {2  color: rgb(42 157 143);3}4h2 {5  color: hsl(350 60% 45%);6}

kapsalon.example

Try it yourself

Make the name at the top petrol green (#2a9d8f) and the subheadings dark red: red 150, green 30, blue 45. Write that second colour any way you like.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Snip &amp; Curl hair salon</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="name">Snip &amp; Curl</h1>11      <p class="slogan">Hair salon in the heart of Leeds</p>12    </header>13    <main>14      <h2>Our prices</h2>15      <ul class="price-list">16        <li><span class="service">Haircut</span> <span class="price">£28</span></li>17        <li><span class="service">Wash and blow-dry</span> <span class="price">£22</span></li>18        <li><span class="service">Colouring</span> <span class="price">£55</span></li>19      </ul>20      <section id="booking">21        <h2>Book an appointment</h2>22        <p class="info">Give us a call or just pop in.</p>23        <a class="button" href="tel:+441134960000">Call us</a>24      </section>25    </main>26    <footer>27      <p>8 Kirkgate, Leeds</p>28    </footer>29  </body>30</html>

kapsalon.example

Ready for more?

The full lesson has 6 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Names and hex codes

The easiest colours have a name: red, teal, crimson… CSS knows about 140 of them.

For an exact colour you use a hex code: a # and six characters from 0 to 9 and a to f. Two for red, two for green, two for blue. 00 is none, ff is all.

So #2a9d8f is a little red, lots of green and slightly less blue: Gino's petrol green.

style.css

1h1 {2  color: crimson;3}4h2 {5  color: #2a9d8f;6}

kapsalon.example

rgb and hsl

The same colour works with numbers too. rgb(42 157 143) gives red, green and blue from 0 to 255: exactly the same as #2a9d8f.

Here the name is rgb and the subheadings are hsl(350 60% 45%), a deep pink.

style.css

1h1 {2  color: rgb(42 157 143);3}4h2 {5  color: hsl(350 60% 45%);6}

kapsalon.example

Try it yourself

Make the name at the top petrol green (#2a9d8f) and the subheadings dark red: red 150, green 30, blue 45. Write that second colour any way you like.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Snip &amp; Curl hair salon</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="name">Snip &amp; Curl</h1>11      <p class="slogan">Hair salon in the heart of Leeds</p>12    </header>13    <main>14      <h2>Our prices</h2>15      <ul class="price-list">16        <li><span class="service">Haircut</span> <span class="price">£28</span></li>17        <li><span class="service">Wash and blow-dry</span> <span class="price">£22</span></li>18        <li><span class="service">Colouring</span> <span class="price">£55</span></li>19      </ul>20      <section id="booking">21        <h2>Book an appointment</h2>22        <p class="info">Give us a call or just pop in.</p>23        <a class="button" href="tel:+441134960000">Call us</a>24      </section>25    </main>26    <footer>27      <p>8 Kirkgate, Leeds</p>28    </footer>29  </body>30</html>

kapsalon.example