Homepage » Tutorials » HTML & CSS » Kleuren op je website

Kleuren op je website

Info
Door:	Rick	Moeilijkheidsgraad:
Geplaatst op:	08-02-2004	Reacties:	56(Bekijken)
Views:	108588 (gem. 45.1885 per week)	Log in om zelf te reageren
		Waardering:	8.2/10 (10 stemmen)

Wat kunnen we verder nog met de tekst doen? Een kleurtje zou niet verkeerd zijn. Kleuren definiëren in HTML doe je met zogenaamde hexadecimale codes. Wil je de code bij een kleur weten? Gebruik dan RGB-Hex. De meest gebruikte kleuren vind je hieronder.

Code	Kleur
#000000	Zwart
#FFFFFF	Wit
#FF0000	Rood
#00FF00	Groen
#0000FF	Blauw
#FFFF00	Geel
#00FFFF	Lichtblauw(cyaan)
#FF00FF	Paars(magenta)

Dit zijn enkele veelgebruikte waarden. Er zijn nog veel meer variaties mogelijk en zo'n beetje iedere kleur is dan ook wel te krijgen in de HTML-code.

Je kunt dus rustig gaan expirimenteren met de verschillende codes. In plaats van de nullen kun je ook andere cijfers van 1 tot en met 9 invullen.

Zet altijd een hekje voor de kleur, de browser herkent de kleur anders niet! Eerst willen we de achtergrond van de website zwart maken. Omdat de hele site zwart moet worden, is het logisch dat je dit in de body doet. Je HTML-code voor de body wordt dan:

<body bgcolor="#000000">
Dit is mijn eerste website.
</body>

Zo, die achtergrond is zwart! Nu moet de tekst natuurlijk nog een andere kleur krijgen, want een zwarte tekst op een zwarte achtergrond werkt niet echt. Wil je alle tekst op de site bijvoorbeeld rood maken, dan doe je dat in de <body>-tag, het geldt immers voor het hele document. We geven dus in de body aan dat alle tekst in het document de kleur #ff0000(rood) moet krijgen. Dat doen we zo:

<html>
<head>
<title>Welkom op mijn website!</title>
</head>

<body bgcolor="#000000" text="ff0000">
Dit is mijn eerste website.
</body>

</html>

Let op: de sluitingstag hoeft er dus niet te staan! Het mag wel. Zo, we kunnen de tekst nu een kleur geven. Maar wat als we nu een regel op de site groen willen hebben en de andere regel weer rood. Dit kunnen we niet in de body aangeven, want het geldt niet voor alle tekst. Het moet dus per zin aangegeven worden. Wil je dit bereiken...

Welkom op mijn website!

Deze regel is rood.

...dan gebruik je deze HTML-code:

<html>
<head>
<title>Welkom op mijn website!</title>
</head>

<body bgcolor="#000000">
Welkom op mijn website!
Deze regel is rood
</body>

</html>

Meer informatie over het instellen van de achtergrond van je website(zoals afbeeldingen) vind je hier.

«Tekst op je website zetten Lettertypen »

56 reacties
joevan74	Geplaatst op 10-03-2010 om 22:06
Regular	mooi, heb wel één vraagje... zit er een systeem achter de kleuren, bv hoe weet ik wat groen is , wat geel is enzz..
Birre	Geplaatst op 04-02-2010 om 11:23
Regular	Deze werkt ook prima! Netjes verteld allemaal!
spikkel	Geplaatst op 23-07-2009 om 19:44
Regular	Hallo, Ik ben pas begonnen met websites maken en heb de basis al tamelijk onder de knie. Toch heb ik nog een vraag over het gebruik van kleuren. Ik vind nl. dat de kleuren, zoals standaard wordt gebruikt, enorm saai en ik ben dus op zoek om mijn kleuren echt glanzend te maken (vb echt zilver metalic). Als voorbeeld heb ik een link geplaats van een flash template. Deze is dus enkel als voorbeeld voor het "soort" kleuren dat ik wil gebruiken, dus geen rekening houden met animaties. Heeft er iemand Tips hoe ik hieraan kan beginnen ? http://www.templatemonster.com/flash-templates/24606.html
spikkel	Geplaatst op 23-07-2009 om 19:30
Regular	Hallo, Ik ben pas begonnen met websites maken en heb de basis al tamelijk onder de knie. Toch heb ik nog een vraag over het gebruik van kleuren. Ik vind nl. dat de kleuren, zoals standaard wordt gebruikt, enorm saai en ik ben dus op zoek om mijn kleuren echt glanzend te maken (vb echt zilver metalic). Als voorbeeld heb ik een link geplaats van een flash template. Deze is dus enkel als voorbeeld voor het "soort" kleuren dat ik wil gebruiken, dus geen rekening houden met animaties. Heeft er iemand Tips hoe ik hieraan kan beginnen ? http://www.templatemonster.com/flash-templates/24606.html
WhoKnowZ	Geplaatst op 28-01-2009 om 12:39
Regular	Ik snap niet hoe je een afzonderlijke kleur aan een header moet geven. Als ik volgende code gebruik: <h1><font color="#..> Mijn Header </font> </h1> verschijnt mijn header NIET in de browser.
shanna	Geplaatst op 03-09-2008 om 13:23
Regular	Waarom nog lessen aanbieden met deprecated code? bgcolor - font etc. Zou 't niet handiger zijn om meteen lesjes te maken waarin goede code en de nieuwe manier van website maken wordt aangeleerd? Ik bedoel meteen beginnen met css en xhtml en het scheiden van content en opmaak?
riczz	Geplaatst op 24-03-2008 om 18:03
Regular	de titel staat in het tab-blad dus daar zal ik jouw was dan niet veel aan aanpassen maar je moet dan gewoon bij body zijn.:D
Mchielll	Geplaatst op 06-02-2008 om 23:15
Regular	Omdat er op "de opbouw van een html bestand al zo lang niet meer heeft gereageerd, zal ik hier mijn vraag eens stellen:p : je wilt de naam van je website in het groot bovenaan de pagina zetten. In welk deel moet je het dan zetten?In titel of in body? Ik snap eigenlijk ook niet zo goed wat er met de tekst in "titel" gebeurt. hier staat dat die in de statusbalk komt... maar de statusbalk is toch onderaan die grijze tot beige balk, de lader?daar heb ik toch nog niet meer als "fout op de pagina" of "gereed" gezien hoor!kan iemand me helpen?
2play	Geplaatst op 10-10-2007 om 19:46
Regular	deze site is te gek!!!! zooooo makkelijk
bulli	Geplaatst op 23-09-2007 om 08:19
Regular	Hey, Ik ben een eigen webiste aan het maken en wil een homepage waar je aldaar kan doorklikken naar verschillende onderwerpen. Dit alles lukt wel maar de hyperlink verandert dus van kleur en die wil ik liever zwart houden. Hoe doe je dit? dit is men tekst <h2><p align="center"><font face="monotype corsiva"><a href="bulli.html">bulli</a></font></p></h2> alvast bedankt en geweldige site. groetjes
ninfa	Geplaatst op 03-06-2007 om 11:10
Regular	hej,ik heb een vraagtj als ik de stappen volg he ewle dan klik ik op da dingetje me de wereldbol en pijltje odmat ik het dan kan zien wat ik al heb maar als ik erop klik zie ik nog eens al men code's,ik snap het niet! stuur eens ene goeie uitleg aub naar ninfadevos@hotmail.com,ik zou het erg aprecieren!
pretty	Geplaatst op 04-11-2006 om 10:34
Regular	<head> <title>Welkom op mijn website!</title> </head> <body> <p align="center"><b>Dit is mijn eerste website.</b> </p> </body> </html>
....	Geplaatst op 18-10-2006 om 15:43
Regular	:l niks lukt geen gekleurde letters geen frames geen gekleurde achtergronden HULP GEVRAAGD
Heike-Jan	Geplaatst op 12-10-2006 om 09:09
Regular	<html> <head> <title>Welkom op mijn website!</title> </head> <body bgcolor="#000000" text="ff0000"> <p align="center">Dit is mijn eerste website.</p> </body> </html> doet hij het :P
Onbekend lid	Geplaatst op 03-08-2006 om 21:49
Spammer	in plaats van <p align= "center"> </p> kan je ook <center> </center> doen
Gosselin Christophe	Geplaatst op 08-07-2006 om 22:38
Regular	Is dit goed, of kan ik dit nog inkorten? <html> <head><h1> De grote wijnen van de Bordeaux </h1> <body bgcolor="#000000"> <p> <font color="#990033"><h1> De grote wijnen van de Bordeaux </h1></font> <p> <font color="#FFFFFF"><p align= "center"><b>Haut-Médoc </b> </p></font> <p align= "center"><b>Haut-Médoc </b> </p> </body> </head> </html> mvg chris
Onbekend lid	Geplaatst op 08-05-2006 om 15:45
Spammer	Inderdaad, maar er zijn geen 16.7 miljoen namen voor kleuren die tegenwoordig kunnen worden weergegeven op een computerscherm... Met de hexadecimale code's kan je ze allemaal vormen in 6 karakters :)
Onbekend lid	Geplaatst op 08-05-2006 om 12:59
Spammer	In plaats van de code kan je ook het woord typen bvb. Black = Zwart Red = Rood yellow = Geel
ruudvandaag	Geplaatst op 03-05-2006 om 11:59
Regular	Kan iemand mij helpen, ik moet op een site iets hebben zodat je 4 knoppen heb en als je op de ene knop duwt dan word de achtergrond blauw, op de andere groen, op de andere rood en op de andere zwart, maar ik heb echt geen idee hoe ik dit voor elkaar kan krijgen, kan iemand me even vertellen hoe dat moet,,,,,?
megasmash!	Geplaatst op 13-02-2006 om 08:11
Regular	waarom doe in plaats van FONT niet BASEFONT en voor grote SIZE="jegroote" COLOR="jekleur" en FACE="jelettertype" voor lettertype en dan tussen die "" jouwgrote lettertype en kleur jouw dingen doen zoals kleur je codes intypen voor lettertype gewoon het letterype voor kleur hoef je niet perse codes te gebruiken je kan ook een paar kleuren zoals blue,red,green,purple,black,white en yellow
korstiweg	Geplaatst op 07-02-2006 om 21:14
Regular	op deze site staan bijna alle kleuren!! je kan gewoon de code kopieëren en plakken http://www.two4u.com/color/big-table.html
Onbekend lid	Geplaatst op 16-11-2005 om 18:24
Spammer	Is het een plaatje of niet.. ? als het een plaatje is kan je het proberen met <body background="plaatje.gif"> met .jpg kan natuurlijk ook of andere
Maartenp	Geplaatst op 22-09-2005 om 18:44
Regular	Hmm... gwn een zwarte 8ergrond vind ik maar saai. Ik zou graag zo'n 8ergrond van frontpage op men site hebben.. Hoe kan ik die in html omzetten? of lukt dat niet ? Als ik nu bv die achtergrond: 'binair' erop wil... heb ik dan speciale code nodig ? thx
Onbekend lid	Geplaatst op 11-06-2005 om 21:10
Spammer	Je kan inderdaad de naam van de kleur opgeven, maar dat is bijlange niet zo goed als de hexadecimale code opgeven. Er zijn zowieso al minder kleurnamen dan code's, en het wordt niet aangeraden door de webstandaarden. het gebruik van de font-tag kan je ook beter vermijden. Je tekst opmaken doe je best met CSS (zie cursus op de site). CU2 is dan ook totaal niet volgens webstandaarden gebouwd, en dringen aan vernieuwing toe...
DjMcPat	Geplaatst op 11-06-2005 om 20:44
Regular	Misschien een handioe tip..Jullie kennen CU2 wel? Die werken ook met html..Je kunt de kleuren ook met namen van kleuren makkelijk weergeven..heb het net getest en het werkt!. Dan krijg je dus dit <html> <head> <title>Welkom op mijn website!</title> </head> <body bgcolor="#000000"> <p><font color="white">Welkom op mijn website!</font> <p><font color="red">Deze regel is rood</font> </body> </html> Bij mij werkt het maar het kan zijn dat het niet werkt misschien. Dus dan wordt het ng leuker om kleuren te kiezen.. ga naar: http://mycu2.nl en dan "kleuren" En typ dan de naam van de kleur in groetjes Patrick
DjMcPat	Geplaatst op 11-06-2005 om 20:38
Regular	Heey, Ik ben een beetje met die handige toturials bezig. Valt me trouwens op dat er hier mensen zijn die behoorlijk slecht lezen..lees rustig..niet haasten..dan moet het lukken. @ abrt: Nu met die code ben ik wel mn gecentreerde tekst kwijt..dus het staat weer links, hoe behoud je hem gecentreerd? Groetjes Patrick
Willem	Geplaatst op 24-05-2005 om 10:55
Regular	Fantastisch Rick, Heel leuk speelgoed en krijg er nu echt plezier in. Gr.
ArjanA	Geplaatst op 18-04-2005 om 17:55
Regular	Ik weet niet wat ik verkeerd doe, ik krijg geen zwarte achtergrond, verder wel een tekst in de blauwe balk maar daar houdt het mee op ook! Gr.
ArjanA	Geplaatst op 18-04-2005 om 17:39
Regular	Nou, ik weet niet hoor, ik doe alles wat er staat en het enige wat ik krijg is de tite in de blauwe balk, verder is het niet zwart of wat dan ook!!! Gr.
vilas master	Geplaatst op 28-03-2005 om 15:19
Regular	#000000 rood #000000
stancia	Geplaatst op 08-03-2005 om 21:02
Regular	Tis me dus allemaal gelukt..en toen ging ik de boel uploaden...pagina is gelukt maar de achtergrondkleur ontbreekt...hoe kan dat dan?? Heb de achtergrondkleur ook geupload...waar moet die staan?? Ook in de httpdocs?? Hellup..ennuh maakt het uit of je het in html of php doet??
Sonja van Esch-Andrea	Geplaatst op 24-02-2005 om 21:01
Regular	Sonja De achtergrondkleur en de tekstkleur lukken niet, wat ik ook probeer.
MARCELTA	Geplaatst op 24-02-2005 om 18:16
Regular	Het begint te lukken
dikkyd	Geplaatst op 18-02-2005 om 16:43
Regular	bij mij lukken de kleuren en de achtergrond niet. wat doe ik fout? <html> <head> <title>Welkom op mijn website!</title> </head> <body bgcolor='#000000'> <p><font color='#00ff00'>Welkom op mijn website!</font> <p><font color='#ff0000'>Deze regel is rood</font> </body> </html>
gerbie	Geplaatst op 09-02-2005 om 16:48
Regular	Ik weet niet of het al gezegd is en of het al ergens staar maar waarom gebruiken julllie geen html 4? (met <STYLE>)
Mirax	Geplaatst op 04-02-2005 om 20:51
Moderator	Lees deze tutorial eens door: http://www.websitemaken.be/index.php?page=show_item&id=119
habbo-soapie	Geplaatst op 04-02-2005 om 18:09
Regular	ik wilgraag een eigen 8ergrond doen maar kan dat met het kladblok???want ik heb dat andere niet:S:S:Sen ik wil graag muh eigen foto als 8ergrond antwoord plzzzzz dikkuh kyszzz
krisie	Geplaatst op 04-02-2005 om 17:15
Regular	@vicky Je hebt een </head> te veel gezet(de eerste moet weg) greetings
Willem	Geplaatst op 29-01-2005 om 12:40
Regular	Hoi, ik heb t al;http://www.handleidinghtml.nl/ bij veilige kleurenpallet. 216 kleuren met cijfers Veel plezier Gr, Willem
Willem	Geplaatst op 29-01-2005 om 12:17
Regular	Hallo, is er ook een pagina met kleuren en bij behorende cijfers? Gr, Willem
Kitty_devil_peas	Geplaatst op 28-01-2005 om 20:00
Regular	het lijkt me echt leuk om eigen website te kunnen maken heb nooit gedaan maar ik vind het nu al leuk om te gaan doen het is misschien wel moeilijk om te gaan doen enzo maar het gewoon leuk om eigen website te hebben
andy91	Geplaatst op 05-01-2005 om 10:59
Regular	OK
rogier.slag	Geplaatst op 13-12-2004 om 20:35
Moderator	geen idee. Vraag dit eens op het forum en geen een code
all you need is love, all you get is homework	Geplaatst op 12-12-2004 om 18:16
Regular	ik krijd die achtergrond in kleur maar de letters nie wat doe ik fout???????????????:(
daimo	Geplaatst op 10-12-2004 om 14:42
Regular	ik ook ik gaan het ook halen groetjes daimo
merijn	Geplaatst op 06-12-2004 om 14:54
Regular	leuk
Shorty	Geplaatst op 16-11-2004 om 15:44
Regular	de max, tot nu toe lukt alles, hopelijk blijft het lukken! :)
leerling	Geplaatst op 18-10-2004 om 00:40
Regular	Merci Rogiertje Ik zal deze moeten aanpassen dus.
rogier.slag	Geplaatst op 16-10-2004 om 14:10
Moderator	met aanhalingsteken is de code nettere en zulle alle browsers hem goed interpeteren
leerling	Geplaatst op 16-10-2004 om 00:54
Regular	Dit alles lukt goed. Ik zie dat die aanhalingstekens overbodig zijn. Zonder gaat ook , of hebben deze een verborgen funtie ?? Ik hou het momenteel op een lichtblauwe achtergrond met vooral witte tekst. Ik ben benieuwd naar het volgende deel van deze cursus !
Abrt	Geplaatst op 27-07-2004 om 21:20
Regular	Je hebt twee keer het head afgesloten. hij moet zo: <html> <head> <title>Welkom op mijn website!</title> </head> <body bgcolor="#000000"> <p><font color="#00ff00">Welkom op mijn website!</font> <p><font color="#ff0000">Deze regel is rood</font> </body> </html>
Vicky	Geplaatst op 24-07-2004 om 08:26
Regular	Bij mij lukt regel:Welkom op mijn website! Niet. Ik heb dit in gevuld: <html> <head> </head> <title>Welkom op deze website!!!</title> </head> <body bgcolor="FFFF00"> <b>Dit is mijn eerste website</b> </body> </html> Wat moet ik doen???
Mr.gogo	Geplaatst op 19-04-2004 om 10:30
Regular	ik vind dit echt leuk dat maken.. alleen snap der nog weinig van.. net zoals monique :P maar we gaan der voor
Rick	Geplaatst op 15-04-2004 om 10:25
Webmaster	Als jij daar veel geld aan wilt geven: check het Vacatures forum, zo niet zullen er veel mensen eens goed met je lachen.'
rikdries	Geplaatst op 15-04-2004 om 09:48
Regular	De link "hier" betreffende meer informatie over het instellen van de achtergrond werkt niet. Verder is alles verstaan. Rik.
monique	Geplaatst op 13-04-2004 om 23:00
Regular	door monique snap er weinig van maaar ik gaat het redden reken maar

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...

Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be