Er zijn verschillende manieren om kleur in webdesign weer te geven.
HEX is een hexadecimaal kleurweergavesysteem met basis 16. Voor dit systeem worden Arabische decimale cijfers van 0 tot 9 en Latijnse letters van A tot F gebruikt om het digitale getal aan te vullen tot 16. Voor webdesign worden 16 basis (sleutel)kleuren genomen , de zogenaamde hexadecimale kleurcode #RRGGBB, waarbij elk paar verantwoordelijk is voor zijn aandeel in de kleur: RR - rood, GG - groen en BB - blauw. Elke kleurfractie varieert van 00 tot FF.
Twee andere weergaven van kleur in webdesign zijn: in de vorm van RGB (*, *, *), waarbij elke "*" kleurfractie wordt weergegeven door decimale cijfers van 0 tot 255 en door kleurnamen in het Engels.
Bij het maken van een kleurenafbeelding is het grootste probleem de juiste weergave van kleuren op verschillende soorten computers, monitoren en browsers. Als de browser een kleur niet correct kan weergeven, pikt hij een soortgelijke op of mengt hij meerdere kleuren. En soms kan het worden vervangen door een totaal andere kleur.
tafel 16 primaire kleuren die in alle browsers worden gebruikt
| Naam | Kleur | Hex | (RGB) |
| Aqua (zeegolf) | # 00FFFF | (000,255,255) | |
| Zwart zwart) | #000000 | (000,000,000) | |
| Blauw | # 0000FF | (000,000,255) | |
| Fuchsia (fuchsine) | #FF00FF | (255,000,255) | |
| Grijs (grijs) | #808080 | (128,128,128) | |
| Groen groen) | #008000 | (000,128,000) | |
| Limoen (felgroen) | # 00FF00 | (000,255,000) | |
| Kastanjebruin (kastanjebruin) | #800000 | (128,000,000) | |
| Marineblauw (marineblauw) | #000080 | (000,000,128) | |
| Olijf (olijf) | #808000 | (128,128,000) | |
| Purper | #800080 | (128,000,128) | |
| Rood rood) | # FF0000 | (255,000,000) | |
| Zilver (zilver) | # C0C0C0 | (192,192,192) | |
| Wintertaling (grijsgroen) | #008080 | (000,128,128) | |
| Wit wit) | #FFFFFF | (255,255,255) | |
| Geel (geel) | #FFFF00 | (255,255,000) |
tafel Purper kleuren en tinten
| Naam | Kleur | Hex | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | # FF0099 | (255,000,153) | |
| Magenta (magenta) | # F95A61 | (249,090,097) | |
| Fuchsia (fuchsia) | #FF00FF | (255,000,255) | |
| Movein (aniline paars) | # EF0097 | (239,000,151) | |
| Zalmroze (oranje roze) | # FF91A4 | (255,145,164) | |
| Cenise (een tint magenta) | # DE3163 | (153,149,140) | |
| Aubergine Aubergine (aubergine) | #990066 | (153,000,132) | |
| Lavendel blush (roze lavendel) | & nbsp # FFF0F5 | (255,240,245) | |
| Lila (lila) | # C8A2C8 | (200,162,200) | |
| Magenta (magenta) | # FF008F | (255,000,143) | |
| Orchidee (orchidee) | # DA70D6 | (218,112,214) | |
| Rode Violet | # C71585 | (199,021,133) | |
| Sanguinisch (sanguinisch) | # 92000A | (146,000,010) | |
| Distel (schaduw van magenta) | # D8BFD8 | (185,211,238) | |
| Violet-aubergine (tint van paars) | #991199 | (153,017,153) | |
| Rosa vivo (diep roze) | # FF007F | (255,000,127) | |
| Lavendel-roos (tint van paars) | # FBA0E3 | (108,123,139) | |
| Bevestigingslat roze | # 997ABD | (153,122,141) |
tafel grijs kleuren en tinten
| Naam | Kleur | Hex | (RGB) |
| Grijs | #808080 | (128,128,128) | |
| Grijs | #bebebe | (190,190,190) | |
| (Grijstint) | #858585 | (133,133,133) | |
| Grijs33 (Grijs-33) | #545454 | (084,084,084) | |
| (Grijze leisteen) | #708090 | (112,128,144) | |
| (Kwarts) | # 99958 | (153,149,140) | |
| (Lichtgrijs) | #bbbbbb | (187,187,187) | |
| (Zilver) | # c0c0c0 | (192,192,192) | |
| (Grijs-wit) | #f0f0f0 | (240,240,240) | |
| (Baarden van Abdel-Kerim) | # e0e0e0 | (224,224,224) | |
| Lichtgrijs (Lichtgrijs) | # d3d3d3 | (211,211,211) | |
| LightStateGrijs () | #778899 | (119,136,153) | |
| StateGray-1 (bleke korenbloemblauw1) | # c6e2ff | (198,226,255) | |
| StateGray-2 (bleke korenbloemblauw2) | # b9d3ee | (185,211,238) | |
| StaatGrijs3 () | # 9fb6cd | (159,182,205) | |
| StaatGrijs4 () | # 6c7b8b | (108,123,139) |
Zoals u weet, kan kleur de toestand van een persoon beïnvloeden: zowel mentaal als fysiek. Elke dag, kijkend naar sites op internet, evalueren de ogen miljoenen kleuren en tinten. Een webdesigner die bekend is met de psychologie van kleur, kan de stemming van een bezoeker manipuleren om elk doel te bereiken.
Dit komt door het feit dat sommige tinten rustgevend zijn, terwijl andere juist juist opwindend zijn. Vervolgens zullen we praten over hoe kleur wordt gesynthetiseerd en weergegeven met behulp van computertechnologie.
RGB is een kleurmodel dat een methode vertegenwoordigt om alle kleuren en hun schakeringen te verkrijgen door in verschillende verhoudingen drie hoofdcomponenten te mengen, namelijk:
- Rode kleur ( 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 ze waarneemt:
Het RGB-model blijft tegenwoordig het meest populair en wordt gebruikt om kleuren op tv-schermen en computermonitoren weer te geven. Omdat fabrikanten hun producten verschillende kenmerken geven, werd in 1996 een uniform RGB-gebaseerd kleurensynthesesysteem gecreëerd, sRGB genaamd, waaraan Microsoft en HP samenwerkten.
Numerieke kleurweergave
Zoals eerder vermeld, worden RGB-kleuren gevormd door de hoofdkleuren te mengen. Om de intensiteit van elk van hen te beschrijven, werd een schema aangenomen waarin de kleur wordt weergegeven door het bereik 0-255 (8 bits), wat in het hexadecimale systeem 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 aanneemt die lager zijn dan 255, dan worden verschillende tinten rood, groen en blauw verkregen. Hieronder vindt u een tabel met hun gradatie, evenals de hexadecimale waarden van elk van de tinten:
RGB-kleurentabellen
Natuurlijk zijn er, naast de gradaties van de primaire kleuren, gemengde en hun aantal is vrij groot. Daarom is een tabel met RGB-kleuren gemaakt, waarin alle bestaande tinten worden weergegeven, evenals hun namen en numerieke weergaven ( decimaal en hexadecimaal).
U kunt er hier kennis mee maken. Deze tabel maakt het leven van webdesigners veel gemakkelijker, omdat u in 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 een zogenaamd "veilig" palet van RGB-kleuren samengesteld, die werden afgeleid door wiskundige berekeningen.
Wanneer de browser een kleur niet correct kan weergeven, probeert deze dicht bij de gewenste kleur te komen door aangrenzende kleuren te mengen, en hoogstwaarschijnlijk zal het resultaat volledig onaanvaardbaar zijn:
Door RGB-kleurcodes uit dit palet te gebruiken, hoeft een webontwikkelaar niet bang te zijn om kleuren op hun sitepagina's weer te geven wanneer ze worden bekeken met verschillende browsers, platforms en monitoren. Hoewel op dit moment de tabel met veilige kleuren zijn relevantie verliest ( technische vooruitgang staat nog steeds niet stil), als je het gebruikt, kun je, zoals ze zeggen, goed slapen.
Gouden kleur in RGB-model
Voor het eerst werd het woord "goud" aan het begin van de 14e eeuw gebruikt om de kleur te beschrijven van een chemisch element genaamd Aurum - goud. In RGB wordt goud weergegeven door de volgende numerieke waarden:
- RGB (255, 215, 0) - decimaal systeem;
- HEX # FFD700 - hexadecimaal systeem.
Beige kleur in RGB-model
De kleur beige neemt een nogal belangrijke plaats in de geschiedenis in, ook al is het niet de meest expressieve. Veel culturele monumenten, vooral antieke sculpturen, zijn gemaakt van speksteen en speksteen, die een beige tint hebben. In RGB heeft beige de volgende numerieke weergaven.
De html-kleuren worden aangegeven met zes tekens na de schuine streep, bijvoorbeeld # 000000. Deze zes karakters vertegenwoordigen de verhoudingen van verschillende kleuren (Rood, Groen, Blauw) in de uiteindelijke kleur. Op uw computermonitor wordt een afbeelding gevormd uit een groot aantal punten, pixels genaamd. Elke pixel is een kleine lichtbron, laten we het een "zaklamp" noemen, die op zijn beurt uit drie zaklampen bestaat - rood, groen en blauw. Door de intensiteit van de gloed van individuele gekleurde lichten te verminderen of te vergroten, krijgen we de gewenste kleur.
Html-kleurcodes
Kleuren in HTML worden weergegeven door hexadecimaal (HEX) voor een combinatie van rood, blauw en groen (RGB).
De kleinste kleurwaarde is 0 (hex 00). De hoogste kleurwaarde is 255 (hex FF).
De hexadecimale kleurwaarde is drie cijfers beginnend met een #-teken.
Kleurcodes (waarden)
| Kleur | HEX-code: | RGB-code |
|---|---|---|
| #000000 | RGB (0,0,0) | |
| # FF0000 | RGB (255,0,0) | |
| # 00FF00 | RGB (0.255.0) | |
| # 0000FF | RGB (0,0,255) | |
| #FFFF00 | RGB (255,255,0) | |
| # 00FFFF | RGB (0,255,255) | |
| #FF00FF | RGB (255,0,255) | |
| # C0C0C0 | RGB (192.192.192) | |
| #FFFFFF | RGB (255,255,255) |
16 miljoen tinten
Een combinatie van rood, blauw en groen met een fractie van elke kleur van 0 tot 255 komt neer op meer dan 16 miljoen tinten (256 x 256 x 256).
De meeste moderne monitoren kunnen ten minste 16384 verschillende tinten weergeven (LCD-monitoren kunnen over het algemeen 262 duizend 16 miljoen (bijgewerkt oktober 2013) kleuren en CRT-monitoren kunnen een bijna onbeperkt aantal kleuren weergeven).
Onderstaande kleurentabel toont de verandering in het aandeel rood van 0 naar 255 met nulwaarden voor blauw en groen:
| rood | HEX-code: | RGB-code |
|---|---|---|
| #000000 | RGB (0,0,0) | |
| #080000 | RGB (8,0,0) | |
| #100000 | RGB (16,0,0) | |
| #180000 | RGB (24,0,0) | |
| #200000 | RGB (32,0,0) | |
| #280000 | RGB (40,0,0) | |
| #300000 | RGB (48,0,0) | |
| #380000 | RGB (56,0,0) | |
| #400000 | RGB (64,0,0) | |
| #480000 | RGB (72,0,0) | |
| #500000 | RGB (80,0,0) | |
| #580000 | RGB (88,0,0) | |
| #600000 | RGB (96,0,0) | |
| #680000 | RGB (104,0,0) | |
| #700000 | RGB (112,0,0) | |
| #780000 | RGB (120,0,0) | |
| #800000 | RGB (128,0,0) | |
| #880000 | RGB (136,0,0) | |
| #900000 | RGB (144,0,0) | |
| #980000 | RGB (152,0,0) | |
| # A00000 | RGB (160,0,0) | |
| # A80000 | RGB (168,0,0) | |
| # B00000 | RGB (176,0,0) | |
| # B80000 | RGB (184,0,0) | |
| # C00000 | RGB (192,0,0) | |
| # C80000 | RGB (200,0,0) | |
| # D00000 | RGB (208,0,0) | |
| # D80000 | RGB (216,0,0) | |
| # E00000 | RGB (224,0,0) | |
| # E80000 | RGB (232,0,0) | |
| # F00000 | RGB (240,0,0) | |
| # F80000 | RGB (248,0,0) | |
| # FF0000 | RGB (255,0,0) |
Tinten grijs
Om grijstinten te verkrijgen, worden gelijke verhoudingen van alle kleuren gebruikt. Om de selectie van de gewenste kleur te vergemakkelijken, verstrekken wij u de grijswaardencodes.
| Tinten grijs | HEX-code: | RGB-code |
|---|---|---|
| #000000 | RGB (0,0,0) | |
| #080808 | RGB (8,8,8) | |
| #101010 | RGB (16,16,16) | |
| #181818 | RGB (24,24,24) | |
| #202020 | RGB (32,32,32) | |
| #282828 | RGB (40,40,40) | |
| #303030 | RGB (48,48,48) | |
| #383838 | RGB (56,56,56) | |
| #404040 | RGB (64,64,64) | |
| #484848 | RGB (72,72,72) | |
| #505050 | RGB (80,80,80) | |
| #585858 | RGB (88,88,88) | |
| #606060 | RGB (96.96.96) | |
| #686868 | RGB (104.104.104) | |
| #707070 | RGB (112.112.112) | |
| #787878 | RGB (120,120,120) | |
| #808080 | RGB (128,128,128) | |
| #888888 | RGB (136.136.136) | |
| #909090 | RGB (144.144.144) | |
| #989898 | RGB (152.152.152) | |
| # A0A0A0 | RGB (160,160,160) | |
| # A8A8A8 | RGB (168.168.168) | |
| # B0B0B0 | RGB (176.176.176) | |
| # B8B8B8 | RGB (184.184.184) | |
| # C0C0C0 | RGB (192.192.192) | |
| # C8C8C8 | RGB (200.200.200) | |
| # D0D0D0 | RGB (208.208.208) | |
| # D8D8D8 | RGB (216.216.216) | |
| # E0E0E0 | RGB (224.224.224) | |
| # E8E8E8 | RGB (232,232,232) | |
| # F0F0F0 | RGB (240,240,240) | |
| # F8F8F8 | RGB (248.248.248) | |
| #FFFFFF | RGB (255,255,255) |
Cross-browser (voor alle browsers) html-kleurnamen
Een verzameling van 150 html-kleurnamen die in alle browsers worden ondersteund.
Gestandaardiseerde kleurnamen
De W3C somt 16 geldige kleurnamen op voor HTML en CSS: aqua, zwart, blauw, fuchsia, grijs, groen, limoen, kastanjebruin (kastanje), marine (ultramarijn), olijf (olijf), paars (paars), rood (rood) , zilver (zilver), groenblauw (grijs), wit (wit) en geel (geel).
Bij gebruik van kleuren die niet in deze lijst voorkomen, is het juister om hun hexadecimale code (HEX) of RGB-code te gebruiken.
Veilige kleuren
Een paar jaar geleden, toen computers maximaal 256 verschillende kleuren konden ondersteunen, werd een lijst met 216 "Web Safe Colors" voorgesteld met 40 kleuren gereserveerd voor het systeem.
Dit 216-kleurenpalet is gemaakt om kleuren correct weer te geven in de 256-kleurenpaletmodus.
Het maakt nu niet uit, want de meeste computers over de hele wereld ondersteunen miljoenen kleurnuances. Hoe dan ook, hier is een lijst van deze kleuren:
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | Pffff |
Vlad Merzjevitsj
In HTML wordt een kleur op twee manieren gespecificeerd: met een hexadecimale code en door de naam van sommige kleuren. De methode gebaseerd op het hexadecimale getalsysteem wordt voornamelijk gebruikt, als de meest universele.
Hexadecimale kleuren
Hexadecimale getallen worden gebruikt om kleuren in HTML 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 zullen als volgt zijn: 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. Tafel 6.1 toont de overeenkomst tussen decimale en hexadecimale getallen.
Getallen groter dan 15 in het hexadecimale systeem worden gevormd door twee getallen te combineren tot één (tabel 6.2). 255 decimaal is bijvoorbeeld FF hexadecimaal.
Om verwarring bij de definitie van het getallenstelsel te voorkomen, wordt het hekje # voor het hexadecimale getal geplaatst, bijvoorbeeld # aa69cc. In dit geval maakt het register niet uit, 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) zijn groen en de laatste twee cijfers (47) zijn blauw. Als resultaat krijg je deze kleur.
| FA | + | 8E | + | 47 | = | FA8E47 |
Elk van de drie kleuren - rood, groen en blauw - kan waarden aannemen van 00 tot FF, wat resulteert in 256 tinten. Het totale aantal kleuren kan dus 256x256x256 = 16.777.216 combinaties zijn. Het kleurmodel op basis van rode, groene en blauwe componenten heet RGB (rood, groen, blauw; rood, groen, blauw). Dit model is additief (van add - to add), waarbij de toevoeging van alle drie de componenten een witte kleur vormt.
Houd rekening met enkele regels om het navigeren in hexadecimale kleuren te vergemakkelijken.
- Zijn de waarden van de kleurcomponenten hetzelfde (bijvoorbeeld: #D6D6D6), dan krijg je een grijze tint. Hoe hoger het getal, hoe lichter de kleur, de waardes variëren van # 000000 (zwart) tot #FFFFFF (wit).
- Een heldere rode kleur wordt gevormd als de rode component op maximum (FF) is ingesteld en de rest van de componenten op nul. De kleur # FF0000 is de roodst mogelijke rode tint. Hetzelfde is het geval met groen (# 00FF00) en blauw (# 0000FF).
- Geel (#FFFF00) wordt verkregen door rood met groen te mengen. Dit is duidelijk zichtbaar op het kleurenwiel (Fig. 6.1), waar de primaire kleuren (rood, groen, blauw) en complementaire of complementaire kleuren worden weergegeven. Deze omvatten geel, cyaan en paars (ook magenta genoemd). Over het algemeen kan elke kleur worden verkregen door nabijgelegen kleuren te mengen. Dus cyaan (# 00FFFF) wordt verkregen door blauw en groen te combineren.
Rijst. 6.1. Kleurencirkel
Hexadecimale kleuren hoeven niet empirisch te worden gekozen. Hiervoor is een grafische editor geschikt die met verschillende kleurmodellen kan werken, bijvoorbeeld Adobe Photoshop. In afb. 6.2 toont een venster voor het kiezen van een kleur in dit programma, de resulterende hexadecimale waarde van de huidige kleur wordt omlijnd met een lijn. Je kunt het kopiëren en plakken in je code.
Rijst. 6.2. Kleurselectievenster in Photoshop
Webkleuren
Stel je de kleurkwaliteit van de monitor in op 8 bit (256 kleuren), dan 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 het palet staat. In dit geval wordt de kleur vervangen door een combinatie van pixels van andere, dichtbij, kleuren die de gespecificeerde imiteren. Om de kleur in verschillende browsers ongewijzigd te houden, hebben we een palet van zogenaamde webkleuren geïntroduceerd. Webkleuren zijn die kleuren, voor elk onderdeel waarvan - rood, groen en blauw - een van de zes waarden is ingesteld - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). De haakjes geven de hexadecimale waarde van dit onderdeel aan. Het totaal aantal kleuren uit alle mogelijke combinaties geeft 6x6x6 - 216 kleuren. 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 toename van de kwaliteit van monitoren en de uitbreiding van hun mogelijkheden.
Kleuren op naam
Om een reeks cijfers niet te onthouden, kunt u in plaats daarvan de namen van veelgebruikte kleuren gebruiken. Tafel 6.3 vermeldt de namen van populaire kleurnamen.
| Kleur naam: | Kleur | Beschrijving | Hexadecimale waarde |
|---|---|---|---|
| zwart | zwart | #000000 | |
| blauw | Blauw | # 0000FF | |
| fuchsia | Lichtpaars | #FF00FF | |
| grijs | Donker grijs | #808080 | |
| groente | Groente | #008000 | |
| limoen | Licht groen | # 00FF00 | |
| kastanjebruin | Donkerrood | #800000 | |
| marine | marineblauw | #000080 | |
| olijf- | Olijf | #808000 | |
| Purper | Donker violet | #800080 | |
| rood | rood | # FF0000 | |
| zilver | Lichtgrijs | # C0C0C0 | |
| groenblauw | Blauw groen | #008080 | |
| wit | wit | #FFFFFF | |
| geel | Geel | #FFFF00 |
Het maakt niet uit op welke manier u de kleur opgeeft - door de naam of door hexadecimale getallen te gebruiken. Deze methoden zijn gelijk in hun actie. Voorbeeld 6.1 laat zien hoe u de achtergrond- en tekstkleur van een webpagina instelt.
Voorbeeld 6.1. Achtergrond- en tekstkleur
Voorbeeldtekst
In dit voorbeeld wordt de achtergrondkleur ingesteld met het bgcolor-attribuut van de tag
, en de tekstkleur via het tekstkenmerk. Voor de verandering is het tekstkenmerk ingesteld op een hexadecimaal getal en is bgcolor ingesteld op het sleutelwoord groenblauw gereserveerd.Tabel (palet) html-kleuren geeft je de mogelijkheid om zelfstandig de toon te kiezen die je nodig hebt. De kleurwaarde wordt weergegeven in drie formaten: Hex, RGB en HSV.
- Hex bestaat uit drie waarden van twee tekens in hexadecimale notatie. Bijvoorbeeld: # ff00b3, waarbij het eerste paar cijfers rood is, het tweede groen en het derde paar blauw.
- RGB (RedGreenBlue) heeft de vorm "200,100,255" die de hoeveelheid van de corresponderende toon (rood, groen, blauw) in de resulterende kleur aangeeft.
- HSV (tint, verzadiging, waarde - tint, verzadiging, waarde) - kleurmodel, waarin de coördinaten zijn:
- Tint - tint, kan variëren van 0° tot 360°.
- Verzadiging - verzadiging, varieert van 0-100 of 0-1. Hoe groter deze parameter, hoe "zuiverder" de kleur, daarom wordt deze parameter soms kleurzuiverheid genoemd. En hoe dichter deze parameter bij nul ligt, hoe dichter de kleur bij neutraal grijs ligt.
- Waarde (kleurwaarde) - stelt de helderheid in, de waarde kan ook variëren tussen 0-100 of 0-1.
Vul kleurcode in: Gaan
Lijst met kleuren met namen
De tabel bevat de Engelse kleurnamen (die als waarden kunnen worden gebruikt) die door alle browsers worden ondersteund en hun hexadecimale waarden. Alle vermelde kleuren zijn "veilig", dat wil zeggen dat ze in alle browsers hetzelfde worden weergegeven.
| Kleur naam: | HEX | Kleur |
|---|---|---|
| zwart | #000000 | |
| Marine | #000080 | |
| Donkerblauw | # 00008B | |
| MediumBlauw | # 0000CD | |
| Blauw | # 0000FF | |
| Donkergroen | #006400 | |
| Groente | #008000 | |
| groenblauw | #008080 | |
| DonkerCyaan | # 008B8B | |
| DeepSkyBlue | # 00BFFF | |
| Donkerturkoois | # 00CED1 | |
| MediumLenteGroen | # 00FA9A | |
| Limoen | # 00FF00 | |
| Lente groen | # 00FF7F | |
| Aqua | # 00FFFF | |
| cyaan | # 00FFFF | |
| Middernacht blauw | #191970 | |
| DodgerBlauw | # 1E90FF | |
| LichtZeeGroen | # 20B2AA | |
| Bos Groen | # 228B22 | |
| Zee groen | # 2E8B57 | |
| Donkerleisteengrijs | # 2F4F4F | |
| Limoen groen | # 32CD32 | |
| MediumZeeGroen | # 3CB371 | |
| Turkoois | # 40E0D0 | |
| Koningsblauw | # 4169E1 | |
| Staal blauw | # 4682B4 | |
| DonkerleisteenBlauw | # 483D8B | |
| MediumTurkoois | # 48D1CC | |
| Indigo | # 4B0082 | |
| DonkerOlijfGroen | # 556B2F | |
| CadetBlauw | # 5F9EA0 | |
| Korenblauw | #6495ED | |
| MediumAquaMarine | # 66CDAA | |
| DimGray | #696969 | |
| Leisteenblauw | # 6A5ACD | |
| Olijf olie | # 6B8E23 | |
| Leisteengrijs | #708090 | |
| Lichtleigrijs | #778899 | |
| MediumLeisteenBlauw | # 7B68EE | |
| GazonGroen | # 7CFC00 | |
| Chartreuse | # 7FFF00 | |
| Aquamarijn | # 7FFFD4 | |
| Kastanjebruin | #800000 | |
| Purper | #800080 | |
| Olijf | #808000 | |
| Grijs | #808080 | |
| Hemelsblauw | # 87CEEB | |
| LichtHemelsblauw | # 87CEFA | |
| Blauw Violet | # 8A2BE2 | |
| Donkerrood | # 8B0000 | |
| DonkerMagenta | # 8B008B | |
| Zadelbruin | # 8B4513 | |
| DonkerZeeGroen | # 8FBC8F | |
| Licht groen | # 90EE90 | |
| MediumPaars | # 9370D8 | |
| Donkerviolet | # 9400D3 | |
| Lichtgroen | # 98FB98 | |
| Donkerorchidee | #9932CC | |
| Geel groen | # 9ACD32 | |
| Sienna | # A0522D | |
| bruin | # A52A2A | |
| Donkergrijs | # A9A9A9 | |
| Lichtblauw | # ADD8E6 | |
| Groen Geel | # ADFF2F | |
| Paleturkoois | #AFEEEEE | |
| LichtStaalBlauw | # B0C4DE | |
| PoederBlauw | # B0E0E6 | |
| Vuursteen | # B22222 | |
| DonkerGoudenRod | # B8860B | |
| MediumOrchidee | # BA55D3 | |
| RosyBrown | # BC8F8F | |
| Donkerkaki | # BDB76B | |
| Zilver | # C0C0C0 | |
| MediumVioletRood | # C71585 | |
| IndiaseRood | # CD5C5C | |
| Peru | # CD853F | |
| Chocola | # D2691E | |
| Bruinen | # D2B48C | |
| Lichtgrijs | # D3D3D3 | |
| BleekVioletRood | # D87093 | |
| Distel | # D8BFD8 | |
| Orchidee | # DA70D6 | |
| Guldenroede | # DAA520 | |
| karmozijnrood | # DC143C | |
| Gainsboro | #DCDCDC | |
| Pruim | # DDA0DD | |
| Knoestig hout | # DEB887 | |
| Lichtcyaan | # E0FFFF | |
| Lavendel | # E6E6FA | |
| Donkere Zalm | # E9967A | |
| paars | # EE82EE | |
| BlekeGoudenStaaf | # EEE8AA | |
| LightCoral | # F08080 | |
| Khaki | # F0E68C | |
| AliceBlue | # F0F8FF | |
| Honingdauw | # F0FFF0 | |
| azuurblauw | # F0FFFF | |
| Zandbruin | # F4A460 | |
| Tarwe | # F5DEB3 | |
| Beige | # F5F5DC | |
| Witte rook | # F5F5F5 | |
| MuntCrème | # F5FFFA | |
| Spookwit | # F8F8FF | |
| Zalm | # FA8072 | |
| Antiek wit | #FAEBD7 | |
| Linnen | # FAF0E6 | |
| LichtGoudenStaafGeel | #FAFAD2 | |
| Oude Kant | # FDF5E6 | |
| rood | # FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| Donker roze | # FF1493 | |
| Oranje rood | # FF4500 | |
| Tomaat | # FF6347 | |
| Felroze | # FF69B4 | |
| Koraal | # FF7F50 | |
| Donker oranje | # FF8C00 | |
| Licht Zalm | # FFA07A | |
| Oranje | #FFA500 | |
| Lichtroze | #FFB6C1 | |
| Roze | #FFC0CB | |
| Goud | #FFD700 | |
| Perzik Bladerdeeg | #FFDAB9 | |
| NavajoWit | #FFDEAD | |
| Mocassin | # FFE4B5 | |
| Bisque | # FFE4C4 | |
| MistyRose | # FFE4E1 | |
| Geblancheerde Amandel | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavendelBlush | #FFF0F5 | |
| Zeeschelp | #FFF5EE | |
| Cornsilk | # FFF8DC | |
| CitroenChiffon | #FFFACD | |
| BloemenWit | # FFFAF0 | |
| Sneeuw | #FFFAFA | |
| Geel | #FFFF00 | |
| Licht geel | # FFFF0 | |
| ivoor | #FFFF0 | |
| wit | #FFFFFF |
