Er zijn meerdere manieren om in html kleuren in je pagina’s te definiëren: met behulp van kleurnamen (bijvoorbeeld: red), met behulp van hexadecimale kleurcodes (de hexadecimale code voor rood is: #ff0000) of met behulp van rgb-waarden (de rgb-waarde voor rood is: rgb(255,0,0)). Even een uitleg:
Kleurnamen spreken voor zichzelf. Het zijn Engelstalige woorden die een kleur beschrijven, zoals: red.
Hexadecimale codes geven – op een schaal van 0 (geen kleur) tot 255 (volledige kleur) – aan welke hoeveelheden rood, groen en blauw er moeten worden weergegeven (elke kleur op je beeldscherm is te definiëren als een bepaalde combinatie van intensiteiten van rood, groen en blauw).
Een heximale code bestaat uit drie sets van twee karakters. De waarde 00 betekent geen kleur, de waarde ff betekent volledige intensiteit in die kleur (255). Hexidecimale codes beginnen altijd met het karakter #. De waarde voor rood is: #ff0000.
Met rgb-waarden geef je zelf – op een schaal van 0 tot 255 – weer wat de kleurintensiteit van de kleuren rood, groen en blauw moet zijn, in deze vorm: rgb(255,0,0). Je kunt trouwens ook procenten gebruiken in plaats van getallen tussen de 0 en 255 – de code voor de kleur rood wordt dan: rgb(100%,0%,0%).
Behalve rgb-waarden, bestaan er ook nog rgba-waarden. De a staat voor alpha en met deze vierde waarde kun je de mate van transparantie van een kleur aangeven. Deze alpha-waarde kan variëren van 0 tot 1, waarbij 0 volledig transparant is, en 1 helemaal niet transparant. Om even bij het voorbeeld te blijven: bij rgba(255,0,0,0.8) is de kleur rood iets lichter geworden omdat hij iets transparanter is gemaakt, en bij rgba(255,0,0,0.4) is deze kleur nóg wat lichter geworden, doordat hij nóg doorzichtiger is gemaakt.
Het voordeel van het gebruik van kleurnamen is dat je in de broncode van je pagina’s veel gemakkelijker ziet waar een bepaalde kleur is gebruikt. Het nadeel is natuurlijk dat je wat beperkter bent in je kleurkeuze: er zijn maar 141 kleurnamen, tegenover een vrijwel onbeperkt aantal codes waarmee je in html kleuren aan kunt geven.
Vroeger werd je nog aangeraden je te beperken tot de zogenaamde web safe colors – de beeldschermen waren nog niet van zo goede kwaliteit dat ze alle kleuren goed konden weergeven. Maar tegenwoordig zijn de beeldschermen zo goed dat je een bijna oneindig aantal kleuren in je html-pagina’s kunt laten weergeven.
Een overzicht van de html-kleurnamen vind je onderaan deze pagina; om de hexidecimale code voor een specifieke kleur te achterhalen kun je bijvoorbeeld gebruikmaken van deze tool voor html-kleuren.
Behalve effen kleuren, kun je ook verlopende kleuren definiëren in html en css. Bijna alle browsers kunnen deze code interpreteren, maar sommige hebben nog een extra regeltje nodig om dit goed te kunnen doen. De html-code die je voor verlopende kleuren nodig hebt, bestaat dus uit meerdere regels.
Hieronder zie je twee blokjes met verlopende kleuren – van rood naar indigo. (Zie je alleen twee effen blokjes, een rode en een indigo-kleurige, dan betekent dat dat de browser die je op dit moment gebruikt, nog niet overweg kan met deze code.)
Om deze blokjes te maken, heb ik de volgende code gebruikt:
background-color: red; background-image: -webkit-linear-gradient(left, red, indigo); background-image: linear-gradient(left, red, indigo);
background-color: indigo; background-image: -webkit-linear-gradient(bottom, red, indigo); background-image: linear-gradient(bottom, red, indigo);
Deze code voeg je (in je stylesheet) toe aan de opmaakkenmerken van het onderdeel dat een verlopende achtergrondkleur moet hebben (voor de achtergrond van het hele beeldscherm is dat bijvoorbeeld de body).
« Ga terug
