Als je gewend bent om te ontwerpen voor drukwerk dan is ontwerpen voor websites m.b.t. de kleuren een verademing. De beperkingen van het CMYK kleurenprofiel kan je totaal achter je laten. Eigenlijk alle kleuren die je op je monitor ziet kun je gebruiken voor de website die je ontwerpt.
RGB en HEX kleuren
Voor het maken van website worden voornamelijk RGB en/of HEX kleuren gebruikt in plaats van CMYK. In je Photoshop color-picker zie je bij het kiezen van een kleur beide kleurcodes staan (zie afbeelding). RGB staat onder elkaar in getallen van 0 tot 255 (dus totaal 256 stappen) en HEX kleuren zijn opgebouwd uit de cijfers 0 t/m 9 en de letters a t/m f.
Bijvoorbeeld:
Zwart is in RGB 0,0,0 en in HEX #000000.
Wit is in RGB 255,255,255 en in HEX #ffffff.
Als je 100% zeker wilt weten dat de websitebouwer de juiste kleuren gebruikt kun je een staalkaart maken van alle gebruikte kleuren met daarbij de RGB en/of HEX kleurcode. Dan kunnen er geen misverstanden ontstaan over de te gebruiken kleuren.
RGBA
RGBA staat voor Red Green Blue Alpha. Alpha is geen kleur maar geeft de transparantie aan. Dit kan je op verschillende manieren inzetten.
Wij gebruiken RGBA bijvoorbeeld voor het maken van een mooie subtiele slagschaduw (natuurlijk alleen als dat in een ontwerp is opgenomen).
Een standaard schaduw van een blok op de website kan bijvoorbeeld dit zijn:
box-shadow: 10px 10px rgb(0,0,0);
Dit is een blok met boxshadow rgb(0,0,0)
Omdat deze schaduw wel heel erg donker is, kun je ervoor kiezen om een iets minder zwarte schaduw te plaatsen:
box-shadow: 10px 10px rgb(100,100,100);Dit is een blok met boxshadow rgb(100,100,100)
Maar het is nog veel mooier om de donkere versie transparant te maken:
box-shadow: 10px 10px rgba(0,0,0,0.6);Dit is een blok met boxshadow rgba(0,0,0,0.6)