7 minuten leestijd
De ultieme handleiding voor hex-kleuren
Hexadecimale kleuren zijn de visuele taal van het internet. Wanneer u wilt dat een webpagina (of web-app) een bepaalde kleur weergeeft, geeft u deze de hexadecimale code door.
Wat is een hexadecimale kleurcode?
Een hexadecimale kleurcode is een code van 6 symbolen die bestaat uit maximaal drie elementen van 2 symbolen. Elk van de 2-symboolelementen drukt een kleurwaarde uit van 0 tot 255.
- Element 1: Rode waarde
- Element 2: Groene waarde
- Element 3: Blauwe waarde
De code is geschreven met behulp van een formule die elke waarde omzet in een unieke 2-cijferige alfanumerieke code. De RGB-code (224, 105, 16) is bijvoorbeeld E06910 in hexadecimale code.
Waarom? Dat is wat ingewikkeld en heeft te maken met het nummeringssysteem met basis 16. Als u daar nieuwsgierig naar bent, vindt u hier een goede uitleg . Als u zich afvraagt wat dit allemaal voor u als ontwerper betekent, zijn er een paar belangrijke dingen die u moet weten:
- Met behulp van de hexadecimale codes kunt u meer dan 16 miljoen unieke kleuren weergeven, waarvan wordt gezegd dat dit er meer zijn dan het menselijk oog kan waarnemen.
- U kunt gebruikmaken van kleurenkiezers of converters om de code voor u te genereren.
Waarom de hexadecimale code gebruiken in plaats van cijfers? Als u getallen zou gebruiken, zou elke rode, groene of blauwe waarde van 0 tot 255 een, twee of drie mogelijke cijfers kunnen zijn. In totaal kan de code uit drie cijfers of uit negen cijfers bestaan. Dit kan verwarring veroorzaken bij de systemen die de codes lezen, maar vooral bij de mensen die coderen. Als elke waarde uit zes symbolen bestaat, wordt de kans op fouten kleiner.
Wat zijn hexadecimale kleurcodes?
Hex-kleurcodes zijn waarden die het display vertellen hoeveel van een kleur moet worden weergegeven. De waarden zijn een speciale code die kleurwaarden van 0 tot 255 vertegenwoordigt.
Als rood, groen en blauw allemaal minimaal 0 zijn (weergegeven als “00” in de code), is de weergegeven kleur de kleur zwart. Als rood, groen en blauw allemaal het maximum van 255 hebben (weergegeven als “ff” in de code), is de weergegeven kleur wit.
De hexadecimale kleurwaarden kunnen worden gecombineerd om meer dan 16 miljoen verschillende kleuren weer te geven. Dus de meeste kleuren zullen er tussenin zitten. U kunt altijd een converter gebruiken om de RGB-numerieke waarden voor u om te zetten in hexadecimale code .
Maar het kan handig zijn om enkele van de meest voorkomende hexadecimale kleuren te onthouden. Deze kennis kan van pas komen als u on-the-fly ontwerpt met een codeerder.
Populaire hexadecimale kleurcodes
| Kleur | RGB | Hex-kleurcode |
| Zwart | (0, 0, 0) | #000000 |
| Blauw | (0, 0, 255) | #0000FF |
| Grijs | (128, 128, 128) | #808080 |
| Groen | (0, 128, 0) | #008000 |
| Paars | (128, 0, 128) | #800080 |
| Rood | (255, 0, 0) | #FF0000 |
| Wit | (255, 255, 255) | #FFFFFF |
Unieke hexadecimale kleurcodes
| Kleur | RGB | Hex-kleurcode | Gebruik |
| AliceBlue | (240, 248, 255) | #F0F8FF | Subtiele achtergrond voor een eCommerce- of bedrijfspagina |
| Koraal | (255, 127, 80) | #FF7F50 | Rustige accentkleur |
| Vuursteen | (178, 34, 34) | #B22222 | Agressieve accentkleur |
| Felroze | (255, 105, 180) | #FF69B4 | Speelse accentkleur |
| CitroenChiffon | (255, 250, 205) | #FFFACD | Romantische achtergrond voor een bruiloft of andere persoonlijke pagina |
Hoe werken Hex-kleuren?
Hex-kleuren zijn gebaseerd op het RGB-kleurmodel dat al sinds de begindagen van de fotografie in gebruik is.
De theorie achter het model is dat u vrijwel elke kleur kunt creëren die het oog kan zien door verschillende combinaties van rode, groene en blauwe kleurwaarden toe te wijzen. Het RGB-kleurmodel wordt gebruikt door televisies, digitale camera’s en videoprojectoren, naast praktisch elk bestaand computer- en telefoonscherm.
Op internet en de meeste digitale toepassingen wordt een kleurwaardeschaal van 0 tot 255 gebruikt. U (of een programmeur) vertelt het scherm hoeveel rood, blauw en groen moet worden weergegeven. Die combinatie zorgt voor de kleur die de kijker ziet.
U heeft veel vrijheid om de kleur te kiezen die u wilt. Het totale aantal mogelijke combinaties is 16.777.216, dat is meer dan het menselijk oog kan onderscheiden.
Wat is het verschil tussen het gebruik van RGB- en hexadecimale codes?
Hex-kleurcodes hebben de voorkeur van programmeurs omdat ze voorspelbaar zijn. Ze bestaan altijd uit zes cijfers, ongeacht de kleur. RGB-waarden kunnen uit drie cijfers en maximaal negen cijfers bestaan.
U bent niet verplicht om hexadecimale codes te gebruiken in webdesign. Als u een pagina in HTML codeert, kunt u ook de RGB-waarden of zelfs kleurnamen gebruiken.
Hier ziet u hoe de HTML eruit zou zien als u bijvoorbeeld een aquamarijnachtergrond voor een webpagina zou coderen.
- Hex kleurcode voor aquamarijn: <div style=”background-color:#7FFFD4″></div>
- RGB-kleurcode voor aquamarijn: <div style=”background-color:rgb(127, 255, 212)”></div>
- Kleurnaamcode voor aquamarijn: <div style=”background-color:aquamarine”></div>
Hoewel u de naam of de RGB-code kunt opgeven, betekent dit niet dat u dat moet doen. Om de kans op fouten in uw project te verkleinen, gebruikt u een kleurenkiezer of -converter om de gewenste hex-code te genereren. Op die manier is er minder kans dat een huidige of toekomstige codeur de conversie zelf probeert uit te voeren en uw prachtige webpagina in iets lelijks verandert.
Werken met hex-kleuren
Als u gewend bent om met kleuren te werken in Adobe Illustrator of om af te drukken, zal het werken met hex-kleuren op het web een kleine aanpassing zijn. Hier zijn een paar dingen die u moet weten om uw project goed te laten verlopen.
Pas op voor kleurstrepen
Met 16.777.216 potentiële kleuren bieden hex-kleurcodes u tal van opties voor contrasterende kleuren. Maar omdat elke pixel een unieke kleur moet weergeven, kunt u met hex-kleuren niet goed tussen tinten van verschillende kleuren mengen.
Wanneer webontwerpers gradiënts proberen te maken met hex-kleuren, zijn de resultaten niet altijd zoals verwacht. Omdat de tinten niet overvloeien, toont het scherm kleurstreepvorming.
Kleurstrepen komen vaker voor op oudere apparaten die niet in staat zijn om miljoenen kleuren weer te geven. In moderne CSS, kunt u gradiënten programmeren om het probleem van kleurstrepen te voorkomen. Op moderne schermen komen kleurstrepen het meest voor in foto’s van natuurlijke gradiënten zoals luchten en regenbogen, waarbij de miljoenen kleuren die met het blote oog zichtbaar zijn, worden gecomprimeerd om bestandsruimte te besparen.
Bespaar tijd met hulpmiddelen voor het Hex-kleurpalet
Als u in een handomdraai een unieke look ontwikkelt, is het een hele opgave om complementaire kleuren te selecteren uit de 16 miljoen beschikbare kleuren. Gelukkig hebben collega-ontwerpers een deel van het werk voor u gedaan door databases met hex-kleurenpaletten en interactieve selectors te maken.
Kleur-Hex kleurenpaletten: Blader en doorzoek duizenden door de community gemaakte hexadecimale kleurencombinaties op Kleur-Hex kleurenpaletten .
Browsen? Blader pagina voor pagina door de genoemde paletten. Elk palet heeft een naam om u een idee te geven van de stijl en identificeert alle zes hex-kleuren. Klik op de naam van de ontwerper om andere kleurenpaletten te zien die ze hebben gemaakt.
Color-Hex Color Palettes is een fantastische bron voor inspiratie voor hex-kleuren.
Coolors: De hexadecimale kleurbron Coolors combineert inspiratie met functionaliteit om het ontwerpproces te versnellen.
U kunt bladeren door trendy kleurenpaletten om te zien wat de aandacht van andere ontwerpers trok. Elk trendy palet kan worden opgeslagen in uw persoonlijke favorieten als u zich aanmeldt voor een account.
Of gebruik hun bliksemsnelle paletgenerator om paletten te maken op basis van de kleuren die u wilt gebruiken. Een tijdbesparende functie van Coolors is de mogelijkheid om een kleur (of kleuren) te “vergrendelen” en vervolgens extra complementaire kleuren te genereren met een tik op uw spatiebalk. Nieuwe looks vliegen voorbij. U hoeft alleen maar te wachten op de stijl die u bevalt.
Coolors is ook verkrijgbaar als een iOS-app of Adobe-extensie .
Match Hex-kleuren met andere ontwerpelementen
Als u ontwerpt voor een bestaande site, of andere elementen hebt die u wilt matchen, moet u weten met welke hex-kleuren u op de site werkt. Dit is waar een goede kleurenkiezer van onschatbare waarde is. Met ImageColorPicker , kunt u elke afbeelding uploaden en zien welke hexadecimale kleuren worden weergegeven.
Een andere goede bron is de ColorPick Pipet, een Google Chrome-extensie waarmee u de hexadecimale kleur voor elk element van een webpagina kunt zien. Als u een kleur op een bepaalde site mooi vindt, gebruik dan de Pipet om te zien wat het is.
Als u degene bent die de afbeeldingen en andere elementen voor de site kiest, wilt u een gemakkelijke manier om items te identificeren die overeenkomen met uw hex-kleurenpalet. Op iStock , kunt u een hexadecimale kleur als filter toevoegen aan elke zoekopdracht. Voer de code in of maak een keuze uit hun kleurenkiezer en typ vervolgens uw zoektermen in. De site toont gerelateerde afbeeldingen die nauw overeenkomen met de kleur die u hebt ingevoerd.
Bent u klaar om de ideale afbeeldingen voor je hex-kleurenschema te vinden? Ga hierheen om de bestanden te vinden die uw project zullen versterken.
Was dit artikel behulpzaam?
Meer bronnen voor u
- 5 minuten leestijd
- 8 minuten leestijd
