Wat is de hexadecimale code? Alles wat u moet weten

Werken met kleuren in HTML is relatief eenvoudig. Met een paar eenvoudige CSS-declaraties kunt u de kleur van elke tekst of achtergrond op uw webpagina wijzigen. Maar hoe specificeer je een kleur? Het antwoord op deze vraag zal ons in een konijnenhol brengen, wat ons uiteindelijk leidt naar het concept van hexadecimale kleurcodes.

Als je eerder met HTML of CSS hebt gewerkt, heb je waarschijnlijk de term hex-code gehoord. Maar wat is een hexadecimale code precies? Wat zijn enkele voorbeelden van hexadecimale codes? Wat is het verschil tussen een hex-code en een RGB-kleurcode?

Wat is hexadecimale code?

Wanneer u voor het eerst met kleur gaat werken, kunt u een grafische interface gebruiken om kleuren te kiezen die u wilt toepassen op elementen op uw pagina. Wanneer u naar de onderliggende code gaat kijken in plaats van alleen naar uw grafische editor, ziet u dat kleuren verschijnen als vreemd uitziende reeksen tekens. Dergelijke reeksen staan ​​bekend als hexadecimale codes; ze zien er ongeveer zo uit:

#FF0092

Verwant: Essentiële grafische ontwerptermen die u moet kennen

U kunt op verschillende manieren kleuren in CSS specificeren. U kunt de namen van enkele vooraf gedefinieerde kleuren gebruiken, zoals: rood en donkermagenta. Om exacte kleurnuances te specificeren, moet u echter een meer nauwkeurige meting gebruiken: iets numerieks.

CSS biedt twee hoofdopties: RGB en hex. In beide indelingen geeft u de hoeveelheden rood, groen en blauw op die de uiteindelijke kleur vormen. RGB gebruikt drie getallen tussen 0 en 255. Hex doet precies hetzelfde, alleen met een ander grondtal (16) dan het decimaalteken (10) dat je gewend bent.

Hex gebruikt de letters A-F, naast de cijfers 0-9, voor in totaal 16 symbolen. A in hex is het equivalent van 10 in decimalen. F in hex is 15 in decimaal.

Hoe werken hexadecimale kleurcodes?

In de meest elementaire vorm is een hexadecimale code een weergave van hoeveel rood, groen en blauw in een kleur bestaat. Een hexadecimale code bestaat uit zes tekens. De eerste twee hebben betrekking op hoeveel rood er in de mix zit, de volgende twee hebben betrekking op de hoeveelheid groen en de laatste twee cijfers geven de hoeveelheid blauw weer. Hex-codes verwijzen naar specifieke kleuren, waardoor ontwerpers en ontwikkelaars gemakkelijk kunnen communiceren over kleurenschema's.

Met 16 × 16 (256) waarden voor elke kleurcomponent zijn er dan 256 × 256 × 256 mogelijke combinaties. In hex variëren ze van #000000 (puur zwart) tot #FFFFFF (puur wit).

Hex-kleurcodes lezen

Het is eenvoudig om hexadecimale kleurcodes te begrijpen. Laten we het voorbeeld nemen van #FF5733. Verdeel eerst de zes tekens in drie delen die elk twee tekens bevatten. Zoals u weet, vertegenwoordigen de eerste twee delen rood, de tweede twee delen groen en de derde twee delen blauw. Dus in ons voorbeeld:

• De rode component, RR, heeft de waarde FF.
• De groene component, GG, is 57.
• De blauwe component, BB, is 33.

Om nu de intensiteit van deze kleursegmenten te vinden, moet u het hexadecimale getal berekenen met behulp van deze drie stappen:

1. Vermenigvuldig het eerste hexadecimale teken van RR met 16. Als het teken een letter is, converteer het dan naar de overeenkomstige waarde. In dit geval is het eerste teken F, wat 15 is. Dus voor ons voorbeeld vermenigvuldig je 15 × 16, wat gelijk is aan 240.
2. Voeg vervolgens het tweede teken van RR toe. Nogmaals, converteer een letter naar de overeenkomstige waarde, als dat nodig is. In ons voorbeeld is het tweede teken F, wat gelijk is aan 15.
3. Als u klaar bent, voegt u de totalen toe om één enkele waarde te krijgen. Als u 240 en 15 uit ons voorbeeld optelt, ziet u dat de waarde van FF 255 is.

Herhaal dezelfde formule voor de resterende twee segmenten, GG aangegeven met 57 en BB aangegeven met 33. Als de handmatige berekeningen te overweldigend lijken, kun je altijd een hex-naar-RGB-conversietool gebruiken (zoals BinaireHex-omzetter) om een ​​kleur te lezen. Je zou moeten vinden dat de hexadecimale waarde #FF5733 is gelijk aan RGB (255, 87, 51).

Waarom is de hexadecimale kleurcode zo populair?

Hoewel er verschillende kleurmodellen zijn (RGB, CMYK, HSL), zijn hex-kleurcodes misschien wel de meest gebruikte weergave. Dit komt omdat ze eenvoudig en gemakkelijk te begrijpen zijn.

Een formaat met vaste breedte is ook erg handig. Hexadecimale kleuren van volledige lengte zijn altijd zeven tekens, inclusief de voorloop # symbool.

Hex-kleuren zijn zeer efficiënt en gebruiken alleen deze zeven tekens om meer dan 16 miljoen kleuren weer te geven. En onderscheid maken tussen deze kleuren is een eenvoudig proces.

Hex versus RGB: is er een verschil?

Het RGB-kleurcoderingssysteem gebruikt drie decimale getallen om de relatieve intensiteiten van rood, groen en blauw aan te geven. Het gebruikt de cijfers 0-9.

Hex gebruikt ook drie getallen om rood, groen en blauw weer te geven, maar het gebruikt extra cijfers (A-F) voor basis 16. Er is geen verschil in de resulterende kleuren, het zijn gewoon verschillende formaten om dezelfde informatie over te brengen.

Verwant: Basisprincipes van CSS: werken met kleuren

Waar wordt de hexadecimale code voor gebruikt?

Een groot aantal verschillende toepassingen gebruiken RGB, van televisieschermen tot mobiele apparaten, games en borden. Je zult voornamelijk hex-kleurcodes zien in webdesign en andere grafische programma's.

U kunt hexadecimale codes ook zien als een universele manier om kleuren te identificeren. Veel websites gebruiken ze om een ​​specifieke kleur te identificeren, omdat ze kort zijn en meestal ondubbelzinnig qua context.

De hexadecimale kleurcode is geen raketwetenschap

Dus daar heb je de basis van hex-kleurcodes. Ze zijn niet bepaald harde wetenschap, maar ze dienen wel een duidelijk doel in ontwerp (en in de technische wereld). Als je op zoek bent naar een tool die je helpt te begrijpen hoe hex-kleuren werken, of een tool die je leert over de RGB-mixtheorie, dan zijn er genoeg online. Onthoud dat de sleutel tot het leren van iets nieuws is om het stap voor stap te doen.

Hex-kleurcodes zijn niet het meest opwindende ter wereld, maar het is van vitaal belang om ze te begrijpen als u in webdesign werkt. Als u met hex-kleurcodes kunt werken, wordt uw ontwerp veel gemakkelijker.

Hoe u de hexadecimale waarde van elke kleur op uw scherm kunt vinden

Leer hoe u binnen enkele seconden een kleurwaarde van uw scherm haalt. Vooral handig voor webdesigners!

Lees volgende

Over de auteur