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

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

• rood ( 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 veel gemakkelijker, 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 er dichtbij te krijgen 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.

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 tabel 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.

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 (rood, groen, blauw) genoemd. 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).
• Een helderrode kleur ontstaat 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 roodtint. 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. Kleurenwiel

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

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

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 .

Helaas is het nog niet mogelijk om smaaksensaties op de website weer te geven. Maar dit kan volledig worden gecompenseerd met behulp van kleuren. Met HTML-kleuren kunt u immers miljoenen tinten weergeven. Dus " kleurpotloden Er zijn er veel meer dan zeven in zijn set.

Kleurenschema in html

In html kan kleur in verschillende formaten worden opgegeven:

1. Als hexadecimale waarde wordt de code gebruikt die is opgegeven in het hexadecimale getalsysteem. Dergelijke kleurcodes in HTML bestaan ​​uit drie paar hexadecimale getallen. Elk paar is verantwoordelijk voor de verzadiging van de tint met zijn primaire kleur:

• Het eerste numerieke paar is verantwoordelijk voor de kleur rood;
• Het tweede paar is voor de groene kleurinhoud;
• Dit laatste is vanwege de blauwe inhoud.

Aan het begin van de code (vóór de cijfers) wordt een hekje geplaatst. Dit is de hexadecimale kleurcode. Naast de cijfers van 1 tot en met 9 gebruikt dit cijfersysteem letters van het Latijnse alfabet (A, B, C, D, E, F).

De witte kleurcode in html ziet er bijvoorbeeld uit als #FFFFFF:

De kleur grijs wordt weergegeven door twee trefwoorden: grijs en grijs. Hun hexadecimale code (HEX) wordt gegeven door dezelfde waarde #808080.

Voorbeeld:

#808080

• R – rood (rood);
• G – groen (groen);
• B – blauw (blauw).

Het kleurnummer in RGB-formaat wordt in de volgende vorm geschreven: rgb(0, 210, 100).

achtergrondkleur: RGB(100.186.43)

Gebruiksvoorbeeld:

achtergrondkleur: rgba (100,86,143,0,2)

achtergrondkleur: rgba (100,86,143,0,5)

achtergrondkleur: rgba (100,86,143,0,8)

achtergrondkleur: rgba (100,86,143,1)

HTML-kleurentabellen en kleurgeneratoren

Met zo'n breed scala aan kleurinstellingsformaten kun je gemakkelijk in de war raken. Daarom werd een speciale kleurentabel uitgevonden. Het biedt 147 belangrijke namen van kleurschakeringen met conformiteitscodes in alle belangrijke kleurstandaarden. Bovendien is elk veld uitgerust met een balk voor visuele kleurselectie. Een van deze tabellen wordt gepresenteerd op de website colourscheme.ru:

Om dit obstakel te omzeilen en het kiezen van de juiste tint zo eenvoudig mogelijk te maken, zijn interactieve webservices ontwikkeld. Hun gebruikersinterface kan enigszins van elkaar verschillen.

Op de website html-color-codes.info ziet de kleurengenerator er als volgt uit:

De verzadiging van elke kleur in de generator wordt ingesteld met behulp van speciale schuifregelaars. Visueel wordt de tint weergegeven door de kleur van het frame en de rechthoek aan de linkerkant. Onderaan tonen 3 velden de kleurcode in basisformaten.

Maar de kleurengenerator is niet alleen beschikbaar op gespecialiseerde sites. Bijna alle grafische editors zijn uitgerust met een soortgelijk hulpmiddel. Photoshop bijvoorbeeld:

Veiligheidsmaatregelen bij het werken met kleur

En dit was lang geleden, in het tijdperk van videokaarten die slechts 256 kleuren ondersteunden. In die verre tijden konden besturingssystemen slechts een bepaald aantal acht-bits tinten zonder vervorming weergeven.

Vervolgens werd een geweldige tabel met veilige kleuren ontwikkeld. Het specificeerde 216 tinten die zonder vervorming konden worden weergegeven in een van de browsers van die tijd. En tot op de dag van vandaag dit " geweldig manuscript» is nog steeds beschikbaar op bepaalde bronnen: