Basisprincipes van CSS: werken met kleuren

Er zijn veel factoren waarmee u rekening moet houden bij het ontwerpen van een website; lettertype, UX-flow en nog veel meer. Een zeer belangrijk ontwerpelement is kleur. Zelfs eenvoudige beslissingen zoals merkkleur, randkleur en achtergrondkleur hebben een duidelijke en merkbare impact.

In dit artikel bespreken we de basisprincipes van CSS-kleuren en leren we hoe u een HTML-site kunt transformeren in een onberispelijk ogende website.

Aan de slag met CSS-kleuren

Er is een bepaalde manier om kleuren in CSS te beschrijven die een computer kan begrijpen. Dit wordt meestal gedaan door de kleur op te splitsen in verschillende componenten, waarbij een gemengde set primaire kleuren wordt berekend om de gewenste kleur te vormen. Er zijn verschillende manieren om een ​​kleur in CSS te beschrijven.

Kleurnamen gebruiken als trefwoorden

Er zijn ongeveer 140 CSS-kleurnamen die door de meeste moderne browsers worden ondersteund. Het kan zo simpel zijn als rood of cyaan voor het kleurzoekwoord. Hoewel het helpt bij een gematigd kleurengamma, bent u beperkt tot een paar vaste kleuren zonder enige controle over tinten en tinten. Dit is waar u naar het hogere bereik van CSS-kleuropties moet springen.

/*Syntax*/
kleur rood;
kleur: karmozijnrood;
kleur: leiblauw;

RGB-waarden gebruiken

Bij het ontwerpen van een website of een app, kleurenschema maakt veel uit - het zou zeker niet het laatste moeten zijn waar u aan denkt. In CSS kunt u drie methoden gebruiken om een ​​RGB-kleur weer te geven. Dit zijn hexadecimale tekenreeksnotatie, RGB-functionele notatie en HSL-functionele notatie. Hier is een nadere blik op elk van hen.

Hexadecimale tekenreeksnotatie

Hexadecimale tekenreeksnotatie begint altijd met het teken #. Na dit teken geeft u de kleuren op met hexadecimale cijfers van een specifieke kleurcode. De tekenreeks is niet hoofdlettergevoelig, maar het is gebruikelijk om kleine letters te gebruiken. Hier zijn enkele gebruiksscenario's:

#rrggbb

Het is de meest gebruikelijke manier om een ​​numerieke kleur te beschrijven. Het is een volledig dekkende kleur met rode, groene en blauwe componenten als 0xrr, 0xgg, en 0xbb respectievelijk.

#rrggbbaa

Het volgt de hierboven beschreven RGB-criteria met een alfakanaal dat de puurheid van de kleur afhandelt. Hoe lager de 0xaa waarde is, hoe transparanter de kleur wordt.

#rgb

Als je kleur hebt #556677, je kunt het gewoon schrijven als #567 omdat het vertegenwoordigt 0xrr, 0xgg, en 0xbb respectievelijk. Bijvoorbeeld, #000 (of #000000) is zwart terwijl #ff (of #ffffff) is wit.

#rgba

Het volgt de bovenstaande criteria met een alfakanaal gespecificeerd door 0xaa ondoorzichtigheid te controleren.

RGB-functionele notatie

RGB-functienotatie vertegenwoordigt kleuren met rode, groene en blauwe componenten. Het is gedefinieerd met behulp van de rgb() functie die invoerparameters accepteert in de vorm van primaire rode, groene en blauwe componenten (en een optioneel alfakanaal). De rode, groene en blauwe waarden moeten een geheel getal zijn tussen 0 tot 255 (inclusief), of een percentage variërend van 0% tot 100%. Aan de andere kant accepteert het alfakanaal waarden van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig). Het accepteert ook een procentuele waarde van 0% (zelfde als 0,0) en 100% (zelfde als 1,0).

/*Syntax*/
kleur: rgb (rr, gg, bb);
kleur: rgba (rr, gg, bb, a);

HSL Functionele Notatie

HSL-functienotatie vertegenwoordigt kleur met behulp van tint, verzadiging en helderheid. Het lijkt erg op de RGB() functie qua gebruik. U kunt gemakkelijk vind de hexadecimale waarde van elke kleur op je computerscherm. Bij deze kleurmethode definieert de tint de werkelijke kleur volgens de positie op het kleurenwiel. Verzadiging is het percentage grijs met de maximaal mogelijke tint. Helderheid verandert de kleur van de donkerste naar de helderste mogelijke verschijning naarmate deze toeneemt.

De tintwaarde (H) wordt gespecificeerd door de ondersteunde hoekeenheid in CSS. Het bevat graden, rad, afgestudeerd, en draai. Verzadiging (S) specificeert het percentage van de uiteindelijke kleur dat bestaat uit tint. De component helderheid (L) definieert het grijsniveau.

/*Syntax*/
kleur: hsl (XXdeg, XX%, XX%);
kleur: hsl (XXturn, XX%, XX%);

Kleuren toepassen op HTML-elementen

In CSS is de kleur eigenschap definieert de voorgrondkleur van de inhoud, en Achtergrond kleur definieert de achtergrondkleur van de inhoud gestructureerd door HTML. Wanneer een element wordt weergegeven, kunt u de kleureigenschappen gebruiken om het op te maken.

Kleureigenschap voor teksten

De kleur eigenschap wordt gebruikt tijdens het tekenen van tekst en wanneer u enige vorm van tekstversieringen nodig heeft. U kunt de tekst-decoratie-kleur eigenschap om onderstrepingen, overlijnen of doorgestreepte lijnen van verschillende kleuren weer te geven. U kunt de achtergrondkleur van tekst wijzigen met de Achtergrond kleur eigendom. U kunt een schaduweffect op tekst toepassen met de schaduw tekst eigendom. U kunt selecteren: tekst-nadruk-kleur tijdens het tekenen van nadruksymbolen in tekstvelden.

Kleureigenschap voor dozen

Zoals u weet, volgt alles op een webpagina het boxmodel. Elk element is dus een vak met een soort inhoud en optionele opvulling, rand en marge. U kunt de Achtergrond kleur eigenschap wanneer er geen inhoud op de voorgrond is. Wanneer u een lijn tekent om de kolommen van een tekst te scheiden, kunt u de kolom-regel-kleur eigendom ervoor. Er is een omtrekkleur eigenschap om de omtrek te kleuren. Merk op dat een omtrek anders is dan de rand: het fungeert als een focusindicator.

Kleureigenschap voor randen

Elk HTML-element kan een rand hebben. U kunt de rand kleur eigendom als border-top-kleur, rand-rechts-kleur, rand-onder-kleur, en rand-links-kleur om de randkleur van de corresponderende zijden in te stellen. Het gebruik van de steno-eigenschap is echter een goede gewoonte.

De border-inline-start-kleur eigenschap laat u de randen van de rand kleuren die zich het dichtst bij het begin bevinden. Aan de andere kant, de border-inline-end-color eigenschap laat u het einde van het begin van de tekstregels binnen een kader kleuren. Hoewel het varieert afhankelijk van uw schrijfmodus, tekst-oriëntatie, en richting.

Afronding: kleur en toegankelijkheid

Hoewel een mooi ontworpen website sterk wordt beïnvloed door de gebruikte kleur, moet u er altijd voor zorgen dat deze toegankelijk is. Onjuist gebruik van kleur kan leiden tot aanzienlijk verlies van verkeer op uw website.

Het gebruik van hexadecimale tekenreeksnotaties, kleurnamen of RGB-waarden is geheel aan jou. Zorg ervoor dat u kleuren gebruikt om bestaande tekst te versterken en laat deze een bepaalde visuele hiërarchie volgen. Meer leren over kleurentheorie en het maken van je eigen palet is een uitstekend idee als je een beginnende webontwikkelaar bent. Tot dan, vrolijk en kleurrijk coderen!

Kleurtheorie gebruiken om uw creatieve projecten te verbeteren

Door de juiste kleuren op de juiste manier te gebruiken, kunt u uw creatieve projecten naar een geheel nieuw niveau tillen.

Lees volgende

Over de auteur