Lichtgroene kleurcode. Kleur in stijlen kan op verschillende manieren worden gespecificeerd: op hexadecimale waarde, op naam, in RGB-, RGBA-, HSL-, HSLA-formaat

>>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:

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.

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

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:

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.

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.

Zoals u weet, kan kleur de toestand van een persoon beïnvloeden: zowel mentaal als fysiek. Elke dag beoordelen de ogen tijdens het surfen op websites op internet miljoenen kleuren en tinten. Een webdesigner die bekend is met de psychologie van kleur kan de stemming van de bezoeker manipuleren om bepaalde doelen te bereiken.

Dit komt door het feit dat sommige tinten kalmeren, en andere juist opwinden. Vervolgens zullen we praten over hoe kleur wordt gesynthetiseerd en weergegeven met behulp van computertechnologie.

RGB is een kleurenmodel dat een methode vertegenwoordigt om alle kleuren en hun schakeringen te verkrijgen door drie hoofdcomponenten in verschillende verhoudingen te mengen, namelijk:

• Rode kleur ( Rood);
• groene kleur ( Groente);
• Blauwe kleur ( Blauw).

Hier komt de afgekorte naam RGB vandaan. Deze kleuren zijn niet voor niets als de belangrijkste gekozen: de reden is de fysiologie van het netvlies van het menselijk oog, en hoe het deze waarneemt:

Numerieke weergave van kleur

Zoals eerder vermeld, worden RGB-kleuren gevormd door primaire kleuren te mengen. Om de intensiteit van elk van hen te beschrijven, werd een schema aangenomen waarin kleur wordt weergegeven door het bereik 0-255 (8 bits), wat in hexadecimale notatie overeenkomt met 00-FF.

Dat wil zeggen, de primaire kleuren zien er als volgt uit:

• Rood – RGB (255,0,0);
• Groen – RGB (0,255,0);
• Blauw – RGB (0,0,255);

Als de kleurintensiteit waarden kleiner dan 255 aanneemt, worden verschillende tinten rood, groen en blauw verkregen. Het volgende is een tabel met hun gradaties, evenals de hexadecimale waarden van elk van de tinten:

RGB-kleurentabellen

Uiteraard zijn er naast de gradaties van primaire kleuren gemengde kleuren, en hun aantal is vrij groot. Daarom is er een tabel met RGB-kleuren gemaakt, waarin alle bestaande tinten worden weergegeven, evenals hun namen en numerieke weergaven ( in decimale en hexadecimale vorm).

Je kunt het hier bekijken. Deze tabel maakt het leven voor webontwerpers een stuk eenvoudiger, omdat u binnen een paar seconden de gewenste tint kunt vinden en de numerieke weergave ervan kunt achterhalen.

Veilig RGB-kleurenpalet

Op een gegeven moment was er echter een probleem met het weergeven van kleuren in verschillende browsers, en om dit op te lossen werd het zogenaamde "veilige" palet van RGB-kleuren samengesteld, dat werd afgeleid door wiskundige berekeningen.

Wanneer de browser een kleur niet correct kan weergeven, zal hij proberen iets te krijgen dat dicht in de buurt komt van wat hij nodig heeft door aangrenzende kleuren te mengen, en hoogstwaarschijnlijk zal het resultaat volkomen onaanvaardbaar zijn:

Door RGB-kleurcodes uit dit palet te gebruiken, kan een webontwikkelaar gemoedsrust hebben over de weergave van kleuren op de pagina's van zijn website wanneer deze worden bekeken met verschillende browsers, platforms en monitoren. Hoewel op dit moment de tabel met veilige kleuren zijn relevantie verliest ( De technologische vooruitgang staat nog steeds niet stil), als je het gebruikt, kun je, zoals ze zeggen, rustig slapen.

Goudkleur in RGB-model

Het woord “goud” werd voor het eerst gebruikt aan het begin van de 14e eeuw om de kleur te beschrijven van een chemisch element genaamd Aurum – goud. In het RGB-model wordt de kleur goud weergegeven door de volgende numerieke waarden:

• RGB (255, 215, 0) – decimaal systeem;
• HEX #FFD700 – hexadecimaal systeem.

Beige kleur in RGB-model

Beige kleur neemt een vrij belangrijke plaats in de geschiedenis in, ook al is deze niet de meest expressieve. Veel cultuurmonumenten, vooral oude sculpturen, zijn gemaakt van speksteen en speksteen, die een beige tint hebben. In het RGB-model heeft de kleur beige de volgende numerieke weergaven.

Kleur in CSS kan op verschillende manieren worden ingesteld:

• bij naam,
• op 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 te specificeren.

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. In 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 kleuren (rood, groen, blauw) in verschillende hoeveelheden toe te voegen.

Door rode, groene en blauwe kleuren te mengen, kun je miljoenen tinten verkrijgen. 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:

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

werden weergegeven in de vereiste grootte: 240px bij 40px. We kennen de eigenschap line-height een waarde van 40px toe, dat wil zeggen gelijk aan de hoogte van het blok. Hierdoor kunt u tekst in het blok weergeven

in het verticale midden. We centreren de tekst horizontaal met behulp van de regel ( tekst uitlijnen: centreren ;).

Vervolgens stellen we in de code de achtergrondkleur van het blok in

het stijlattribuut gebruiken, de achtergrondeigenschap gebruiken en waarden toewijzen aan rgb(255, 0, 0) , rgb(0, 255, 0) en rgb(0, 0, 255) . Dat wil zeggen, we maken afwisselend één kanaal zo verzadigd mogelijk, en de overige kanalen worden niet gebruikt voor synthese, omdat hun waarde nul is.

Probeer dit voorbeeld te bewerken en uw eigen waarden op te geven, bijvoorbeeld rgb(100, 100, 100) .

Kleur instellen met RGBA

CSS3 heeft 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: 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 dezelfde zijn als gespecificeerd in de eerste drie RGB-kanalen) en tussenliggende waarden ​zoals 0,4 of 0,6 - doorschijnendheid in verschillende mate.

Voorbeeldcode.

Hier ziet u hoe het zal werken:

Deze code lijkt visueel op de volgende code, waarbij het RGB-model wordt gebruikt om een ​​kleurwaarde op te geven:

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 het decimale systeem tien cijfers heeft: van 0 tot 9, en het getal 10 het volgende cijfer is, dan heeft het hexadecimale getallenstelsel 16 cijfers en het volgende cijfer is het getal 16.

Om kleurcodes aan te geven, worden gewone decimale cijfers van 0 tot 9 gebruikt als hexadecimale cijfers, en worden Latijnse letters van A tot F gebruikt om getallen van 10 tot 15 aan te geven, 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. Om het decimale getal 255 in hexadecimale notatie te schrijven, gebruikt u dus 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, laat u de numerieke waarde voorafgaan door een “#”-teken, 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.

#FF0000

#00FF00

#0000FF

Deze code geeft de volgende elementen weer:

En hier is een afbeelding met het resultaat uit de sectie "Kleuren instellen met behulp van RGB" op deze pagina hierboven.

Figuur 1. Kleuren in RGB.

We zien dat de kleuren identiek zijn.

Een verkorte notatie van de HEX-kleurcode is toegestaan: een 6-cijferig nummer kan worden geschreven als een 3-cijferig nummer. 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

CSS3 heeft een nieuw formaat voor het opgeven van kleuren.

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 binnen het bereik van 0 tot 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 het HSLA-formaat wordt, net als in RGBA, 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.