De Help Desk punt NL
Kennisbank
De Helpdesk > De Helpdesk > Kennisbank

Kleuren met html-codes

Oplossing

Breng kleuren in je html-pagina's met kleurnamen, -codes of rgb-waarden.

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.

Verlopende 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).

Overzicht van kleurnamen

KleurKleurnaam
  black
  darkslategray
  dimgray
  gray
  darkgray
  silver
  lightgray
  slategray
  lightslategray
  midnightblue
  navy
  darkblue
  mediumblue
  blue
  royalblue
  deepskyblue
  dodgerblue
  steelblue
  indigo
  darkslateblue
  slateblue
  mediumslateblue
  cornflowerblue
  darkmagenta
  purple
  blueviolet
  darkviolet
  darkorchid
  mediumorchid
  orchid
  violet
  fuchsia
  magenta
  deeppink
  mediumvioletred
  hotpink
  teal
  darkcyan
  cadetblue
  lightseagreen
  mediumaquamarine
  darkturquoise
  aquamarine
  mediumturquoise
  turquoise
  skyblue
  lightskyblue
  aqua
  cyan
  paleturquoise
  lightsteelblue
  powderblue
  lightblue
  darkgreen
  green
  forestgreen
  seagreen
  mediumseagreen
  limegreen
  lime
  lawngreen
  darkseagreen
  lightgreen
  palegreen
  mediumspringgreen
  springgreen
  maroon
  darkred
  firebrick
  brown
  red
  indianred
  rosybrown
  palevioletred
  crimson
  lightcoral
  orangered
  tomato
  coral
  saddlebrown
  sienna
  chocolate
  peru
  darkgoldenrod
  darkorange
  orange
  goldenrod
  gold
  yellow
  darkolivegreen
  olivedrab
  olive
  yellowgreen
  greenyellow
  chartreuse
  mediumpurple
  darkkhaki
  tan
  thistle
  gainsboro
  plum
  burlywood
  lavender
  darksalmon
  salmon
  lightsalmon
  palegoldenrod
  sandybrown
  khaki
  honeydew
  azure
  wheat
  beige
  whitesmoke
  mintcream
  ghostwhite
  antiquewhite
  linen
  lightgoldenrodyellow
  oldlace
  lightpink
  pink
  peachpuff
  navajowhite
  moccasin
  bisque
  mistyrose
  blanchedalmond
  papayawhip
  lavenderblush
  seashell
  aliceblue
  lightcyan
  cornsilk
  lemonchiffon
  floralwhite
  snow
  lightyellow
  ivory
  white
 
Was dit artikel bruikbaar? ja / nee
Gerelateerde artikelen Hoe maak je je links wat origineler?
JPG, GIF, PNG of SVG?
Een 3D-tekst maken voor je site doe je zo!
Hoe wordt een lijst gemaakt? De basis html-codes
Vrolijk je webpagina’s op met interessante initialen
Hoe je CSS gebruikt voor je website-layout
Een link maken: de html-codes verklaard
Hoe geef je je website een foto als achtergrond?
Maak je website-teksten lekker leesbaar
Leuke lijsten maken met html en css
Artikel details
Artikel ID: 672
Categorie: Een eigen website maken - Ontwerp
Zoekwoorden kleuren, html, css, kleurnamen, web, webpagina, ontwerp, colors, web safe, safe, code, waarde, hexadecimale, codes, waarden, rgb, karakters, tool, overzicht
Datum toegevoegd: 4-Dec-2017 23:31:59
Aantal bekeken: 3450
Beoordeling (Stemmen): Artikel beoordeeld 5.0/5.0 (1005)

 
« Ga terug