HEX / HTML
HEX-kleur is niets meer dan RGB hexadecimale weergave.
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.
In veel toepassingen is een verkorte vorm van notatie voor hexadecimale kleuren toegestaan. Als elk van de drie groepen dezelfde tekens bevat, bijvoorbeeld # 112233, dan kunnen ze worden geschreven als # 123.
- h1 (kleur: # ff0000;) / * rood * /
- h2 (kleur: # 00ff00;) / * groen * /
- h3 (kleur: # 0000ff;) / * blauw * /
- h4 (kleur: # 00f;) / * zelfde blauw, steno * /
RGB
De RGB (Rood, Groen, Blauw) kleurruimte bestaat uit alle mogelijke kleuren die verkregen kunnen worden 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 rest is ingesteld op 0.
Sommige applicaties (met name webbrowsers) ondersteunen procentueel schrijven van RGB-waarden (0% tot 100%).
- h1 (kleur: rgb (255, 0, 0);) / * rood * /
- h2 (kleur: rgb (0, 255, 0);) / * groen * /
- h3 (kleur: rgb (0, 0, 255);) / * blauw * /
- h4 (kleur: rgb (0%, 0%, 100%);) / * zelfde blauw, percentage schrijven * /
RGB-kleurwaarden worden ondersteund in alle belangrijke browsers.
RGBA
De laatste tijd hebben moderne browsers leren werken met het RGBA-kleurmodel - een RGB-extensie met ondersteuning voor een alfakanaal dat de dekking van een object bepaalt.
Een RGBA-kleurwaarde wordt gespecificeerd als: rgba (rood, groen, blauw, alfa). Alfa is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).
- h1 (kleur: rgb (0, 0, 255);) / * blauw in normale RGB * /
- h2 (kleur: rgba (0, 0, 255, 1);) / * zelfde blauw in RGBA, omdat dekking: 100% * /
- h3 (kleur: rgba (0, 0, 255, 0,5);) / * dekking: 50% * /
- h4 (kleur: rgba (0, 0, 255, .155);) / * dekking: 15,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-kleurmodel is een cilindrische weergave van het RGB-model. HSL geeft kleuren op een meer intuïtieve en begrijpelijke manier weer dan typisch RGB. Het model wordt vaak gebruikt in grafische toepassingen, in kleurkiezers en voor beeldanalyse.
HSL staat voor Hue, Saturation, Lightness / Luminance, niet te verwarren met helderheid.
Tint stelt de positie van de kleur op het kleurenwiel in (van 0 tot 360). Verzadiging is een percentage van verzadiging (0% tot 100%). Lichtheid is het percentage lichtheid (0% tot 100%).
- h1 (kleur: hsl (120, 100%, 50%);) / * groen * /
- h2 (kleur: hsl (120, 100%, 75%);) / * lichtgroen * /
- h3 (kleur: hsl (120, 100%, 25%);) / * donkergroen * /
- 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 met een alfakanaal om de dekking van een object aan te geven.
De HSLA-kleurwaarde wordt gegeven als: hsla (tint, verzadiging, lichtheid, alfa). Alfa is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).
- h1 (kleur: hsl (120, 100%, 50%);) / * groen in normale HSL * /
- h2 (kleur: hsla (120, 100%, 50%, 1);) / * hetzelfde groen in HSLA, omdat dekking: 100% * /
- h3 (kleur: hsla (120, 100%, 50%, 0,5);) / * dekking: 50% * /
- h4 (kleur: hsla (120, 100%, 50%, .155);) / * dekking: 15,5% * /
- h5 (kleur: hsla (120, 100%, 50%, 0);) / * volledig transparant * /
CMYK
Het CMYK-kleurmodel wordt vaak geassocieerd met printen en printen in kleur. CMYK (in tegenstelling tot RGB) is een subtractief model, wat betekent dat hogere waarden worden geassocieerd met donkere kleuren.
De kleuren worden bepaald door de verhouding Cyaan, Magenta, Geel, met toevoeging van zwart (Key/blacK).
Elk van de getallen die een kleur in CMYK definiëren, vertegenwoordigt het percentage inkt van een bepaalde kleur waaruit een kleurencombinatie bestaat, of liever, de grootte van een rasterpunt weergegeven op een fotobelichter op een film van een bepaalde kleur (of direct op een drukplaat in het geval van CTP).
Om bijvoorbeeld de kleur PANTONE 7526 te verkrijgen, mengt u 9 delen cyaan, 83 magenta, 100 geel en 46 zwart. Dit kan als volgt worden aangegeven: (9,83,100,46). Soms gebruiken ze dergelijke aanduidingen: C9M83Y100K46, of (9%, 83%, 100%, 46%) of (0,09 / 0,83 / 1,0 / 0,46).
HSB / HSV
HSB (ook bekend als HSV) lijkt op HSL, maar het zijn twee verschillende kleurmodellen. Ze zijn beide gebaseerd op cilindrische geometrie, maar de HSB / HSV is gebaseerd op het "hexcone" -model, terwijl de HSL is gebaseerd op het "bi-hexcone" -model. Kunstenaars geven er vaak de voorkeur aan dit model te gebruiken, het is algemeen aanvaard dat het HSB / HSV-apparaat dichter bij de natuurlijke perceptie van kleuren staat. In Adobe Photoshop wordt met name het HSB-kleurmodel gebruikt.
HSB / HSV staat voor Tint, Verzadiging, Helderheid / Waarde.
Tint stelt de positie van de kleur op het kleurenwiel in (van 0 tot 360). Verzadiging is een percentage van verzadiging (0% tot 100%). Helderheid is het percentage helderheid (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 hoofdcomponenten in XYZ "denkbeeldig", dat wil zeggen dat u X, Y en Z niet kunt relateren aan een set kleuren die u wilt mengen. XYZ is het hoofdmodel voor vrijwel alle andere kleurmodellen die in technische velden worden gebruikt.
LABORATORIUM
Het LAB-kleurmodel (CIELAB, "CIE 1976 L * a * b *") wordt berekend op basis van de CIE XYZ-ruimte. Bij het ontwikkelen van Lab was het doel om een kleurruimte te creëren waarin de kleurverandering meer lineair zal zijn vanuit het oogpunt van menselijke waarneming (vergeleken met XYZ), dat wil zeggen, zodat dezelfde verandering in kleurcoördinaatwaarden in verschillende gebieden van de kleurruimte produceren dezelfde sensatie van kleurverandering.
>> Kleurbeheer
Hexadecimale RGB-kleurwaarden
De methoden voor het beschrijven en verwerken van kleur verschillen van elkaar in de uiteindelijke presentatie waarvoor ze bedoeld zijn. Laten we bijvoorbeeld de weergaven van kleuren voor afdrukken en voor computermonitoren 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 met elkaar en met de witte kleur van het papier in verschillende verhoudingen te mengen, geven deze drie primaire kleuren verschillende kleurschakeringen, behalve puur zwart, of, bij volledige afwezigheid van verf, de witte kleur van het papier. Als we er zwart aan toevoegen, krijgen we CMYK- een methode voor kleurweergave, waarbij de vereiste 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 in een van de drie kleuren oplicht: rood-Rood, groente-groen en blauw-blauw. Vervolgens krijgen we, bij volledige afwezigheid van enige gloed, een puur zwarte schermkleur en wordt elk van de vereiste kleuren ingesteld door de verhouding van elk van de drie kleuren. In dit geval krijgen we RGB- een methode van kleuroverdracht. Primaire kleuren kunnen variëren van 0
voordat 255
, of van 0%
voordat 100%
, of kan worden weergegeven als een hexadecimale waarde. In de onderstaande afbeelding ziet u de resultaten van het mengen van de primaire kleuren.
Het hexadecimale getalsysteem heeft, in tegenstelling tot het decimale getal in zijn rij met cijfers, geen tien maar zestien - vandaar de naam. Dienovereenkomstig kunnen niet-herhalende varianten van combinaties van twee cijfers alleen - 256 , om door te gaan met een reeks cijfers na 9 brieven van EEN voordat F vandaar dat de rij er zo uit zal zien -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
In dit geval wordt de kleur gespecificeerd door drie hexadecimale getallen, die elk uit twee cijfers bestaan. Het eerste cijfer bepaalt de intensiteit rood kleuren, gemiddeld groente, laatste ding- blauw kleuren. Alle getallen kunnen waarden aannemen in het bereik van 00 voordat FF(van 0 tot 255). Bijvoorbeeld: groen wordt gegeven als # 00FF00, rood - zoals # FF0000, blauw - zoals # 0000FF, wit - zoals #FFFFFF, volledige afwezigheid van kleur of zwart wordt gegeven als #000000 .
In het onderstaande formulier kunt u voor elk van de drie kleuren hexadecimale waarden instellen en het resultaat van hun vermenging bekijken door in het uitvoerveld te klikken.
Voorbeelden van enkele hexadecimale RGB-kleurwaarden zijn 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 specificeren met 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 van hen op naam te zetten. In de onderstaande tabel staan enkele kleurnamen vermeld:
| weergave | naam | weergave | naam | weergave | naam | weergave | naam |
| wit | rood | Oranje | Geel | ||||
| Groente | Blauw | Paars | zwart | ||||
| Aliceblauw | Antiek wit | Aqua | Aquamarijn | ||||
| azuurblauw | Beige | Bisque | Blanchedalmond | ||||
| Blauw Violet | bruin | Knoestig hout | Cadetblauw | ||||
| Chartreuse | Chocolade | Koraal | Korenblauw | ||||
| Cornsilk | karmozijnrood | cyaan | Donkerblauw | ||||
| Donkercyaan | Donkergoudenroede | Donkergrijs | Donkergroen | ||||
| Donkerkaki | Donkermagenta | Donkerolijfgroen | Donker oranje | ||||
| Donkerorchidee | Donkerrood | Donkere Zalm | Donkerzeegroen | ||||
| Donkerleiblauw | Donkerleigrijs | Donkerturkoois | Donkerviolet | ||||
| Donker roze | Deepskyblauw | Dimray | Dodgerblauw | ||||
| Vuursteen | Bloemenwit | Bos Groen | Fuschia | ||||
| Gainsboro | Spookwit | Goud | guldenroede | ||||
| Grijs | Groen Geel | honingdauw | Felroze | ||||
| Indiaas rood | Indigo | ivoor | Khaki | ||||
| Lavendel | Lavendelblos | Citroenchiffon | Lichtblauw | ||||
| lichtkoraal | Lichtcyaan | Lichtkoudstaafgeel | Licht groen | ||||
| Lichtgrijs | Lichtroze | Lichtzalm | Lichtzeegroen | ||||
| Lichthemelblauw | Lichtlategrey | Lichtstaalblauw | Licht geel | ||||
| Limoen | Limoen groen | Linnen | Magenta | ||||
| Kastanjebruin | Mediumaquamarijn | Middenblauw | Middelorchidee | ||||
| Middenpaars | Middelzeegroen | Mediumleisteenblauw | Mediumspringgroen | ||||
| Middenturkoois | Mediumvioletrood | Middernacht blauw | Muntcrème | ||||
| Mistyrose | Navajowhite | Marine | Oldlace | ||||
| Olijf | Olijf olie | Oranje rood | Orchidee | ||||
| Palegoudenroede | Lichtgroen | Paleturkoois | Palevioletrood | ||||
| Papayawhip | Perzikblad | Peru | Roze | ||||
| Pruim | Poederblauw | Rosybruin | Koningsblauw | ||||
| Zadelbruin | Zee groen | Zeeschelp | Sienna | ||||
| Zilver | Hemelsblauw | Leiblauw | leigrijs | ||||
| Sneeuw | Lente groen | Staal blauw | Bruinen | ||||
| groenblauw | Distel | Tomaat | Turkoois | ||||
| paars | Tarwe | Witte rook | Geel groen |
Een veilige kleurenkiezer gebruiken
Helaas is de juiste kleurweergave op verschillende platforms, met verschillende systeeminstellingen, een probleem. Het punt is dat de browser altijd probeert het kleurenpalet van het document aan te passen aan de systeeminstellingen en monitormogelijkheden, door onafhankelijk kleuren te mengen en te vervangen. Daardoor ziet de gebruiker soms niet precies wat de webmaster hem wilde laten zien. Een uitweg uit deze situatie werd gevonden in het gebruik van een palet, waarvan elke kleur gegarandeerd hetzelfde wordt weergegeven door alle browsers op verschillende platforms. Dit is de zogenaamde gegarandeerd palet, ook wel genoemd veilig palet. Dit palet bevat kleuren waarvan de kleurcomponenten de volgende waarden aannemen: 00 ,33 ,66 ,99 , CC,FF, in alle mogelijke 216 hun combinaties.
| weergave | code | weergave | code | weergave | code | weergave | code | weergave | code | weergave | code |
| Pffff | 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 |
CSS-kleurcodes worden gebruikt om een kleur te specificeren. Meestal worden kleurcodes of kleurwaarden gebruikt om een kleur in te stellen voor ofwel de voorgrond van een element (bijvoorbeeld tekstkleur, linkkleur) of voor de achtergrond van een element (achtergrondkleur, blokkleur). Ze kunnen ook worden gebruikt om de kleur van een knop, rand, markering, muisaanwijzer en andere decoratieve effecten te wijzigen.
Je kunt je eigen kleurwaarden instellen in verschillende formaten. De volgende tabel bevat alle mogelijke formaten:
De vermelde formaten worden hieronder in meer detail beschreven.
CSS-kleuren - hexadecimale codes
Hexadecimale kleurcode is een zescijferige weergave van een 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 hexadecimale kleurcode is de kortere vorm van zescijferige notatie. In dit formaat wordt elk cijfer herhaald om de equivalente zescijferige kleurwaarde te produceren. Bijvoorbeeld: # 0F0 wordt # 00FF00.
De hexadecimale waarde kan worden overgenomen van alle grafische software zoals Adobe Photoshop, Core Draw, enz.
Elke hexadecimale kleurcode in CSS wordt voorafgegaan door een hekje "#". Hieronder volgen voorbeelden van het gebruik van hexadecimale notatie.
CSS-kleuren - RGB-waarden
RGB-waarde is de kleurcode, die wordt ingesteld met 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 van meerdere kleuren met RGB-waarden.
Kleurcodegenerator
Met onze service kunt u miljoenen kleurcodes maken.
Veilige browserkleuren
Hieronder staat een tabel met 216 kleuren die het veiligst en meest computeronafhankelijk zijn. Deze CSS-kleuren variëren van 000000 tot FFFFFF hexadecimaal. Ze zijn veilig in gebruik omdat ze ervoor zorgen dat alle computers de kleuren correct weergeven bij het werken met een 256 kleurenpalet.
| CSS "veilige" kleurentabel | |||||
| #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 |
Kleur in CSS-taal kan op verschillende manieren worden ingesteld:
- bij naam,
- door hexadecimale waarde,
- in RGB- en RGBA-formaten,
- in HSL- en HSLA-formaten.
Kleurtoewijzing op naam
Browsers ondersteunen het specificeren van bepaalde kleuren voor elementen op naam. In deze tabel zijn enkele trefwoorden (Engelse kleurnamen) die worden gebruikt om kleureigenschappen in te stellen RGB-code, hexadecimale code (HEX) en HSL-code.
| Naam | Kleur | RGB | HEX | HSL | Beschrijving |
|---|---|---|---|---|---|
| wit | RGB (255, 255, 255) | #ffffff of #fff | hsl (0, 0%, 100%) | wit | |
| zilver | RGB (192, 192, 192) | # c0c0c0 | hsl (0, 0%, 75%) | Grijs | |
| grijs | RGB (128, 128, 128) | #808080 | hsl (0, 0%, 50%) | Donker grijs | |
| zwart | RGB (0, 0, 0) | # 000000 of # 000 | hsl (0, 0%, 0%) | zwart | |
| kastanjebruin | RGB (128, 0, 0) | #800000 | hsl (0, 100%, 25%) | Donkerrood | |
| rood | RGB (255, 0, 0) | # ff0000 of # f00 | hsl (0, 100%, 50%) | rood | |
| Oranje | RGB (255, 165, 0) | #ffa500 | hsl (38,8, 100%, 50%) | Oranje | |
| geel | RGB (255, 255, 0) | # ffff00 of # ff0 | hsl (60, 100%, 50%) | Geel | |
| olijf- | RGB (128, 128, 0) | #808000 | hsl (60, 100%, 25%) | Olijf | |
| limoen | RGB (0, 255, 0) | # 00ff00 of # 0f0 | hsl (120, 100%, 50%) | Licht groen | |
| groente | RGB (0, 128, 0) | #008000 | hsl (120, 100%, 25%) | Groente | |
| aqua | RGB (0, 255, 255) | # 00ffff of # 0ff | hsl (180, 100%, 50%) | Blauw | |
| blauw | RGB (0, 0, 255) | # 0000ff of # 00f | hsl (240, 100%, 50%) | Blauw | |
| marine | RGB (0,0,128) | #000080 | hsl (240, 100%, 25%) | marineblauw | |
| groenblauw | RGB (0, 128, 128) | #008080 | hsl (180, 100%, 25%) | Blauw groen | |
| fuchsia | RGB (255, 0, 255) | # ff00ff of # f0f | hsl (300, 100%, 50%) | Roze | |
| paars | RGB (128, 0, 128) | #800080 | hsl (300, 100%, 25%) | Paars |
Dit is een voorbeeld van het gebruik van kleurnamen, de kleurbenaming is overgenomen uit de uitgebreide tabel.
Zo werkt deze code:
Kleur instellen met RGB
RGB is een additief kleurmodel. In Engels toevoeging- toevoeging. RGB is een afkorting van Engelse woorden: Rood, Groen, Blauw - rood, groen, blauw). Hieruit blijkt duidelijk dat in het RGB-model kleuren worden gesynthetiseerd door drie kleuren (rood, groen, blauw) in verschillende hoeveelheden toe te voegen.
Door rood, groen en blauw te mengen, kun je miljoenen tinten krijgen. Alle mogelijke combinaties worden opgeslagen in het geheugen van computers.
Kom ter zake.
Om eigenschappen in dit formaat in te stellen, gebruikt u de rgb-notatie (r, g, b), waarbij r, g, b drie kanalen zijn voor elke kleur (rood, groen, blauw). Waarden voor elk kanaal variëren van 0 tot 255.
Voorbeeldcode.
Om alles duidelijk te maken, zal ik een voorbeeldcode geven:
Dit is hoe dit voorbeeld zou moeten werken:
Figuur 1. Kleuren in RGB. Uitleg bijvoorbeeld.
Aan het begin van de pagina maken we een klasse div.rgb, deze is nodig zodat de blokken die door de tag zijn gemaakt
Vervolgens stellen we in de code de achtergrondkleur van het blok in
Probeer dit voorbeeld te bewerken en specificeer uw waarden, bijvoorbeeld rgb (100, 100, 100).
Kleur instellen met RGBA
CSS3 introduceert een nieuwe tool voor het werken met kleur - het RGBA-formaat. Het kan een evolutie van het RGB-model worden genoemd, maar met de toevoeging van één nieuw kanaal - A- of alfakanaal. Dit kanaal stelt de transparantie van de kleur in. De waarden zijn ingesteld in het bereik van 0 tot 1. Een waarde gelijk aan 0 komt overeen met volledige transparantie, 1 - tot volledige dekking (de kleur zal hetzelfde zijn als gespecificeerd in de eerste drie RGB-kanalen), en tussenliggende waarden, zoals 0,4 of 0,6 - tot verschillende mate van doorschijnendheid.
Voorbeeldcode.
Dit is hoe het werkt:
Deze code lijkt visueel op de volgende, waarbij het RGB-model wordt gebruikt om de kleurwaarde in te stellen:
Hier is het resultaat:
Een alfakanaalwaarde gelijk aan nul maakt elke kleur onzichtbaar - absoluut transparant, een waarde gelijk aan één vertaalt de kleur in de RGB-code zonder wijzigingen. De eigenschap rgba (255,0,0,1.0) toont rgb (255, 0, 0) rood.
Hexadecimale waarde (HEX-code)
In het dagelijks leven gebruiken we het decimale stelsel van tellen. De oorsprong is heel eenvoudig - we hebben tien vingers aan onze handen en vroeger was het handig om op vingers te rekenen in het leven. Als er tien cijfers in het decimale systeem zijn: van 0 tot 9, en het getal 10 is al het volgende cijfer, dan zijn er in het hexadecimale systeem 16 cijfers en het volgende cijfer is het getal 16.
Om kleurcodes als hexadecimale cijfers aan te geven, worden gewone decimale cijfers van 0 tot 9 gebruikt en om cijfers van 10 tot 15 aan te geven, worden Latijnse letters van A tot F gebruikt, dat wil zeggen (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Laten we dit voor de duidelijkheid samenvatten in een tabel:
Om hexadecimale getallen groter dan F (15 in het decimale systeem) te schrijven, zoals in het decimale systeem, wordt ook de vereniging van twee cijfers gebruikt, maar al hexadecimaal, wat duidelijk is. Dus om decimaal getal 255 in hexadecimale notatie te schrijven, wordt FF gebruikt.
Het hexadecimale systeem is begrijpelijker voor de computer, het verwerkt de waarden die zijn opgegeven door de hexadecimale waarde sneller.
Als u de kleur in een hexadecimaal systeem wilt specificeren, laat u de numerieke waarde voorafgaan door een "#"-teken, bijvoorbeeld: # FFC0CB. De # FFC0CB-waarde zelf bestaat uit drie hexadecimale cijfers FF, C0 en CB. De betekenis van deze notatie is hetzelfde als het instellen van de RGB-kleur (rgb (r, g, b)) - elk hexadecimaal cijfer in de HEX-code geeft de kleurverzadiging in het RGB-kanaal aan.
Deze code geeft de volgende items weer:
En hier is een foto met het resultaat uit de sectie "Kleurinstelling met RGB" op deze pagina hierboven.
Figuur 1. Kleuren in RGB. We zien dat de kleuren identiek zijn.
Een verkorte notatie van de kleur HEX-code is toegestaan: een 6-cijferig getal kan worden geschreven als een 3-cijferig getal. Dit is alleen geldig wanneer twee cijfers in de kleurwaarde van één kanaal worden herhaald.
Dat wil zeggen, de volgende afkorting van de notatie is acceptabel:
De kleur # ff22aa kan bijvoorbeeld als volgt worden geschreven - # f2a, of de kleur # 44aa22 kan worden gespecificeerd als # 4a2.
Kleur instellen met HSL
CSS3 introduceert een nieuw formaat voor het specificeren van kleuren.
HSL is een afkorting van de Engelse woorden Hue, Saturate en Lightness.
Tint in HSL is een kleurwaarde op een speciaal kleurenwiel (Figuur 2) en wordt gespecificeerd in graden. Analoog aan het RGB-model komt 0 ° overeen met rood, 120 ° met groen en met 240 ° met blauw.
De tintwaarde varieert van 0 tot 359.
Figuur 2. HSL-kleurenwiel. De tweede waarde is verzadiging (Verzadiging) wordt in procenten ingesteld. Bij 100% verzadiging is de kleur maximaal "sappig", naarmate de verzadigingsindicator naar 0% gaat, wordt de kleur steeds doffer en rolt naar grijs.
De derde waarde, Lichtheid, wordt ook ingesteld als een percentage. Hoe hoger het percentage, hoe helderder de kleur zal zijn. Extreme waarden van 0% en 100% betekenen respectievelijk zwarte (geen licht) en witte (uitgeblazen) kleuren, ongeacht welke kleur uit het kleurenwiel in het eerste kanaal is geselecteerd. De optimale kleurhelderheidswaarde kan worden beschouwd als gelijk aan 50%.
Kleurinstelling met HSLA
HSLA is verwant aan HSL, net als RGB aan RGBA. In het HSLA-formaat wordt, net als in RGBA, een alfakanaal toegevoegd dat verantwoordelijk is voor de transparantie van de kleur.
HSL-kleur is beter leesbaar. We kunnen zeggen dat het intuïtief is. Een hsl-code (120,60%, 50%) kan bijvoorbeeld de uiteindelijke kleur vertegenwoordigen als er een HSL-kleurenwielafbeelding in het geheugen is. Hetzelfde kan niet gezegd worden over RGB- en HEX-formaten, de kleurcode die in deze formaten wordt gespecificeerd, wordt pas begrijpelijk nadat deze op de monitor is gevisualiseerd.
Nieuwe formaten in CSS3 (HSL, HSLA en RGBA) werken in browsers vanaf versie: IE 9.0, Opera 10.0 Firefox 3.0. Hoe zorg ik ervoor dat de stijlen werken in oudere browsers?
Somebloсk (achtergrondkleur: rgb (255,50,50); achtergrondkleur: rgba (255,50,50,0.85))
Als deze code in oudere browsers wordt gebruikt, wordt de achtergrondkleur voor de klasse .somebloсk, hoewel het alfakanaal niet gebruikt, weergegeven in RGB-indeling.
Hexadecimale getallen worden gebruikt om kleuren in te stellen. 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. Getallen groter dan 15 in hexadecimaal worden gevormd door twee getallen te combineren tot één. Bijvoorbeeld, 255 decimaal is gelijk aan FF hexadecimaal. Om verwarring bij de definitie van het getallenstelsel te voorkomen, wordt het hekje # voor het hexadecimale getal geplaatst, bijvoorbeeld # 666999. Elk van de drie kleuren - rood, groen en blauw - kan variëren van 00 tot FF. De kleuraanduiding is dus verdeeld in drie componenten #rrggbb, waarbij de eerste twee tekens de rode component van de kleur markeren, de twee middelste - groen en de laatste twee - blauw. Het is toegestaan om een verkorte vorm te gebruiken, zoals #rgb, waarbij elk teken moet worden verdubbeld. Dus de invoer # fe0 moet worden behandeld 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 naam. Tafel 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%) | 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 | |
| aqua | # 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%) | marineblauw | |
| groenblauw | #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 |
Met RGB
| Internet Explorer | chroom | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
U kunt de kleur bepalen met behulp van de decimale waarden van de rode, groene en blauwe componenten. Elk van de drie kleurcomponenten heeft een waarde van 0 tot 255. Het is ook toegestaan om de kleur in te stellen als een percentage, terwijl 100% overeenkomt met het getal 255. Eerst wordt het rgb-trefwoord aangegeven en vervolgens tussen haakjes de kleurcomponenten worden aangegeven, 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 regelt. Een waarde van 0 komt overeen met volledige transparantie, 1 met dekking en een tussenwaarde zoals 0,5 met semi-transparantie.
RGBA is toegevoegd in CSS3, dus CSS-codevalidatie moet met deze versie worden uitgevoerd. Opgemerkt moet worden dat de CSS3-standaard nog in ontwikkeling is en dat sommige functies kunnen veranderen. Een RGB-kleur die aan de eigenschap background-color is toegevoegd, wordt bijvoorbeeld gevalideerd, maar een kleur die niet meer aan de background-eigenschap wordt toegevoegd. Tegelijkertijd begrijpen browsers de kleur voor beide eigenschappen heel goed.
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 gevormd uit een combinatie van de eerste letters Hue (hue), Saturate (saturation) en Lightness (lightness). Tint is de waarde van een kleur op het kleurenwiel (Fig. 1) en wordt gegeven in graden. 0° is rood, 120° is groen en 240° is blauw. De tintwaarde kan variëren van 0 tot 359.
Rijst. 1. Kleurenwiel
Verzadiging is de intensiteit van een kleur, gemeten als een percentage van 0% tot 100%. Een waarde van 0% betekent geen kleur en een grijstint, 100% is de maximale verzadigingswaarde.
Lichtheid stelt in hoe helder de kleur is en wordt aangegeven als een percentage van 0% tot 100%. Lage waarden maken de kleur donkerder en hoge waarden lichter, extreme waarden van 0% en 100% komen overeen met zwart-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 dat de transparantie van het element instelt. Een waarde van 0 komt overeen met volledige transparantie, 1 met dekking en een tussenwaarde zoals 0,5 met semi-transparantie.
Kleurwaarden in RGBA-, HSL- en HSLA-indelingen zijn toegevoegd in CSS3, dus controleer bij gebruik van deze indelingen op versiegeldigheid.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Een waarschuwing
Alle methoden voor het vangen van een leeuw die op de site worden vermeld, zijn theoretisch en gebaseerd op computationele methoden. De auteurs garanderen niet uw veiligheid bij het gebruik ervan en wijzen elke verantwoordelijkheid voor het resultaat af. Denk eraan, de leeuw is een roofdier en een gevaarlijk dier!
Het resultaat van dit voorbeeld wordt getoond in Fig. 2.
Rijst. 2. Kleuren op de webpagina
