Lichtgrijze RGB-kleur. HTML-zelfstudie

HEX/HTML

HEX-kleur is niets anders dan een hexadecimale weergave van RGB.

Kleuren worden weergegeven als drie groepen hexadecimale cijfers, waarbij elke groep verantwoordelijk is voor zijn eigen kleur: #112233, waarbij 11 rood is, 22 groen en 33 blauw. Alle waarden moeten tussen 00 en FF liggen.

Veel toepassingen maken een verkorte vorm van hexadecimale kleurnotatie mogelijk. Als elk van de drie groepen dezelfde tekens bevat, bijvoorbeeld #112233, dan kunnen ze worden geschreven als #123.

  1. h1 ( kleur: #ff0000; ) /* rood */
  2. h2 ( kleur: #00ff00; ) /* groen */
  3. h3 ( kleur: #0000ff; ) /* blauw */
  4. h4 ( kleur: #00f; ) /* hetzelfde blauw, steno */

RGB

De RGB-kleurruimte (Rood, Groen, Blauw) bestaat uit alle mogelijke kleuren die kunnen worden gecreëerd door rood, groen en blauw te mengen. Dit model is populair in fotografie, televisie en computergraphics.

RGB-waarden worden gespecificeerd als een geheel getal van 0 tot 255. RGB(0,0,255) wordt bijvoorbeeld weergegeven als blauw omdat de blauwe parameter is ingesteld op de hoogste waarde (255) en de andere zijn ingesteld op 0.

Sommige applicaties (met name webbrowsers) ondersteunen percentageregistratie van RGB-waarden (van 0% tot 100%).

  1. h1 ( kleur: rgb(255, 0, 0); ) /* rood */
  2. h2 ( kleur: rgb(0, 255, 0); ) /* groen */
  3. h3 ( kleur: rgb(0, 0, 255); ) /* blauw */
  4. h4 ( kleur: rgb(0%, 0%, 100%); ) /* hetzelfde blauw, percentageinvoer */

RGB-kleurwaarden worden in alle grote browsers ondersteund.

RGBA

Onlangs hebben moderne browsers leren werken met het RGBA-kleurmodel - een uitbreiding van RGB met ondersteuning voor een alfakanaal, dat de dekking van een object bepaalt.

De RGBA-kleurwaarde wordt gespecificeerd als: rgba(rood, groen, blauw, alpha). De alpha-parameter is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).

  1. h1 ( kleur: rgb(0, 0, 255); ) /* blauw in gewone RGB */
  2. h2 ( kleur: rgba(0, 0, 255, 1); ) /* hetzelfde blauw in RGBA, omdat dekking: 100% */
  3. h3 ( kleur: rgba(0, 0, 255, 0,5); ) /* dekking: 50% */
  4. h4 ( kleur: rgba(0, 0, 255, .155); ) /* dekking: 15,5% */
  5. h5 ( kleur: rgba(0, 0, 255, 0); ) /* volledig transparant */

RGBA wordt ondersteund in IE9+, Firefox 3+, Chrome, Safari en Opera 10+.

HSL

Het HSL-kleurenmodel is een weergave van het RGB-model in een cilindrisch coördinatensysteem. HSL vertegenwoordigt kleuren op een meer intuïtieve en voor mensen leesbare manier dan typisch RGB. Het model wordt vaak gebruikt in grafische toepassingen, kleurenpaletten en beeldanalyse.

HSL staat voor Hue (kleur/tint), Saturation (verzadiging), Lightness/Luminance (lichtheid/lichtheid/helderheid, niet te verwarren met helderheid).

Tint specificeert de positie van de kleur op het kleurenwiel (van 0 tot 360). Verzadiging is de procentuele waarde van de verzadiging (van 0% tot 100%). Lichtheid is een percentage van de lichtheid (van 0% tot 100%).

  1. h1 ( kleur: hsl(120, 100%, 50%); ) /* groen */
  2. h2 ( kleur: hsl(120, 100%, 75%); ) /* lichtgroen */
  3. h3 ( kleur: hsl(120, 100%, 25%); ) /* donkergroen */
  4. h4 ( kleur: hsl(120, 60%, 70%); ) /* pastelgroen */

HSL wordt ondersteund in IE9+, Firefox, Chrome, Safari en Opera 10+.

HSLA

Net als RGB/RGBA heeft HSL een HSLA-modus die een alfakanaal ondersteunt om de dekking van een object aan te geven.

De HSLA-kleurwaarde wordt gespecificeerd als: hsla(tint, verzadiging, lichtheid, alfa). De alpha-parameter is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).

  1. h1 ( kleur: hsl(120, 100%, 50%); ) /* groen in normale HSL */
  2. h2 ( kleur: hsla(120, 100%, 50%, 1); ) /* hetzelfde groen in HSLA, omdat dekking: 100% */
  3. h3 ( kleur: hsla(120, 100%, 50%, 0,5); ) /* dekking: 50% */
  4. h4 ( kleur: hsla(120, 100%, 50%, .155); ) /* dekking: 15,5% */
  5. h5 ( kleur: hsla(120, 100%, 50%, 0); ) /* volledig transparant */

CMYK

Het CMYK-kleurenmodel wordt vaak geassocieerd met afdrukken en afdrukken in kleur. CMYK is (in tegenstelling tot RGB) een subtractief model, wat betekent dat hogere waarden geassocieerd zijn met donkerdere kleuren.

Kleuren worden bepaald door de verhouding cyaan (cyaan), magenta (magenta), geel (geel), met toevoeging van zwart (key/black).

Elk van de cijfers die een kleur in CMYK definiëren, vertegenwoordigt het percentage inkt van een bepaalde kleur waaruit de kleurencombinatie bestaat, of preciezer gezegd, de grootte van de schermpunt die op de fotozetmachine wordt weergegeven op film van die kleur (of direct op de drukplaat bij CTP).

Om bijvoorbeeld de PANTONE 7526-kleur te verkrijgen, mengt u 9 delen cyaan, 83 delen magenta, 100 delen geel en 46 delen zwart. Dit kan als volgt worden aangegeven: (9,83,100,46). Soms worden de volgende aanduidingen gebruikt: C9M83Y100K46, of (9%, 83%, 100%, 46%), of (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (ook bekend als HSV) is vergelijkbaar met HSL, maar het zijn twee verschillende kleurmodellen. Ze zijn beide gebaseerd op cilindrische geometrie, maar HSB/HSV is gebaseerd op het "hexcone" -model, terwijl HSL is gebaseerd op het "bi-hexcone" -model. Kunstenaars geven er vaak de voorkeur aan om dit model te gebruiken, algemeen wordt aangenomen dat het HSB/HSV-apparaat dichter bij de natuurlijke perceptie van kleuren staat. In Adobe Photoshop wordt met name gebruik gemaakt van het HSB-kleurmodel.

HSB/HSV staat voor Tint (kleur/tint), Verzadiging (verzadiging), Helderheid/Waarde (helderheid/waarde).

Tint specificeert de positie van de kleur op het kleurenwiel (van 0 tot 360). Verzadiging is de procentuele waarde van de verzadiging (van 0% tot 100%). Helderheid is een percentage van de helderheid (van 0% tot 100%).

XYZ

Het XYZ-kleurenmodel (CIE 1931 XYZ) is een puur wiskundige ruimte. In tegenstelling tot RGB, CMYK en andere modellen zijn de belangrijkste componenten in XYZ 'denkbeeldig', wat betekent dat je X, Y en Z niet kunt associëren met welke set kleuren dan ook om te mengen. XYZ is het hoofdmodel voor vrijwel alle andere kleurmodellen die op technisch gebied worden gebruikt.

LABORATORIUM

Het LAB-kleurmodel (CIELAB, “CIE 1976 L*a*b*”) wordt berekend op basis van de CIE XYZ-ruimte. Het ontwerpdoel van Lab was om een ​​kleurruimte te creëren waarin kleurveranderingen lineairer zouden zijn in termen van menselijke perceptie (vergeleken met XYZ), dat wil zeggen, zodat dezelfde verandering in kleurcoördinaatwaarden in verschillende delen van de kleurruimte zou plaatsvinden. hetzelfde gevoel van kleurverandering veroorzaken.

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.

Bij 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 tafel 1 toont de namen, hexadecimale code, RGB, HSL-waarden en beschrijving.

Tafel 1. Namen van kleuren
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%) Donker grijs
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%) Licht groen
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%) Blauw groen
fuchsia #ff00ff of #f0f rgb(255,0,255) hsl(300,100%,50%) Roze
paars #800080 rgb(128,0,128) hsl(300,100%,25%) paars

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 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 de kleur 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

Kleuren

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!

Arrgh!

Het resultaat van dit voorbeeld wordt getoond in Fig. 2.

Rijst. 2. Kleuren op de webpagina

Kleurcodes in CSS worden gebruikt om kleuren te specificeren. Meestal worden kleurcodes of kleurwaarden gebruikt om de kleur in te stellen voor de voorgrondkleur van een element (bijvoorbeeld tekstkleur, linkkleur) of de achtergrondkleur van een element (achtergrondkleur, blokkleur). Ze kunnen ook worden gebruikt om de kleur van een knop, rand, markering, hover en andere decoratieve effecten te wijzigen.

U kunt uw kleurwaarden in verschillende formaten opgeven. In de volgende tabel staan ​​alle mogelijke formaten vermeld:

De vermelde formaten worden hieronder in meer detail beschreven.

CSS-kleuren - Hex-codes

Hexadecimale kleurcode is een zescijferige weergave van kleur. De eerste twee cijfers (RR) vertegenwoordigen de rode waarde, de volgende twee vertegenwoordigen de groene waarde (GG) en de laatste twee vertegenwoordigen de blauwe waarde (BB).

CSS-kleuren - korte hexadecimale codes

Korte hex-kleurcode is een kortere vorm van notatie van zes tekens. In dit formaat wordt elk cijfer herhaald om een ​​equivalente kleurwaarde van zes cijfers te produceren. Bijvoorbeeld: #0F0 wordt #00FF00.

De hexadecimale waarde kan worden overgenomen uit elke grafische software zoals Adobe Photoshop, Core Draw, enz.

Elke hexadecimale kleurcode in CSS wordt voorafgegaan door een hekje "#". Hieronder vindt u voorbeelden van het gebruik van hexadecimale notaties.

CSS-kleuren - RGB-waarden

RGB-waarde is een kleurcode die wordt ingesteld met behulp van de eigenschap rgb(). Deze eigenschap heeft drie waarden: één voor rood, groen en blauw. De waarde kan een geheel getal zijn, van 0 tot 255, of een percentage.

Opmerking: Niet alle browsers ondersteunen de eigenschap rgb() color, dus het wordt niet aanbevolen om deze te gebruiken.

Hieronder ziet u een voorbeeld waarin meerdere kleuren worden weergegeven met behulp van RGB-waarden.

Kleurcodegenerator

Met onze service kunt u miljoenen kleurcodes maken.

Browserveilige kleuren

Hieronder vindt u een tabel met 216 kleuren die het veiligst en computeronafhankelijk zijn. Deze kleuren in CSS variëren van 000000 tot FFFFFF hexadecimale code. Ze zijn veilig in gebruik omdat ze ervoor zorgen dat alle computers kleuren correct weergeven wanneer ze met het 256 kleurenpalet werken.

Tabel met "veilige" kleuren in CSS
#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#FFFFFF

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 tafel 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 genoemd (rood, groen, blauw; rood, groen, blauw). 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. Kleurencirkel

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 bits (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 tafel 6.3 toont de namen van populaire kleurnamen.

Tafel 6.3. Namen van sommige kleuren
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 Donkerblauw #000080
olijf Olijf #808000
paars Donkerpaars #800080
rood Rood #FF0000
zilver Lichtgrijs #C0C0C0
wintertaling Blauw groen #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

Kleuren

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 .

>>Kleurbeheer

Hexadecimale RGB-kleurwaarden

Methoden voor het beschrijven en verwerken van kleur verschillen van elkaar in de uiteindelijke weergave waarvoor ze bedoeld zijn. Laten we bijvoorbeeld de weergave van kleuren voor drukwerk en voor computermonitors vergelijken. In het eerste geval wordt de basis genomen wit de kleur van het papier waarop vervolgens drie primaire kleuren worden aangebracht: blauw, paars En geel. Door zich met elkaar en met de witte kleur van papier in verschillende verhoudingen te vermengen, geven deze drie primaire kleuren verschillende kleurschakeringen, behalve puur zwart, of bij volledige afwezigheid van verf geven ze wit papier. Als we er zwarte kleur aan toevoegen, krijgen we CMYK-een methode om kleur over te brengen wanneer de gewenste kleur wordt verkregen door de ontbrekende kleuren van wit af te trekken.

In het tweede geval wordt de basis genomen zwart de kleur van het beeldscherm, waarvan elke cel oplicht in een van de volgende drie kleuren: rood-rood, groente-groen en blauw-blauw. Vervolgens krijgen we, bij volledige afwezigheid van enige gloed, een puur zwarte schermkleur, en elk van de vereiste kleuren wordt gegeven door de verhouding van elk van de drie kleuren. In dit geval zullen we krijgen RGB-methode van kleuroverdracht. Primaire kleuren kunnen variëren van 0 voor 255 , of van 0% voor 100% , of kan worden weergegeven als een hexadecimale waarde. In de onderstaande figuur zie je de resultaten van het mengen van primaire kleuren.

Het hexadecimale getalsysteem heeft, in tegenstelling tot het decimale getalsysteem, geen tien cijfers, maar zestien - vandaar de naam. Dienovereenkomstig kunnen er alleen niet-herhalende varianten zijn van combinaties van twee cijfers - 256 , om de reeks getallen daarna voort te zetten 9 brieven van A voor F Daarom zal de serie er als volgt uitzien:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Gebruik de onderstaande rekenmachine om getallen van het ene getalsysteem naar het andere te converteren en omgekeerd. De maximale waarde kan hier zijn FF - 255 .

In dit geval wordt de kleur gespecificeerd door drie hexadecimale getallen, die elk uit twee cijfers bestaan. Het eerste getal bepaalt de intensiteit rood kleuren, medium- groente, laatste ding- blauw kleuren. Alle getallen kunnen waarden aannemen in het bereik van 00 voor FF(van 0 tot 255). Bijvoorbeeld: groene kleur wordt gegeven als #00FF00, roodachtig #FF0000, blauwachtig #0000FF, witachtig #FFFFFF, volledige afwezigheid van kleur of zwart wordt gegeven als #000000 .

In het onderstaande formulier kunt u voor elk van de drie kleuren eventuele hexadecimale waarden opgeven en het resultaat van het mengen ervan bekijken door in het uitvoerveld te klikken.

ROODGROENTEBLAUW
0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f
...Klik hier

Voorbeelden van enkele hexadecimale RGB-kleurwaarden: gradaties van rood, blauw en groen.

weergave code weergave code weergave code weergave code weergave code weergave code
#010000 #800000 #000100 #008000 #000001 #000080
#100000 #900000 #001000 #009000 #000010 #000090
#200000 #A00000 #002000 #00A000 #000020 #0000A0
#300000 #B00000 #003000 #00B000 #000030 #0000B0
#400000 #C00000 #004000 #00C000 #000040 #0000C0
#500000 #D00000 #005000 #00D000 #000050 #0000D0
#600000 #E00000 #006000 #00E000 #000060 #0000E0
#700000 #FF0000 #007000 #00FF00 #000070 #0000FF

Kleur opgeven met behulp van letterlijke tekenreeksen

Voor het gebruiksgemak hebben sommige kleuren en hun combinaties namen gekregen die door alle browsers worden herkend, en het werd mogelijk om veel ervan op naam in te stellen. De onderstaande tabel toont enkele kleurnamen:

weergave Naam weergave Naam weergave Naam weergave Naam
Wit Rood Oranje Geel
Groente Blauw Paars Zwart
Aliceblauw Antiek wit Aqua Aquamarijn
Azuur Beige Bisque Geblancheerddalmond
Blauw Violet Bruin Knoestig hout Cadetblauw
Chartreuse Chocolade Koraal Korenblauw
Maïszijde Karmozijnrood Cyaan Donkerblauw
Donkercyaan Donkergouden staaf Donkergrijs Donkergroen
Donkerkaki Donkermagenta Donkerolijfgroen Donker oranje
Donkerorchidee Donkerrood Donkere zalm Donkerzeegroen
Donkerleiblauw Donkerleigrijs Donkerturkoois Donkerviolet
Donker roze Diep hemelsblauw Dimgray Dodgerblauw
Vuursteen Bloemenwit Bos Groen Fuschia
Gainsboro Spookwit Goud Guldenroede
Grijs Groen Geel Honingdauw Felroze
Indischrood Indigo ivoor Khaki
Lavendel Lavendel blos Citroenchiffon Lichtblauw
Lichtkoraal Lichtcyaan Lichtkoudgeel Licht groen
Lichtgrijs Lichtroze Lichtzalm Lichtzeegroen
Lichthemelsblauw Lichtlategrijs Lichtstaalblauw Licht geel
Limoen Limoen groen Linnen Magenta
Kastanjebruin Middelgrote aquamarijn Middelblauw Middelgrote orchidee
Middelpaars Middelzeegroen Mediumleiblauw Midden lentegroen
Middelturkoois Middelviolet Middernacht blauw Muntcrème
Mistyrose Navajowit Marine Oud kant
Olijf Oliverab Oranje rood Orchidee
Bleekgouden staaf Lichtgroen Paleteurquoise Palevioletrood
Papajazweep Perzikbladerdeeg Peru Roze
Pruim Poederblauw Rozebruin Koningsblauw
Zadelbruin Zee groen Zeeschelp Sienna
Zilver Hemelsblauw Leisteenblauw Leigrijs
Sneeuw Lente groen Staal blauw Bruinen
Wintertaling Distel Tomaat Turkoois
paars Tarwe Witte rook Geel groen
De lijst met kleine letters met kleurnamen is behoorlijk uitgebreid en ruim voldoende. Als u een achtergrondkleur wilt instellen die zo ongebruikelijk is dat deze niet eens een naam heeft, kunt u een hexadecimale waarde gebruiken.

Gebruik een veilig kleurenpalet

Helaas is op verschillende platforms, met verschillende systeeminstellingen, een correcte kleurweergave een probleem. Het punt is dat de browser altijd probeert het kleurenpalet van het document aan te passen aan de systeeminstellingen en monitormogelijkheden, door kleuren onafhankelijk te mengen en te vervangen. Hierdoor ziet de gebruiker soms niet precies wat de webmaster hem wilde laten zien. Een uitweg uit deze situatie werd gevonden door het gebruik van een palet, waarvan elke kleur gegarandeerd gelijk wordt weergegeven door alle browsers op verschillende platforms. Dit is de zgn gegarandeerd palet, ook wel genoemd veilig palet. Dit palet bevat kleuren waarvan de kleurcomponenten de volgende waarden aannemen: 00 ,33 ,66 ,99 , CC,FF, op alle mogelijke manieren 216 hun combinaties.

FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33 999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 99FF00 99FF33 99CC66 99CC00 99CC33 669900 CCFF99 99FF99 66CC00 66CC33 669933 336600 66FF00 66FF33 33FF00 33CC00 339900 009900 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300 99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99 00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966 009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99CCCC 66CCCC 339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333 99CCFF 3399FF 0099FF 6699CC 336699 006699 0066FF 3366CC 0066CC 0033FF 003399 003366 6699FF 3366FF 0000FF 0000CC 0033CC 000033 3333FF 3300FF 3300CC 3333CC 000099 000066 9999CC 6666FF 6666CC 666699 333399 333366 CCCCFF 9999FF 6666FF 6600FF 330099 330066 9966CC 9966FF 6600CC 6633CC 663399 330033 CC99FF CC66FF 9933FF 9900FF 660099 663366 CC66FF CC33FF CC00FF 9900CC 996699 660066 CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699 CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033 FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666 CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333 FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000 FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933 CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00
weergave code weergave code weergave code weergave code weergave code weergave code