Hexadecimale getallen worden gebruikt om kleuren te specificeren. Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam al doet vermoeden, op het getal 16. De getallen zijn als volgt: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Cijfers van 10 tot 15 worden vervangen door Latijnse letters. Getallen groter dan 15 in het hexadecimale systeem worden gevormd door twee getallen tot één te combineren. Het getal 255 in decimalen komt bijvoorbeeld overeen met het getal FF in hexadecimaal. Om verwarring bij het bepalen van het getallenstelsel te voorkomen, wordt vóór het hexadecimale getal een hash-symbool # geplaatst, bijvoorbeeld #666999. Elk van de drie kleuren – rood, groen en blauw – kan waarden aannemen van 00 tot FF. Het kleursymbool is dus verdeeld in drie componenten #rrggbb, waarbij de eerste twee symbolen de rode component van de kleur aangeven, de middelste twee - groen en de laatste twee - blauw. Het is toegestaan om de afgekorte vorm #rgb te gebruiken, waarbij elk teken verdubbeld moet worden. De invoer #fe0 moet dus worden beschouwd als #ffee00.
Op naam
| Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Browsers ondersteunen sommige kleuren op basis van hun naam. In tabel 1 toont de namen, hexadecimale code, RGB, HSL-waarden en beschrijving.
| Naam | Kleur | Code | RGB | HSL | Beschrijving |
|---|---|---|---|---|---|
| wit | #ffffff of #fff | rgb(255.255.255) | hsl(0,0%,100%) | Wit | |
| zilver | #c0c0c0 | rgb(192.192.192) | hsl(0,0%,75%) | Grijs | |
| grijs | #808080 | rgb(128.128.128) | hsl(0,0%,50%) | Donkergrijs | |
| zwart | #000000 of #000 | rgb(0,0,0) | hsl(0,0%,0%) | Zwart | |
| kastanjebruin | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Donkerrood | |
| rood | #ff0000 of #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Rood | |
| oranje | #ffa500 | rgb(255.165,0) | hsl(38,8,100%,50%) | Oranje | |
| geel | #ffff00 of #ff0 | rgb(255.255,0) | hsl(60,100%,50%) | Geel | |
| olijf | #808000 | rgb(128.128,0) | hsl(60,100%,25%) | Olijf | |
| limoen | #00ff00 of #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Lichtgroen | |
| groente | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Groente | |
| aquatisch | #00ffff of #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blauw | |
| blauw | #0000ff of #00f | rgb(0,0,255) | hsl(240,100%,50%) | Blauw | |
| marine | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Donkerblauw | |
| wintertaling | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blauwgroen | |
| fuchsia | #ff00ff of #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Roze | |
| paars | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
RGB gebruiken
| Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
U kunt een kleur definiëren met behulp van de rode, groene en blauwe waarden in decimale termen. Elk van de drie kleurcomponenten heeft een waarde van 0 tot 255. Het is ook toegestaan om de kleur als een percentage op te geven, waarbij 100% overeenkomt met het getal 255. Geef eerst het rgb-trefwoord op en specificeer vervolgens de kleurcomponenten tussen haakjes. , gescheiden door komma's, bijvoorbeeld rgb(255, 128, 128) of rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Het RGBA-formaat is qua syntaxis vergelijkbaar met RGB, maar bevat een alfakanaal dat de transparantie van het element specificeert. Een waarde van 0 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is semi-transparant.
RGBA is toegevoegd aan CSS3, dus CSS-code moet worden gevalideerd tegen deze versie. Opgemerkt moet worden dat de CSS3-standaard nog in ontwikkeling is en dat sommige functies kunnen veranderen. Een kleur in RGB-indeling die aan de eigenschap background-color is toegevoegd, wordt bijvoorbeeld gevalideerd, maar een kleur die aan de eigenschap background-color wordt toegevoegd, is niet langer geldig. Tegelijkertijd begrijpen browsers de kleur voor beide eigenschappen volkomen correct.
HSL
| Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
De naam van het HSL-formaat is afgeleid van de combinatie van de eerste letters Hue (tint), Saturate (verzadiging) en Lightness (lichtheid). Tint is de kleurwaarde op het kleurenwiel (Fig. 1) en wordt weergegeven in graden. 0° komt overeen met rood, 120° met groen en 240° met blauw. De tintwaarde kan variëren van 0 tot 359.
Rijst. 1. Kleurenwiel
Verzadiging is de intensiteit van een kleur en wordt gemeten als een percentage van 0% tot 100%. Een waarde van 0% duidt op geen kleur en een grijstint, 100% is de maximale waarde voor verzadiging.
Lichtheid geeft aan hoe helder de kleur is en wordt gespecificeerd als een percentage van 0% tot 100%. Lage waarden maken de kleur donkerder, en hoge waarden maken deze lichter; extreme waarden van 0% en 100% komen overeen met zwart en wit.
HSLA
| Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Het HSLA-formaat is qua syntaxis vergelijkbaar met HSL, maar bevat een alfakanaal om de transparantie van het element te specificeren. Een waarde van 0 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is semi-transparant.
RGBA-, HSL- en HSLA-kleurwaarden zijn toegevoegd aan CSS3, dus controleer uw code op versiegeldigheid wanneer u deze formaten gebruikt.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Waarschuwing
Alle leeuwenvangmethoden die op de site worden vermeld, zijn theoretisch en gebaseerd op computationele methoden. De auteurs garanderen uw veiligheid bij het gebruik ervan niet en wijzen elke verantwoordelijkheid voor de resultaten af. Vergeet niet dat een leeuw een roofdier en een gevaarlijk dier is!
Het resultaat van dit voorbeeld wordt getoond in Fig. 2.
Rijst. 2. Kleuren op de webpagina
In HTML kan kleur op drie manieren worden opgegeven:
Een kleur in HTML instellen op basis van de naam
Sommige kleuren kunnen worden gespecificeerd met hun naam, waarbij de kleurnaam in het Engels als waarde wordt gebruikt. De meest voorkomende trefwoorden: zwart, wit, rood, groen, blauw, etc.:
Tekstkleur – rood
De meest populaire kleuren van de World Wide Web Consortium (W3C) standaard:
| Kleur | Naam | Kleur | Naam | Kleur | Naam | Kleur | Naam |
|---|---|---|---|---|---|---|---|
| Zwart | Grijs | Zilver | Wit | ||||
| Geel | Limoen | Aqua | Fuchsia | ||||
| Rood | Groente | Blauw | Paars | ||||
| Kastanjebruin | Olijf | Marine | Wintertaling |
Voorbeeld van het gebruik van verschillende kleurnamen:
Voorbeeld: een kleur opgeven op basis van de naam
- Probeer het zelf »
Koptekst op rode achtergrond
Koptekst op oranje achtergrond
Rubriek op kalkachtergrond
Witte tekst op blauwe achtergrond
Koptekst op rode achtergrond
Koptekst op oranje achtergrond
Rubriek op kalkachtergrond
Witte tekst op blauwe achtergrond
Kleur opgeven met RGB
Bij de weergave van verschillende kleuren op een monitor wordt het RGB-palet als basis gebruikt. Elke kleur wordt verkregen door drie basiskleuren te mengen: R-rood, G-groen, B-blauw. De helderheid van elke kleur wordt gegeven door één byte en kan daarom waarden aannemen van 0 tot 255. RGB(255,0,0) wordt bijvoorbeeld weergegeven als rood omdat rood is ingesteld op de hoogste waarde (255) en de rest staan op 0. Je kunt de kleur ook als percentage instellen. Elke parameter geeft het helderheidsniveau van de overeenkomstige kleur aan. Bijvoorbeeld: de waarden rgb(127, 255, 127) en rgb(50%, 100%, 50%) zullen dezelfde middengroene kleur instellen:
Voorbeeld: kleur opgeven met RGB
- Probeer het zelf »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Kleur instellen op hexadecimale waarde
Waarden R G B kan ook worden opgegeven met behulp van hexadecimale (HEX) kleurwaarden in de vorm: #RRGGBB waarbij RR (rood), GG (groen) en BB (blauw) hexadecimale waarden zijn van 00 tot FF (hetzelfde als decimaal 0-255 ). Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam al doet vermoeden, op het getal 16. Het hexadecimale systeem gebruikt de volgende tekens: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Hier worden de cijfers van 10 tot 15 vervangen door Latijnse letters. Getallen groter dan 15 in het hexadecimale systeem worden weergegeven door twee tekens te combineren tot één waarde. Het hoogste getal 255 in decimalen komt bijvoorbeeld overeen met de hoogste FF-waarde in hexadecimaal. In tegenstelling tot het decimale systeem wordt een hexadecimaal getal voorafgegaan door een hash-symbool. # #FF0000 wordt bijvoorbeeld weergegeven als rood omdat rood is ingesteld op de hoogste waarde (FF) en de rest van de kleuren is ingesteld op de minimumwaarde (00). Borden na het hekje-symbool # U kunt zowel hoofdletters als kleine letters typen. Met het hexadecimale systeem kunt u de afgekorte vorm #rgb gebruiken, waarbij elk teken gelijk staat aan dubbel. De invoer #f7O moet dus worden beschouwd als #ff7700.
Voorbeeld: HEX-kleur
- Probeer het zelf »
rood: #FF0000
groen: #00FF00
blauw: #0000FF
rood: #FF0000
groen: #00FF00
blauw: #0000FF
rood+groen=geel: #FFFF00
rood+blauw=paars: #FF00FF
groen+blauw=cyaan: #00FFFF
Lijst met veel voorkomende kleuren (naam, HEX en RGB):
| Engelse naam | Russische naam | Steekproef | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarant | Amarant | #E52B50 | 229 | 43 | 80 | |
| Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Blauwgroen | #00FFFF | 0 | 255 | 255 | |
| Azuur | Azuur | #007FFF | 0 | 127 | 255 | |
| Zwart | Zwart | #000000 | 0 | 0 | 0 | |
| Blauw | Blauw | #0000FF | 0 | 0 | 255 | |
| Bondi Blauw | Bondi-strandwater | #0095B6 | 0 | 149 | 182 | |
| Messing | Messing | #B5A642 | 181 | 166 | 66 | |
| Bruin | Bruin | #964B00 | 150 | 75 | 0 | |
| Ceruleaans | Azuur | #007BA7 | 0 | 123 | 167 | |
| Donker lentegroen | Donker lentegroen | #177245 | 23 | 114 | 69 | |
| Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
| Aubergine | Aubergine | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
| Goud | Goud | #FFD700 | 250 | 215 | 0 | |
| Grijs | Grijs | #808080 | 128 | 128 | 128 | |
| Groente | Groente | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| Limoen | Limoen | #CCFF00 | 204 | 255 | 0 | |
| Malachiet | Malachiet | #0BDA51 | 11 | 218 | 81 | |
| Marine | Donkerblauw | #000080 | 0 | 0 | 128 | |
| Oker | Oker | #CC7722 | 204 | 119 | 34 | |
| Olijf | Olijf | #808000 | 128 | 128 | 0 | |
| Oranje | Oranje | #FFA500 | 255 | 165 | 0 | |
| Perzik | Perzik | #FFE5B4 | 255 | 229 | 180 | |
| Pompoen | Pompoen | #FF7518 | 255 | 117 | 24 | |
| Paars | Violet | #800080 | 128 | 0 | 128 | |
| Rood | Rood | #FF0000 | 255 | 0 | 0 | |
| Saffraan | Saffraan | #F4C430 | 244 | 196 | 48 | |
| Zeegroen | Groene zee | #2E8B57 | 46 | 139 | 87 | |
| Moeras groen | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Wintertaling | Blauwgroen | #008080 | 0 | 128 | 128 | |
| Ultramarijn | Ultramarijn | #120A8F | 18 | 10 | 143 | |
| Violet | Violet | #8B00FF | 139 | 0 | 255 | |
| Geel | Geel | #FFFF00 | 255 | 255 | 0 | |
Kleurcodes (achtergrond) op basis van verzadiging en tint.
Zoals u weet, kan kleur de toestand van een persoon beïnvloeden: zowel mentaal als fysiek. Elke dag evalueren de ogen tijdens het surfen op websites op internet miljoenen kleuren en tinten. Een webdesigner die bekend is met de psychologie van kleur kan de stemming van de bezoeker manipuleren om bepaalde doelen te bereiken.
Dit komt door het feit dat sommige tinten kalmeren, en andere juist opwinden. Vervolgens zullen we praten over hoe kleur wordt gesynthetiseerd en weergegeven met behulp van computertechnologie.
RGB is een kleurenmodel dat een methode vertegenwoordigt om alle kleuren en hun schakeringen te verkrijgen door drie hoofdcomponenten in verschillende verhoudingen te mengen, namelijk:
- rood ( Rood);
- groene kleur ( Groente);
- blauwe kleur ( Blauw).
Hier komt de afgekorte naam RGB vandaan. Deze kleuren zijn niet voor niets als de belangrijkste gekozen: de reden is de fysiologie van het netvlies van het menselijk oog, en hoe het deze waarneemt:
Het RGB-model is nog steeds het populairst en wordt gebruikt om kleuren op tv-schermen en computermonitors weer te geven. Omdat fabrikanten hun producten verschillende kenmerken geven, werd in 1996 een uniform RGB-gebaseerd kleursynthesesysteem gecreëerd, genaamd sRGB, waaraan Microsoft en HP samenwerkten.
Numerieke weergave van kleur
Zoals eerder vermeld, worden RGB-kleuren gevormd door primaire kleuren te mengen. Om de intensiteit van elk van hen te beschrijven, werd een schema aangenomen waarin kleur wordt weergegeven door het bereik 0-255 (8 bits), wat in hexadecimale notatie overeenkomt met 00-FF.
Dat wil zeggen, de primaire kleuren zien er als volgt uit:
- Rood – RGB (255,0,0);
- Groen – RGB (0,255,0);
- Blauw – RGB (0,0,255);
Als de kleurintensiteit waarden kleiner dan 255 aanneemt, worden verschillende tinten rood, groen en blauw verkregen. Het volgende is een tabel met hun gradaties, evenals de hexadecimale waarden van elk van de tinten:
RGB-kleurentabellen
Uiteraard zijn er naast de gradaties van primaire kleuren gemengde kleuren, en hun aantal is vrij groot. Daarom is er een tabel met RGB-kleuren gemaakt, waarin alle bestaande tinten worden weergegeven, evenals hun namen en numerieke weergaven ( in decimale en hexadecimale vorm).
Je kunt het hier bekijken. Deze tabel maakt het leven voor webontwerpers veel gemakkelijker, omdat u binnen een paar seconden de gewenste tint kunt vinden en de numerieke weergave ervan kunt achterhalen.
Veilig RGB-kleurenpalet
Op een gegeven moment was er echter een probleem met het weergeven van kleuren in verschillende browsers, en om dit op te lossen werd het zogenaamde "veilige" palet van RGB-kleuren samengesteld, dat werd afgeleid door wiskundige berekeningen.
Wanneer de browser een kleur niet correct kan weergeven, zal hij proberen iets te krijgen dat dicht in de buurt komt van wat hij nodig heeft door aangrenzende kleuren te mengen, en hoogstwaarschijnlijk zal het resultaat volkomen onaanvaardbaar zijn:
Door RGB-kleurcodes uit dit palet te gebruiken, kan een webontwikkelaar gemoedsrust hebben over de weergave van kleuren op de pagina's van zijn website wanneer deze worden bekeken met verschillende browsers, platforms en monitoren. Hoewel op dit moment de tabel met veilige kleuren zijn relevantie verliest ( De technologische vooruitgang staat nog steeds niet stil), als je het gebruikt, kun je, zoals ze zeggen, rustig slapen.
Goudkleur in RGB-model
Het woord “goud” werd voor het eerst gebruikt aan het begin van de 14e eeuw om de kleur te beschrijven van een chemisch element genaamd Aurum – goud. In het RGB-model wordt de kleur goud weergegeven door de volgende numerieke waarden:
- RGB (255, 215, 0) – decimaal systeem;
- HEX #FFD700 – hexadecimaal systeem.
Beige kleur in RGB-model
Beige kleur neemt een vrij belangrijke plaats in de geschiedenis in, ook al is deze niet de meest expressieve. Veel cultuurmonumenten, vooral oude sculpturen, zijn gemaakt van speksteen en speksteen, die een beige tint hebben. In het RGB-model heeft beige de volgende numerieke weergaven:
- RGB (245, 245, 220) – decimaal systeem;
- HEX #F5F5DC – hexadecimaal systeem.
Tegenwoordig is het, vooral op het World Wide Web, zeldzaam om zo'n ‘saaie’ kleur te zien. Ontwikkelaars geven de voorkeur aan pakkend ontwerp met felle kleuren. De technologische vooruitgang maakt het mogelijk om een enorm aantal kleuren op monitoren weer te geven, waardoor het beeld realistischer wordt.
Goed slecht
Minecraft-codes bloemen of Minecraft codes opmaak, zodat elke speler bloemen kan toevoegen en tekst op elke mogelijke manier rechtstreeks in Minecraft kan opmaken. Kleurcodes van &0-9 - tot &a-f. Voeg ze toe vóór uw tekst. Berichten van spelers kunnen kleurcodes bevatten waarmee je kleur aan je zinnen kunt toevoegen.
Kleuren en opmaakcodes
Het ampersand-teken (&), gevolgd door een hexadecimaal getal in berichten, geeft aan dat de client van kleur moet wisselen bij het weergeven van tekst. Bovendien kan tekst worden opgemaakt met een & gevolgd door een letter. U kunt verschillende kleuren toevoegen aan boeken, opdrachtblokken, servernaam, serverbeschrijving (motd), wereldnamen, tekens en zelfs spelersnamen.
Het is heel eenvoudig om uw tekst in configuraties of in het spel op te maken met behulp van de onderstaande kleurenkaart. &r wordt gebruikt om alle codes te resetten, d.w.z. &mAAA&rBBB wordt weergegeven als AAA BBB.
Voor uw gemak presenteren we een tabel met bestaande kleurcodes in Minecraft:
| Code | Naam | Technische naam | Symbool kleur | Symbool schaduwkleur | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| R | G | B | Hex | R | G | B | Hex | |||
| &0 | Zwart | zwart | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
| &1 | Donkerblauw | donker_blauw | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
| &2 | Donkergroen | donker_groen | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
| &3 | Donker blauwgroen | donker_aqua | 0 | 170 | 170 | 00AAA | 0 | 42 | 42 | 002A2A |
| &4 | Donkerrood | donker_rood | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
| &5 | Donker paars | donker_paars | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
| &6 | Goud | goud | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
| &7 | Grijs | grijs | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
| &8 | Donkergrijs | donker_grijs | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
| &9 | Blauw | blauw | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
| &A | Groente | groente | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
| &B | Blauwgroen | aquatisch | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
| &C | Rood | rood | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
| &D | Licht paars | licht_paars | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
| &e | Geel | geel | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
| &F | Wit | wit | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Soms is het nodig onderstrepen, doorhalen, hoogtepunt welke tekst dan ook. Dit gebeurt met behulp van tekstopmaak. Het wordt op precies dezelfde manier gebruikt als kleuren (we plaatsen het vóór de tekst code, bijvoorbeeld &lMinecraft = Minecraft.
Voor uw gemak vindt u hieronder een tabel met opmaakcodes:
| Code | Naam |
|---|---|
| &k | Magische tekst |
| &l | Vette tekst |
| &M | Doorgestreepte tekst |
| &N | Onderstreepte tekst |
| &O | Cursieve tekst |
| &R | Tekst zonder opmaak |
Vlad Merzjevitsj
In HTML wordt kleur op twee manieren gespecificeerd: met behulp van hexadecimale code en met de naam van bepaalde kleuren. De methode gebaseerd op het hexadecimale getalsysteem wordt voornamelijk gebruikt, omdat deze het meest universeel is.
Hexadecimale kleuren
HTML gebruikt hexadecimale getallen om kleuren op te geven. Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam al doet vermoeden, op het getal 16. De getallen zijn als volgt: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Cijfers van 10 tot 15 worden vervangen door Latijnse letters. In tabel 6.1 toont de overeenkomst tussen decimale en hexadecimale getallen.
Getallen groter dan 15 in het hexadecimale systeem worden gevormd door twee getallen tot één te combineren (Tabel 6.2). Het getal 255 in decimalen komt bijvoorbeeld overeen met het getal FF in hexadecimaal.
Om verwarring bij het definiëren van het getallensysteem te voorkomen, wordt een hexadecimaal getal voorafgegaan door een hash-symbool #, bijvoorbeeld #aa69cc. In dit geval doet de hoofdletter er niet toe, dus het is toegestaan om #F0F0F0 of #f0f0f0 te schrijven.
Een typische kleur die in HTML wordt gebruikt, ziet er als volgt uit.
Hier is de achtergrondkleur van de webpagina ingesteld op #FA8E47. Het hekje # voor een getal betekent dat het hexadecimaal is. De eerste twee cijfers (FA) definiëren de rode component van de kleur, de derde tot en met vierde cijfers (8E) definiëren de groene component en de laatste twee cijfers (47) definiëren de blauwe component. Het eindresultaat zal deze kleur zijn.
| FA. | + | 8E | + | 47 | = | FA8E47 |
Elk van de drie kleuren – rood, groen en blauw – kan waarden aannemen van 00 tot FF, wat resulteert in een totaal van 256 tinten. Het totale aantal kleuren kan dus 256x256x256 = 16.777.216 combinaties zijn. Een kleurmodel gebaseerd op rode, groene en blauwe componenten wordt RGB (rood, groen, blauw) genoemd. Dit model is additief (van optellen - optellen), waarbij de optelling van alle drie de componenten de kleur wit vormt.
Houd rekening met enkele regels om het navigeren door hexadecimale kleuren gemakkelijker te maken.
- Als de waarden van de kleurcomponenten hetzelfde zijn (bijvoorbeeld: #D6D6D6), dan is het resultaat een grijze tint. Hoe hoger het getal, hoe lichter de kleur, met waarden variërend van #000000 (zwart) tot #FFFFFF (wit).
- Er ontstaat een felrode kleur als de rode component maximaal (FF) wordt gemaakt en de overige componenten op nul worden gezet. Een kleur met de waarde #FF0000 is de roodst mogelijke rode tint. Hetzelfde geldt voor groen (#00FF00) en blauw (#0000FF).
- Geel (#FFFF00) wordt gemaakt door rood en groen te mengen. Dit is duidelijk zichtbaar op het kleurenwiel (Fig. 6.1), dat de primaire kleuren (rood, groen, blauw) en complementaire of aanvullende kleuren weergeeft. Deze omvatten geel, cyaan en violet (ook wel magenta genoemd). Over het algemeen kan elke kleur worden verkregen door kleuren die er dichtbij liggen te mengen. Cyaan (#00FFFF) wordt dus verkregen door blauw en groen te combineren.
Rijst. 6.1. Kleurenwiel
Kleuren op basis van hexadecimale waarden hoeven niet empirisch te worden geselecteerd. Voor dit doel is een grafische editor geschikt die met verschillende kleurmodellen kan werken, bijvoorbeeld Adobe Photoshop. In afb. Figuur 6.2 toont het venster voor het selecteren van een kleur in dit programma; de resulterende hexadecimale waarde van de huidige kleur is omlijnd met een lijn. Je kunt het kopiëren en in je code plakken.
Rijst. 6.2. Venster voor het kiezen van kleuren in Photoshop
Webkleuren
Als je de kleurweergavekwaliteit van de monitor instelt op 8 bit (256 kleuren), kan dezelfde kleur in verschillende browsers anders worden weergegeven. Dit komt door de manier waarop afbeeldingen worden weergegeven, waarbij de browser met zijn eigen palet werkt en geen kleur kan weergeven die niet in zijn palet staat. In dit geval wordt de kleur vervangen door een combinatie van pixels van andere, nabijgelegen kleuren die de gegeven kleur imiteren. Om ervoor te zorgen dat de kleur in verschillende browsers hetzelfde blijft, is een palet van zogenaamde webkleuren geïntroduceerd. Webkleuren zijn die kleuren waarvoor elke component - rood, groen en blauw - is ingesteld op een van de zes waarden: 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). De hexadecimale waarde van dit onderdeel wordt tussen haakjes aangegeven. Het totale aantal kleuren uit alle mogelijke combinaties levert 6x6x6 - 216 kleuren op. Een voorbeeld van een webkleur is #33FF66.
Het belangrijkste kenmerk van webkleur is dat het in alle browsers hetzelfde lijkt. Op dit moment is de relevantie van webkleuren erg klein vanwege de verbetering van de kwaliteit van monitoren en de uitbreiding van hun mogelijkheden.
Kleuren op naam
Om te voorkomen dat u een reeks cijfers hoeft te onthouden, kunt u in plaats daarvan de namen van veelgebruikte kleuren gebruiken. In tabel 6.3 toont de namen van populaire kleurnamen.
| Kleur naam | Kleur | Beschrijving | Hexadecimale waarde |
|---|---|---|---|
| zwart | Zwart | #000000 | |
| blauw | Blauw | #0000FF | |
| fuchsia | Licht paars | #FF00FF | |
| grijs | Donkergrijs | #808080 | |
| groente | Groente | #008000 | |
| limoen | Lichtgroen | #00FF00 | |
| kastanjebruin | Donkerrood | #800000 | |
| marine | Donkerblauw | #000080 | |
| olijf | Olijf | #808000 | |
| paars | Donker paars | #800080 | |
| rood | Rood | #FF0000 | |
| zilver | Lichtgrijs | #C0C0C0 | |
| wintertaling | Blauwgroen | #008080 | |
| wit | Wit | #FFFFFF | |
| geel | Geel | #FFFF00 |
Het maakt niet uit of u een kleur opgeeft via de naam of via hexadecimale getallen. Deze methoden zijn gelijk in hun effect. Voorbeeld 6.1 laat zien hoe u de achtergrond- en tekstkleuren van een webpagina instelt.
Voorbeeld 6.1. Achtergrond- en tekstkleur
Voorbeeld tekst
In dit voorbeeld wordt de achtergrondkleur ingesteld met behulp van het bgcolor-attribuut van de tag
en de tekstkleur via het tekstattribuut. Voor de afwisseling is het tekstattribuut ingesteld op een hexadecimaal getal en het bgcolor-attribuut op het gereserveerde trefwoord teal .
