Kleuren kiezen

De voorbeelden gaan uit van een HTML-pagina met Enter wordt een nieuwe regel en Alles in het midden uit. Staan die aan (zo begint een nieuwe pagina), dan wordt elke Enter in je code een witregel en staat alles in het midden. Zet ze uit in de editor als je een voorbeeld plakt.

Een kleur geef je op twee manieren: met een naam, zoals hotpink, of met een code, zoals #ff66aa. Allebei werken ze overal waar een kleur mag: in <font color>, in bgcolor en in CSS bij color en background-color.

Kleurnamen

Browsers kennen zo'n 140 kleuren bij naam, allemaal in het Engels. Schrijf de naam aan elkaar, zonder spaties. Goede namen om mee te beginnen: deeppink, crimson, darkorange, seagreen, royalblue, navy en purple.

<font size="4" color="deeppink">deeppink</font>
<font size="4" color="crimson">crimson</font>
<font size="4" color="darkorange">darkorange</font>
<font size="4" color="seagreen">seagreen</font>
<font size="4" color="royalblue">royalblue</font>
<font size="4" color="purple">purple</font>

Kleurcodes

Met een code kies je uit meer dan 16 miljoen kleuren. Een code begint met een hekje en heeft daarna zes tekens: twee voor rood, twee voor groen en twee voor blauw. Elk paar loopt van 00 (niets) tot ff (zo veel mogelijk), met de cijfers 0 tot 9 en de letters a tot f.

#ff0000 is rood, #000000 zwart en #ffffff wit.
Zijn de drie paren gelijk, dan krijg je grijs, zoals #999999.
De korte vorm #f6a is hetzelfde als #ff66aa: elk teken telt dubbel.
Hoofdletters maken niet uit. Vergeet je het hekje bij een code van zes tekens, dan zet de site het er zelf voor, net als de browsers van toen.

<b style="color: #ff0000">#ff0000</b> <b style="color: #008000">#008000</b> <b style="color: #0000ff">#0000ff</b><br>
<b style="color: #ff66aa">#ff66aa</b> is hetzelfde als <b style="color: #f6a">#f6a</b>

De kleurkiezer in de editor

Een code hoef je niet uit je hoofd te kennen. In de editor van je pagina (Eigen pagina's) staat boven het tekstvak een gekleurd vakje met de knop "Kleur invoegen".

Klik op het vakje en kies een kleur.
Zet je cursor waar de kleur moet komen, bijvoorbeeld tussen de aanhalingstekens van color="".
Klik op "Kleur invoegen". De code, zoals #ff66aa, staat nu op de plek van je cursor.

De werkbalk zie je bij een pagina in HTML (profielcode).

Tekstkleur en achtergrondkleur

color is de kleur van de letters, background-color de kleur erachter. Met padding komt er wat ruimte tussen de tekst en de rand van de kleur. In een tabel doet bgcolor hetzelfde als background-color.

<p style="color: white; background-color: #7048e8; padding: 6px">Witte tekst op paars</p>
<p>Een <span style="background-color: yellow">gemarkeerd</span> woord.</p>
<table bgcolor="#ffe3f1" cellpadding="6"><tr><td><font color="#c92a2a">Rood in een roze vak</font></td></tr></table>

Leesbaar blijven

De gouden regel: donkere tekst op een lichte achtergrond, of lichte tekst op een donkere. Twee felle kleuren of twee lichte kleuren op elkaar lees je slecht, zeker op een telefoon in de zon.

<p style="background-color: #fff3bf; color: #1d2345; padding: 6px">Goed: donkerblauw op lichtgeel</p>
<p style="background-color: #1d2345; color: #ffe3f1; padding: 6px">Goed: lichtroze op donkerblauw</p>
<p style="background-color: white; color: yellow; padding: 6px">Lastig: geel op wit</p>
<p style="background-color: red; color: blue; padding: 6px">Lastig: blauw op rood</p>

Kies je een achtergrondkleur, kies dan ook een tekstkleur. Anders krijgt de tekst de gewone kleur, meestal zwart, en die zie je op donkerblauw niet.
Links hebben hun eigen kleur, meestal blauw. Op een donkere achtergrond geef je ze een eigen kleur; hoe dat moet, staat bij Eigen CSS.
In Profielstijl zegt de site het zelf als tekst op je vakken lastig leesbaar is.

De kleuren van de galerij

De strakke plaatjes in de galerij zijn er in negen kleuren. Wil je tekst of een rand in precies dezelfde kleur, gebruik dan deze codes.

<table cellpadding="3">
<tr><td bgcolor="#e0338a" width="30"></td><td>roze: #e0338a</td></tr>
<tr><td bgcolor="#c92a2a"></td><td>rood: #c92a2a</td></tr>
<tr><td bgcolor="#e8590c"></td><td>oranje: #e8590c</td></tr>
<tr><td bgcolor="#c99a06"></td><td>goud: #c99a06</td></tr>
<tr><td bgcolor="#2b8a3e"></td><td>groen: #2b8a3e</td></tr>
<tr><td bgcolor="#1c7ed6"></td><td>blauw: #1c7ed6</td></tr>
<tr><td bgcolor="#7048e8"></td><td>paars: #7048e8</td></tr>
<tr><td bgcolor="#1d2345"></td><td>zwart: #1d2345</td></tr>
<tr><td bgcolor="#ffffff" style="border: 1px solid #999999"></td><td>wit: #ffffff</td></tr>
</table>