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.
- h1 ( kleur: #ff0000; ) /* rood */
- h2 ( kleur: #00ff00; ) /* groen */
- h3 ( kleur: #0000ff; ) /* blauw */
- 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%).
- 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%); ) /* hetzelfde blauw, percentageinvoer */
RGB-kleurwaarden worden in alle grote browsers ondersteund.
RGBA
Onlangs hebben moderne browsers geleerd met kleur te werken RGB-model A is een RGB-extensie 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).
- h1 ( kleur: rgb(0, 0, 255); ) /* blauw in gewone RGB */
- h2 ( kleur: rgba(0, 0, 255, 1); ) /* hetzelfde 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-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, in kleurenpaletten en voor 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%).
- 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 die een alfakanaal ondersteunt om de dekking van een object aan te geven.
Betekenis HSLA-kleuren wordt gegeven in de vorm: hsla(tint, verzadiging, lichtheid, alfa). De alpha-parameter 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
Kleur CMYK-model vaak geassocieerd met kleurenafdrukken en afdrukken. 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 die kleur waaruit de kleur bestaat kleurencombinatie, of beter gezegd, de grootte van de rasterpunt die op een fotozetmachine wordt weergegeven op een film van een bepaalde kleur (of rechtstreeks op een drukformulier in het geval van CTP).
Om bijvoorbeeld 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 het bijzonder, kleur model HSB wordt gebruikt Adobe Photoshop.
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 in XYZ de belangrijkste componenten ‘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. Bij het ontwikkelen van Lab was het doel om te creëren kleur ruimte, waarbij de kleurverandering meer lineair zal zijn vanuit het oogpunt van menselijke perceptie (vergeleken met XYZ), dat wil zeggen, zodat dezelfde verandering in kleurwaarden coördineert in verschillende gebieden de kleurruimte produceerde hetzelfde gevoel van kleurverandering.
Kijk goed naar de tekening. De achtergrond van het vervolgkeuzevenster is doorschijnend gemaakt. Dit is een vrij gebruikelijke ontwerptechniek. Laten we erover nadenken hoe dit kan worden geïmplementeerd.
Taak
Maak de kleur cross-browser doorschijnend.
Oplossing
De eerste gedachte in deze situatie is om een png24-afbeelding te gebruiken met een reeds ingestelde doorschijnendheid voor de achtergrond. Maar deze foto is volkomen onnodig. Je kunt prima zonder (en dus zonder extra verzoek aan de server). Laten we nog steeds proberen de optimale oplossing te vinden.
De tweede gedachte is om te gebruiken. Maar binnen in dit geval het is niet erg handig. Dan worden immers niet alleen de achtergrond, maar ook de inscripties doorschijnend. Ja, eigenlijk het hele raam in één keer.
Natuurlijk kunt u proberen een extra container toe te voegen en er alleen dekking op toe te passen, maar dit HTML-element is alleen bedoeld ter decoratie en is uiteraard overbodig. Is het mogelijk om zonder te doen?
Natuurlijk kan dat! Als u RGBA gebruikt.
RGBA-kleurbeschrijvingsformaat
Met CSS3 kunt u kleur opgeven met behulp van RGB- en RGBA-functies. In dit geval moeten we het aandeel van elke kleurcomponent aangeven waarvoor één byte is toegewezen (van 0 tot 255, voor het geval iemand het niet weet).
De syntaxis voor dit geval is heel eenvoudig:
Achtergrond: rgb(0, 255, 0); /* puur groen */
Voor RGBA wordt een vierde parameter toegevoegd: alfatransparantie (van 0 tot 1).
Achtergrond: rgba(255, 0, 0, 0,5); /* puur rood met 50% transparantie */
Hier is hij dan, de oplossing voor ons probleem. Stel gewoon de achtergrondkleur in met rgba gebruiken en alles zal er uitzien zoals we het nodig hebben. Zonder extra foto's en elementen!
Waar kan ik deze cijfers krijgen?
U kunt de kleurcomponenten bekijken met het pipetgereedschap van Photoshop.
Over compatibiliteit tussen browsers
Omdat de RGB-functie veel ouder is dan RGBA en al sinds de tijd van de CSS2-standaard aanwezig is, kunt u ter bescherming tegen de oudste browsers de volgende dubbele constructie gebruiken:
SomeBlock ( achtergrond: rgb(255, 0, 0); achtergrond: rgba(255, 0, 0, 0.5); )
Met deze aanpak, overgrootvaders moderne browsers er zal geen doorschijnendheid zijn, maar de kleur zelf blijft correct.
Voor IE zul je apart moeten zorgen. Ezels begrijpen RGBA niet tot en met versie 8.
Zoals altijd: land voor de boeren, fabrieken voor de arbeiders en ezels als kruk! In de vorm van .
Uiteraard passen we deze regel toe in gevechtsomstandigheden aparte CSS die wij verbinden.
SomeBlock (achtergrond:transparant; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
De truc is om de begin- en eindkleuren als hetzelfde op te geven (ff0000 - rood) en te profiteren van het feit dat u in dit filter het alfakanaal voor het verloop kunt instellen (in het voorbeeld is de waarde 80).
Ter referentie: het filter gebruikt het hexadecimale systeem en de code voor een volledig ondoorzichtige kleur is FF (decimaal is dit 255). Dienovereenkomstig is hexadecimaal 80 decimaal 128, d.w.z. 50% transparantie.
Getest in:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chroom
Kleur in CSS-taal kan worden ingesteld op verschillende manieren:
- bij naam,
- Door hexadecimale waarde,
- in RGB- en RGBA-formaten,
- in HSL- en HSLA-formaten.
Kleur op naam instellen
Browsers ondersteunen het specificeren van bepaalde kleuren voor elementen op naam. Deze tabel bevat enkele trefwoorden (Engelse kleurnamen) die worden gebruikt om kleureigenschappen, 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%) | Donkergrijs | |
| 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%) | Lichtgroen | |
| groente | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Groente | |
| aquatisch | 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%) | Donkerblauw | |
| wintertaling | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Blauwgroen | |
| fuchsia | rgb(255, 0, 255) | #ff00ff of #f0f | hsl(300, 100%, 50%) | Roze | |
| paars | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Dit is een voorbeeld van het gebruik van kleurnamen, de kleurnamen zijn afkomstig uit de uitgebreide tabel.
Hier ziet u hoe deze code werkt:
Kleur instellen met RGB
RGB is een additief kleurmodel. Op Engels toevoeging- toevoeging. RGB is een afkorting van de Engelse woorden: Rood, Groen, Blauw - rood, groen, blauw). Hieruit blijkt duidelijk dat in het RGB-model kleuren worden gesynthetiseerd door drie toevoegen kleuren (rood, groen, blauw) in verschillende hoeveelheden.
Het mengen van rood, groen en blauwe kleuren je kunt enkele miljoenen tinten krijgen. Alle mogelijke combinaties worden opgeslagen in het computergeheugen.
Kom ter zake.
Om eigenschappen in dit formaat in te stellen, gebruikt u de notatie rgb(r, g, b) , waarbij r, g, b de drie kanalen zijn voor elke kleur (rood, groen, blauw). Waarden voor elk kanaal worden ingesteld in het bereik van 0 tot 255.
Voorbeeldcode.
Om alles duidelijk te maken, is hier een codevoorbeeld:
Dit is hoe dit voorbeeld zou moeten werken:
Afb.1. Kleuren in RGB. Uitleg bijvoorbeeld.
Aan het begin van de pagina maken we de klasse div.rgb, deze is nodig voor blokken die door de tag zijn gemaakt
Vervolgens in de code die we hebben ingesteld achtergrondkleur blok
Probeer dit voorbeeld te bewerken en uw eigen waarden op te geven, bijvoorbeeld rgb(100, 100, 100) .
Kleur instellen met RGBA
Verscheen in CSS3 nieuw hulpmiddel voor het werken met kleur - RGBA-formaat. Het kan een evolutie van het RGB-model worden genoemd, maar met de toevoeging van één nieuw kanaal: het A- of alfakanaal. Dit kanaal stelt de transparantie van de kleur in. De waarden liggen in het bereik van 0 tot 1. Een waarde van 0 komt overeen met volledige transparantie, 1 - volledige dekking (de kleur zal hetzelfde zijn als deze was ingesteld in de eerste drie kanalen RGB) en tussenliggende waarden zoals 0,4 of 0,6 - doorschijnendheid in verschillende mate.
Voorbeeldcode.
Hier ziet u hoe het zal werken:
Deze code op zijn eigen manier visuele representatie is vergelijkbaar met het volgende, waarbij het RGB-model wordt gebruikt om de kleurwaarde in te stellen:
Hier is zijn 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 de kleur rood rgb(255, 0, 0) .
Op hexadecimale waarde (HEX-code)
In het dagelijks leven gebruiken we het decimale telsysteem. De oorsprong ervan is heel eenvoudig: we hebben tien vingers in onze handen, en op onze vingers rekenen is handig in het leven. Als binnen decimaal systeem tien cijfers: van 0 tot 9, en het getal 10 is het volgende cijfer, dan heeft het hexadecimale getalsysteem 16 cijfers en het volgende cijfer is het getal 16.
Gebruik de gebruikelijke methode om kleurcodes als hexadecimale cijfers op te geven decimale cijfers van 0 tot 9 en om cijfers van 10 tot 15 aan te duiden, gebruikt u Latijnse letters van A tot F, dat wil zeggen (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D , E, F). Voor de duidelijkheid, laten we dit in een tabel zetten:
Om hexadecimale getallen groter dan F (15 in het decimale systeem) te schrijven, zoals in het decimale systeem, gebruiken ze ook de combinatie van twee cijfers, maar dan al hexadecimaal, wat voor de hand ligt. Ja, voor de goede orde decimaal getal 255 V hexadecimaal systeem Er wordt gebruik gemaakt van de FF-notatie.
Het hexadecimale systeem is begrijpelijker voor de computer en verwerkt waarden die zijn ingesteld op basis van hexadecimale waarden sneller.
Om een kleur in hexadecimaal op te geven, before numerieke waarde je moet een “#” teken plaatsen, bijvoorbeeld: #FFC0CB. De waarde #FFC0CB zelf bestaat uit drie hexadecimale cijfers FF, C0 en CB. De betekenis van deze invoer is hetzelfde als het instellen van de kleur in het RGB-formaat (rgb(r, g, b)) - elk hexadecimaal cijfer in de HEX-code geeft de kleurverzadiging in zijn kanaal van het RGB-model aan.
Deze code geeft de volgende elementen weer:
En hier is een foto met het resultaat uit de sectie "Kleur instellen met gebruik van RGB" op deze pagina hierboven.
Afb.1. Kleuren in RGB. We zien dat de kleuren identiek zijn.
Een verkorte notatie van de HEX-kleurcode is toegestaan: een getal van 6 cijfers kan als een getal van 3 cijfers worden geschreven. Dit is alleen geldig als twee cijfers in de kleurwaarde van één kanaal worden herhaald.
Dat wil zeggen, de volgende afkorting is acceptabel:
De kleur #ff22aa kan bijvoorbeeld worden geschreven als #f2a, of de kleur #44aa22 kan worden geschreven als #4a2.
Kleur instellen met HSL
Verscheen in CSS3 nieuw formaat kleur aan te geven.
Het HSL-formaat is een afkorting voor de Engelse woorden: Hue (tint), Saturate (verzadiging) en Lightness (lichtheid).
Tint in HSL is de waarde van een kleur op een speciaal kleurenwiel (Figuur 2) en wordt gespecificeerd in graden. Als we analogieën trekken met het RGB-model, komt 0° overeen met rood, 120° komt overeen met groen en 240° komt overeen met blauw.
De tintwaarde verandert van 0 naar 359.
Figuur 2. HSL-kleurenwiel. De tweede waarde - verzadiging (verzadiging) wordt ingesteld als een percentage. Bij 100% verzadiging is de kleur zo “sappig” mogelijk; de verzadigingsindicator beweegt richting 0%, de kleur wordt doffer en vervaagt naar grijs.
De derde waarde, Lichtheid, wordt ook als percentage ingesteld. Hoe hoger het percentage, hoe helderder de kleur zal zijn. De extreme waarden van 0% en 100% geven respectievelijk zwarte (geen licht) en witte (overbelichte) kleuren aan, en het maakt niet uit welke kleur uit het kleurenwiel in het eerste kanaal is geselecteerd. De optimale kleurhelderheidswaarde is 50%.
Kleur instellen met HSLA
Het HSLA-formaat is gerelateerd aan HSL, net zoals RGB aan RGBA. IN HSLA-formaat, net als bij RGBA is er een alfakanaal toegevoegd, dat verantwoordelijk is voor kleurtransparantie.
Kleur gespecificeerd in HSL-formaat is gemakkelijker te lezen. We kunnen zeggen dat het intuïtief is. De code hsl(120,60%,50%) kan bijvoorbeeld de uiteindelijke kleur vertegenwoordigen als er een afbeelding van het HSL-kleurenwiel in het geheugen aanwezig is. Hetzelfde kan niet gezegd worden over de RGB- en HEX-formaten; deze worden pas duidelijk nadat deze op de monitor zijn gevisualiseerd.
Nieuwe formaten in CSS3 (HSL, HSLA en RGBA) werken in browsers vanaf versies: IE 9.0, Opera 10.0 Firefox 3.0. Hoe kan ik ervoor zorgen dat stijlen in oudere browsers werken?
Somebloсk ( achtergrondkleur: rgb(255,50,50); achtergrondkleur: rgba(255,50,50,0.85) )
Wanneer u deze code in oudere browsers gebruikt, wordt de achtergrondkleur voor de klasse .somebloсk, hoewel deze geen alfakanaal gebruikt, weergegeven in RGB-indeling.
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 instellen verschillende formaten. 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 zijn dat groene waarde(GG), en deze laatste zijn 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.
Hexadecimale waarde kan uit elke afbeelding worden gehaald 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 meest 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 |
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. De cijfers van 10 tot en met 15 zijn vervangen in 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 nummersysteem te voorkomen, voorheen hexadecimaal getal plaats het hash-symbool #, 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 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 mogelijk om de kleur in te stellen als een percentage, waarbij 100% overeenkomt met het getal 255. Geef eerst aan trefwoord rgb en vervolgens worden de kleurcomponenten tussen haakjes 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 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. Er kan bijvoorbeeld een RGB-kleur aan worden toegevoegd achtergrond eigendom-kleur is gevalideerd, maar de achtergrond die aan de eigenschap is 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% maximale waarde 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.
Kleurwaarden in RGBA-formaten, HSL en HSLA zijn toegevoegd aan CSS3, dus als u deze formaten gebruikt, controleer dan uw code op versiegeldigheid.
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!
Resultaat dit voorbeeld getoond in afb. 2.
Rijst. 2. Kleuren op de webpagina
