4 manieren om kleuren in CSS te definiëren

Belangrijkste leerpunten

• Kleurnamen gebruiken: CSS biedt 145 kleurnamen voor eenvoudige en beginnersvriendelijke kleurselectie, maar de opties zijn beperkt en voldoen mogelijk niet aan de precieze ontwerpbehoeften.
• Hexadecimale kleurcodes: Hexcodes bieden een breed scala aan kleuropties en nauwkeurige aanpassingen, hoewel ze minder intuïtief kunnen zijn om te gebruiken en te onthouden.
• RGB- en RGBA-kleurwaarden: RGB maakt nauwkeurige kleurcontrole met numerieke waarden mogelijk, terwijl RGBA transparantie toevoegt. Het is belangrijk om toegankelijke kleurencombinaties te garanderen.

Kleuren behoren tot de meest gebruikte CSS-kenmerken en spelen een cruciale rol bij het vormgeven van de visuele identiteit, sfeer en gebruikerservaring van een website. CSS biedt een scala aan keuzes voor het gebruik van kleur, elk afgestemd op specifieke ontwerpbehoeften en -voorkeuren.

Hoewel het belang van kleurdefinitie gemakkelijk over het hoofd wordt gezien, kunnen uw keuzes het uiterlijk van uw website aanzienlijk beïnvloeden. Door de verschillen tussen verschillende methoden te onderzoeken en te zien hoe u deze praktisch kunt toepassen en combineren, wordt uw vermogen om visueel aantrekkelijke websites te maken vergroot.

1. Kleurnamen gebruiken

CSS biedt een handige manier om kleuren te definiëren met behulp van namen, en er zijn 145 opties beschikbaar. Deze kleurnamen variëren van eenvoudig ‘rood’, ‘groen’ en ‘blauw’ tot meer specifieke tinten zoals ‘koraal’ of ‘lavendel’.

Het gebruik van benoemde kleuren is eenvoudig: u selecteert een kleurnaam zoals “rood” en gebruikt deze in een CSS-eigenschap die kleurwaarden ondersteunt. Zo een eigenschappen omvatten het voor de hand liggende kleur En Achtergrond kleur, maar ook rand kleur, omtrekkleur, En schaduw tekst, onder andere.

Kleurnamen zijn handig als u een tijdelijke kleur nodig heeft voor prototyping of als u uw code gemakkelijk leesbaar wilt houden. Hier is de syntaxis:

color_property: color_name;

In dit geval gewoon vervangen kleurnaam met de specifieke kleur die u wilt gebruiken. Als u bijvoorbeeld de tekst wilt instellen kleur van een paragraaf naar rood, schrijven:

p {
color: red;
}

Hierdoor krijgen uw alinea's een rode tekstkleur:

Pluspunten: Ze zijn gemakkelijk te lezen en te begrijpen in uw CSS-code. Ze zijn beginnersvriendelijk, werken goed in verschillende browsers en zijn handig voor snelle ontwerpideeën.

Nadelen: Ze hebben beperkte opties en bieden mogelijk niet de precieze tinten die u nodig heeft, waardoor de ontwerpcreativiteit wordt beperkt. Bovendien voldoen ze mogelijk niet altijd aan strikte toegankelijkheidseisen en kan de ondersteuning in oudere systemen variëren.

2. Hexadecimale kleurcodes

Hexadecimale kleurcodes, ook wel 'hexadecimale codes' genoemd, zijn de meest gebruikelijke methoden voor het specificeren van kleuren in webontwerp. Deze codes bestaan ​​uit combinaties van zes tekens van cijfers en letters (0-9, A-F), die de mix van rode, groene en blauwe (RGB) componenten in een kleur vertegenwoordigen.

Hoewel ze eenvoudig te gebruiken zijn, kan het een uitdaging zijn om te begrijpen hoe ze werken. U kunt nemen een diepe duik in hexadecimale codes beter te begrijpen. Hier is een eenvoudig voorbeeld van hoe u hexadecimale codes in CSS kunt gebruiken:

color: #RRGGBB;

In dit formaat vertegenwoordigen RR, GG en BB respectievelijk de rode, groene en blauwe componenten. Elke component kan variëren van 00 (geen intensiteit) tot FF (maximale intensiteit). Als u bijvoorbeeld de achtergrondkleur van de koptekst van een website wilt instellen op een specifieke tint blauw, kunt u een hexadecimale code als deze gebruiken:

header {
background-color: #336699;
}

Dit levert een diepblauwe kleur op:

​​​​​

Je kunt ook een afkorting gebruiken als elk van de drie componenten hetzelfde teken twee keer herhaalt. Je kunt het bovenstaande voorbeeld schrijven als:

header {
background-color: #369;
}

Pluspunten: Hexadecimale kleurcodes bieden een breed scala aan kleuropties, waardoor u gedetailleerde en aangepaste tinten kunt genereren. Ze bieden soepele controle over kleurkeuzes, waardoor ze ideaal zijn voor complexe ontwerpvereisten.

Nadelen: Hoewel hexadecimale codes krachtig zijn, kunnen ze minder intuïtief zijn dan benoemde kleuren. U kunt ook de uitdaging tegenkomen om specifieke kleurwaarden te onthouden. Gelukkig, hulpmiddelen voor het vinden van de hexadecimale codes van kleuren die u tegenkomt zijn beschikbaar, waardoor het proces beter beheersbaar wordt.

3. RGB- en RGBA-kleurwaarden

Net als hexadecimale codes kunt u met deze indeling kleuren opgeven op basis van hun rode, groene en blauwe componenten. Deze keer kunt u echter vriendelijkere gehele getallen gebruiken.

RGB-kleurwaarden

RGB-kleurwaarden zijn de op een na meest gebruikte methode voor het definiëren van kleuren in CSS. “RGB” staat voor rood, groen en blauw, uitgedrukt als een CSS-functie met haakjes erna. Tussen haakjes wijst u waarden toe aan elk kleurkanaal, variërend van 0 tot 255. Hiermee kunt u de intensiteit van rood, groen en blauw regelen in de kleur die u wilt gebruiken.

Hier is de syntaxis:

rgb(red_value, green_value, blue_value);

Vervangen rode_waarde, groene_waarde, En blauwe_waarde met hun respectieve numerieke waarden. U kunt bijvoorbeeld witte, zwarte en rode kleuren verkrijgen zoals weergegeven in deze afbeelding:

Wanneer u alle drie de kleurkanalen (rood, groen en blauw) instelt op de maximale waarde van 255, resulteert dit in de hoogste intensiteit voor elk kanaal, waardoor de kleur wit ontstaat:

.white-box {
 color: rgb(255, 255, 255);
}

Wanneer u alle drie de kleurkanalen instelt op de minimumwaarde van 0, vertegenwoordigt dit de afwezigheid van kleur in elk kanaal, wat resulteert in zwart.

.black-box {
color: rgb(0, 0, 0);
}

Als u het rode kanaal op de maximale waarde van 255 instelt, terwijl de andere kanalen op hun minimale waarde van 0 blijven, ontstaat de kleur rood:

.red-box {
color: rgb(255, 0, 0); 
}

RGBA-kleurwaarden

RGBA werkt op dezelfde manier als RGB, met als enige verschil dat er een alfawaarde is opgenomen. De “A” in RGBA staat voor alfa, wat het transparantie- of dekkingsniveau voor de gekozen kleur bepaalt. Een waarde van 0 staat voor volledige transparantie, waardoor de kleur volledig onzichtbaar wordt, terwijl een waarde van 1 voor volledige dekking staat, waardoor de kleur volledig zichtbaar wordt.

RGBA is vooral handig als u elementen met verschillende transparantieniveaus wilt maken, zoals doorschijnende achtergronden of vervaagde tekst. De volledige syntaxis is:

color: rgba(red_value, green_value, blue_value, alpha_value);

Hier, rode_waarde, groene_waarde, En blauwe_waarde vertegenwoordigen de kleurkanalen zoals in RGB, en alpha_waarde specificeert het niveau van transparantie.

div {
background-color: rgba(0, 128, 0, 0.5);
}

In dit voorbeeld wijst de alfawaarde van 0,5 50% transparantie toe aan de groene kleur, waardoor de inhoud eronder zichtbaar wordt:

Pluspunten: Met RGB en RGBA kunt u kleuren nauwkeurig regelen, waardoor het gemakkelijker wordt om precieze tinten te kiezen en visueel aantrekkelijke ontwerpen te maken. Ze zijn compatibel met verschillende webbrowsers, zodat de door u gekozen kleuren er consistent uitzien.

Nadelen: De uitdaging ligt in het zorgen voor toegankelijke kleurencombinaties. Het is cruciaal om aandacht te besteden aan contrastverhoudingen, vooral als je met transparantie in RGBA werkt. De WCAG-richtlijnen kunnen hierbij helpen jij zorgt ervoor dat jouw ontwerp toegankelijk is.

4. HSL- en HSLA-kleurwaarden

HSL, een afkorting van Tint, Verzadiging en Lichtheid, is een andere CSS-functie die kleuren definieert. Net als RGB gebruikt HSL numerieke waarden om kleuren weer te geven, maar doet dit op een andere manier. Je bent er misschien bekend mee HSL-waarden van UI-componenten in ontwerp-apps en elders.

Tint: Dit vertegenwoordigt de kleur zelf met behulp van graden op een kleurenwiel, variërend van 0 tot 360. Stel je het voor als het selecteren van een punt op een cirkel, waarbij elke graad overeenkomt met een andere kleur. Bijvoorbeeld 0 en 360 graden voor rood, 120 graden voor groen en 240 graden voor blauw.

Verzadiging: Verzadiging bepaalt de levendigheid of intensiteit van de kleur. Het definieert de relatie van de kleur met grijs, waarbij 0% volledig grijstinten (onverzadigd) is en 100% volledig verzadigd (levendig en puur).

Lichtheid: Lichtheid geeft aan hoe helder of donker de kleur wordt weergegeven. Het heeft te maken met de positie van de kleur in het spectrum tussen zwart (0%) en wit (100%). Een waarde van 50% vertegenwoordigt de normale kleur, terwijl waarden onder de 50% de kleur donkerder maken en waarden boven de 50% de kleur lichter maken.

Naast HSL is er HSLA, waarbij de “A” staat voor “alpha”. Dit is vergelijkbaar met de “A” in RGBA en betekent transparantie.

Hier is de syntaxis:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Gebruik deze syntaxis om te vervangen tint_waarde, verzadigingspercentage, En lichtheid_percentage met de specifieke waarden die u voor elk onderdeel wilt. Bijvoorbeeld:

div {
background-color: hsl(120, 100%, 50%);
}

In dit voorbeeld is de achtergrondkleur van a div element wordt op levendig groen ingesteld met behulp van HSL-waarden. De 120 vertegenwoordigt de tint (groen), 100% is voor volledige verzadiging en 50% stelt de lichtheid in op een uitgebalanceerd niveau.

Pluspunten: HSL en HSLA bieden veelzijdige kleurberekeningen met behulp van aangepaste CSS-eigenschappen. Ze zijn zeer compatibel met moderne browsers en maken eenvoudige aanpassingen aan de kleurlichtheid mogelijk.

Nadelen: Het leren van de HSL houdt in kleurenwetenschap begrijpen, zoals tinten en verzadigingen, wat een grotere uitdaging kan zijn dan de bekende RGB-kleuren.

De kracht van CSS-kleuren omarmen

Er zijn meer methoden die u kunt controleren en terwijl u de verschillende formaten voor het definiëren van kleuren verkent Houd er bij CSS rekening mee dat u de macht heeft om het uiterlijk, de sfeer en de gebruikerservaring van uw website vorm te geven.

Uw keuze voor het kleurformaat (of het nu gaat om eenvoudige kleurnamen, hexadecimale codes, RGB of HSL) kan van invloed zijn op hoe uw publiek uw site waarneemt. Experimenteer, leer en vind dus de kleurdefinities die het beste bij uw ontwerpdoelen passen.