Kleuren

Kleurenpalet

Kleurenwaaier

Bij een huisstijl hoort een kleurenpalet: een reeks kleuren (of beter gezegd “kleurcodes”) die de graficus gebruikt bij de opmaak van bedrijfscommunicatie. Als je ontwerpt voor drukwerk, gebruik je CMYK-kleuren, bij weergave op een scherm RGB-kleuren. 

Een kleurenwiel is een handige techniek om een passend kleurenpalet samen te stellen. Uiteraard bestaan hier ook softwaretools voor. Over kleuren en smaken valt niet te discussiëren hoor je vaak. Maar dit klopt niet helemaal. Je kan dus perfect, met behulp van een kleurenwiel, een passend palet samenstellen. Tegenoverliggende kleuren noemt men complementaire kleuren. Ze passen goed bij elkaar.

Houd er eveneens rekening mee dat kleuren vaak een symbolische connotatie hebben. 

Niet alle kleuren zijn geschikt

Daarnaast zijn niet alle kleuren even geschikt voor weergave op een scherm. Als het logo van het bedrijf waarvoor je werkt heel veel blauw bevat, betekent dit niet dat je dat blauw moet gebruiken als achtergrondkleur van je website. Immers, wat goed oogt op een "bestelwagen" of "muur", oogt niet noodzakelijk ok op een scherm. Een scherm zendt immers licht uit, terwijl verf licht weerkaatst. Dit houdt in dat je goed moet nadenken vooraleer je de bedrijfskleuren zonder meer zou gaan inzetten voor de achtergrondkleur van je website. 

Kleurcodes en kleurnamen in CSS

Als je een kleur of achtergrondkleur wil geven aan een element, dan kan je die kleur op verschillende manieren ingeven in CSS:

  1. Met een Engelstalige benaming: black, white, red, deepskyblue... Uiteraard moet CSS die benaming kennen. ApplegreenSeablue zal CSS niet herkennen. 
  2. Je kan de waardes invoeren met de rgb-instructiezoals bijvoorbeeld rgb(0,0,0) zwart geeft. De drie getallen tussen de haakjes geven respectievelijk de verhouding rood, groen en blauw weer.
  3. Je kan de waarde ingeven met een HEXADECIMALE code. Die code is het meest gebruikt in computertoepassingen. #000000 geeft bijvoorbeeld zwart. Wit krijgt de hexadecimale waarde #FFFFFF. Zo'n hexadecimale code maakt geen gebruik van het decimale talstelsel, maar van het hexadecimale (of zestiendelige) talstelsel. Je hoeft dat niet zelf uit je hoeft te kunnen rekenen. Beeldbewerkingsprogramma's kunnen die code voor elke pixel uit een afbeelding ophalen. 
  4. Je kan een kleur ook gedeeltelijk transparantmaken. De manier waarop je dit doet, is verwant met de RGB-instructie: de RGBA-instructie Je voert dan bijvoorbeeld rgba(0,0,0,0.4) in. De A-waarde staat hier op 0.4. Dit betekent dat de kleur (zwart in dit geval) aardig transparant is, alsof je ze met een combinatie van waterverf en veel water hebt geschilderd.

Kleuren als variabelen gebruiken in CSS

Voor de achtergrondkleur en de kleur van de diverse onderdelen en teksten in je webpagina's, moet je vaak op heel wat verschillende plaatsen in je CSS-bestand dezelfde kleurcodes invoeren. Als je klant of je zelf nadien niet tevreden bent, dan moet je al die kleurcodes gaan vervangen door een andere kleur. 

Als je gebruik maakt van kleurvariabelen, wordt dit een pak eenvoudiger.  

Bovenaan in je CSS-document kan je de kleurcodes invoeren op de volgende manier:

:root{
   --light: #799faf;
   --dark: #005d72;
   --matte: #386e79;
   --text: #cc8f48
}

De namen achter het dubbele koppelteken mag je zelf definiëren. Zo mag je ipv --light ook --kleur1 gebruiken enz. Je definieert achter :root dus alle kleuren die je vaker gaat gebruiken.

Wanneer je vervolgens één van deze kleuren wil gebruiken, dan kan je dit bijvoorbeeeld op de volgende manier:

article{
   color: var(--text);
   background-color: var(--dark);
}

Een kleurenpalet geautomatiseerd samenstellen

Via deze link  https://www.leerschool.be/crowldark/apps/color.html  kan je geautomatiseerd een kleurenpalet samenstellen. In het onderstaande filmpje leg ik uit hoe het werkt en hoe je het gereedschap kan gebruiken. 

Volgende pagina