HTML en CSS leren: Kleuren

Kleuren

Gino legt een kleurstaal op tafel: het petrolgroen van de stoelen in de zaak. "Kan de site die kleur krijgen?" Zeker, als je weet hoe je een kleur aan de browser uitlegt.

Namen en hexcodes

De makkelijkste kleuren hebben een naam: red, teal, crimson… CSS kent er zo'n 140, allemaal in het Engels.

Voor een precieze kleur gebruik je een hexcode: een # en zes tekens van 0 tot 9 en a tot f. Twee tekens voor rood, twee voor groen, twee voor blauw. 00 is niets, ff is alles.

#2a9d8f is dus wat rood, veel groen en net iets minder blauw: het petrolgroen van Gino.

style.css

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

kapsalon.example

rgb en hsl

Dezelfde kleur kan ook met getallen. rgb(42 157 143) geeft rood, groen en blauw van 0 tot 255: precies hetzelfde als #2a9d8f.

hsl werkt anders, meer zoals een mens over kleur denkt. Het eerste getal is de tint, een hoek op de kleurencirkel: 0 is rood, 120 groen, 240 blauw. Dan de verzadiging (0% is grijs, 100% fel) en de lichtheid (0% zwart, 50% de kleur zelf, 100% wit).

Hier is de naam rgb en zijn de tussenkoppen hsl(350 60% 45%), een donker roze.

style.css

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

kapsalon.example

Probeer het zelf

Maak de naam bovenaan petrolgroen (#2a9d8f) en de tussenkoppen donkerrood: rood 150, groen 30, blauw 45. Schrijf die tweede kleur zoals jij wilt.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="naam">Knip &amp; Krul</h1>11      <p class="slogan">Kapsalon in hartje Genk</p>12    </header>13    <main>14      <h2>Onze prijzen</h2>15      <ul class="prijslijst">16        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>17        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>18        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>19      </ul>20      <section id="afspraak">21        <h2>Afspraak maken</h2>22        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>23        <a class="knop" href="tel:+3289000000">Bel ons</a>24      </section>25    </main>26    <footer>27      <p>Stationsstraat 8, Genk</p>28    </footer>29  </body>30</html>

kapsalon.example

Klaar voor meer?

De volledige les heeft 6 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Namen en hexcodes

De makkelijkste kleuren hebben een naam: red, teal, crimson… CSS kent er zo'n 140, allemaal in het Engels.

Voor een precieze kleur gebruik je een hexcode: een # en zes tekens van 0 tot 9 en a tot f. Twee tekens voor rood, twee voor groen, twee voor blauw. 00 is niets, ff is alles.

#2a9d8f is dus wat rood, veel groen en net iets minder blauw: het petrolgroen van Gino.

style.css

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

kapsalon.example

rgb en hsl

Dezelfde kleur kan ook met getallen. rgb(42 157 143) geeft rood, groen en blauw van 0 tot 255: precies hetzelfde als #2a9d8f.

Hier is de naam rgb en zijn de tussenkoppen hsl(350 60% 45%), een donker roze.

style.css

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

kapsalon.example

Probeer het zelf

Maak de naam bovenaan petrolgroen (#2a9d8f) en de tussenkoppen donkerrood: rood 150, groen 30, blauw 45. Schrijf die tweede kleur zoals jij wilt.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="naam">Knip &amp; Krul</h1>11      <p class="slogan">Kapsalon in hartje Genk</p>12    </header>13    <main>14      <h2>Onze prijzen</h2>15      <ul class="prijslijst">16        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>17        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>18        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>19      </ul>20      <section id="afspraak">21        <h2>Afspraak maken</h2>22        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>23        <a class="knop" href="tel:+3289000000">Bel ons</a>24      </section>25    </main>26    <footer>27      <p>Stationsstraat 8, Genk</p>28    </footer>29  </body>30</html>

kapsalon.example