Muntkleur in Photoshop-nummer. Kleuren in stijlen kunnen op verschillende manieren worden opgegeven: op hexadecimale waarde, op naam, in RGB-, RGBA-, HSL-, HSLA-formaat. RGB gebruiken

De CSS-kleurmodule geeft details over waarden waarmee auteurs de kleuren en dekking van html-elementen kunnen definiëren, evenals de waarden van de kleureigenschap.

kleur eigenschap

1. Prioriteitskleuren: kleureigenschap

De eigenschap specificeert de kleur van het lettertype met behulp van verschillende kleurweergavesystemen. De eigenschap beschrijft de kleur van de tekstinhoud van het element. Bovendien wordt het gebruikt om een ​​potentiële indirecte waarde (currentColor) op te geven voor alle andere eigenschappen die kleurwaarden accepteren.

Het onroerend goed is geërfd.

2. Kleurwaarden

2.1. Belangrijkste trefwoorden

De lijst met belangrijkste trefwoorden bevat de volgende betekenissen:

Kleurnamen zijn niet hoofdlettergevoelig.

Syntaxis

Kleur teal;

2.2. Numerieke kleurwaarden

2.2.1. RGB-modelkleuren

Het hexadecimale formaat van een RGB-waarde is een #-teken, onmiddellijk gevolgd door drie of zes hexadecimale tekens. De driecijferige RGB-notatie #rgb wordt omgezet naar de zescijferige vorm #rrggbb door de cijfers te kopiëren in plaats van nullen toe te voegen. #fb0 wordt bijvoorbeeld uitgebreid naar #ffbb00 . Dit zorgt ervoor dat wit #ffffff kan worden opgegeven in de korte #fff-invoer, en verwijdert alle afhankelijkheden van de kleurdiepte van de weergave.

Het formaat van een RGB-waarde in functionele notatie is rgb(gevolgd door een door komma's gescheiden lijst van drie numerieke waarden (ofwel drie gehele waarden ofwel drie procentuele waarden) gevolgd door een symbool). De gehele waarde 255 komt overeen met 100% en F of FF in hexadecimale notatie:

Rgb(255.255.255) = rgb(100%, 100%, 100%) = #FFF

Rond numerieke waarden zijn spaties toegestaan.

Er zijn verschillende manieren om kleur weer te geven in webdesign.

HEX is een hexadecimaal kleurweergavesysteem gebaseerd op basis 16. Voor dit systeem worden Arabische decimale cijfers van 0 tot 9 en Latijnse letters van A tot F gebruikt om het digitale getal tot 16 aan te vullen. Voor webdesign zijn er 16 primaire (sleutel)kleuren worden gebruikt, de zogenaamde hexadecimale kleurcode #RRGGBB, waarbij elk paar verantwoordelijk is voor zijn aandeel in de kleur: RR – rood, GG – groen en BB – blauw. Elke kleurfractie varieert van 00 tot FF.

Twee andere weergaven van kleur in webdesign zijn: in de vorm van RGB(*,*,*), waarbij elke “*”-fractie van een kleur wordt weergegeven door decimale cijfers van 0 tot 255 en door kleurnamen in het Engels.

Bij het maken van een kleurenafbeelding is het grootste probleem de juiste weergave van kleuren op verschillende soorten computers, monitoren en browsers. Als de browser een kleur niet correct kan weergeven, selecteert hij een soortgelijke kleur of mengt hij verschillende kleuren. En soms kan het worden vervangen door een compleet andere kleur.

Tafel 16 primaire kleuren, die in alle browsers worden gebruikt

Tafel paars kleuren en zijn schakeringen

Tafel grijs kleuren en zijn schakeringen

HTML-kleuren worden aangegeven door zes tekens na de schuine streep, bijvoorbeeld #000000. Deze zes symbolen vertegenwoordigen de verhoudingen van de verschillende kleuren (rood, groen, blauw) in de uiteindelijke kleur. Op uw computermonitor wordt het beeld gevormd uit een groot aantal punten, pixels genoemd. Elke pixel is een kleine lichtbron, laten we het een "zaklamp" noemen, die op zijn beurt uit drie zaklampen bestaat: rood, groen en blauw. Door de intensiteit van de gloed van individueel gekleurde zaklampen te verminderen of te verhogen, verkrijgen we de gewenste kleur.

HTML-kleurcodes

Kleuren in HTML worden weergegeven door een hexadecimale (HEX) notatie van rood, blauw en groen (RGB).

De kleinste kleurwaarde is 0 (hexadecimaal 00). De hoogste kleurwaarde is 255 (hex FF).

De hexadecimale kleurwaarde bestaat uit drie cijfers, beginnend met het #-teken.

Kleurcodes (betekenissen)

16 miljoen tinten

Het combineren van rood, blauw en groen met waarden variërend van 0 tot 255 voor het percentage van elke kleur resulteert in een totaal van ruim 16 miljoen tinten (256 x 256 x 256).

De meeste moderne monitoren kunnen minstens 16.384 verschillende tinten weergeven (LCD-monitoren kunnen doorgaans 262.16 miljoen tinten weergeven). (bijgewerkt oktober 2013) kleuren, en CRT-monitoren kunnen een vrijwel onbeperkt aantal kleuren weergeven).

De onderstaande kleurentabel toont de verandering in het aandeel rood van 0 naar 255 met nulwaarden voor blauw en groen:

Tinten grijs

Om grijstinten te verkrijgen, worden gelijke aandelen van alle kleuren gebruikt. Om het voor u makkelijker te maken om de juiste kleur te kiezen, voorzien wij u van grijstintcodes

Cross-browser (alle browsers) HTML-kleurnamen

Een verzameling van 150 kleurnamen in html, ondersteund in alle browsers.

Gestandaardiseerde kleurnamen

Het W3C somt 16 geldige kleurnamen op voor HTML en CSS: aqua, zwart, blauw, fuchsia, grijs, groen, limoen, kastanjebruin (kastanje), marineblauw (ultramarijn), olijf (olijf), paars (paars), rood (rood) , zilver (zilver), blauwgroen (grijs), wit (wit) en geel (geel).

Wanneer u kleuren gebruikt die niet in deze lijst voorkomen, is het juister om hun hexadecimale (HEX) code of RGB-code te gebruiken.

Veilige kleuren

Enkele jaren geleden, toen computers maximaal 256 verschillende kleuren konden ondersteunen, werd een lijst van 216 "Web Safe Colors" voorgesteld, waarbij 40 kleuren gereserveerd waren voor het systeem.

Dit palet met 216 kleuren is gemaakt om kleuren correct weer te geven in de paletmodus met 256 kleuren.

Dit doet er niet toe, omdat de meeste computers over de hele wereld miljoenen kleurtinten ondersteunen. Hier is in ieder geval een lijst met deze kleuren:

Deze pagina bevat een tabel met trefwoorden die kunnen worden gebruikt om kleuren aan te duiden in webontwikkelaartalen als: HTML, CSS, JavaScript, Flash, enz.

In de oude specificaties voor het WC3-concern waren slechts 16 trefwoorden gespecificeerd, met behulp waarvan kleuren werden ingesteld in HTML en CSS. In verdere, modernere specificaties werden nog eens 130 trefwoorden toegevoegd om kleurnamen aan te duiden. De volgende tabel bevat de kleurnamen en de hexadecimale en RGB-codes waarmee ze corresponderen.

Volgens CSS-regels zijn kleurnamen niet hoofdlettergevoelig. De kleurvermeldingen IndianRed en indianred zijn gelijkwaardig.

Het is ook vermeldenswaard dat van de 146 trefwoorden in de tabel er eigenlijk minder kleuren in voorkomen. Dit komt omdat sommige trefwoorden naar dezelfde kleur verwijzen. De namen Grijs en Grijs vertegenwoordigen dus de 50% grijze kleurcode #808080, en het woord Magenta is een synoniem voor de HTML-kleur Fuchsia, overeenkomend met de hexadecimale code #FF00FF. Ook synoniem zijn de woorden Aqua en Cyan, ze komen overeen met de code #00FFFF.

Hexadecimale getallen worden gebruikt om kleuren te specificeren. Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam al doet vermoeden, op het getal 16. De getallen zijn als volgt: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Cijfers van 10 tot 15 worden vervangen door Latijnse letters. Getallen groter dan 15 in het hexadecimale systeem worden gevormd door twee getallen tot één te combineren. Het getal 255 in decimalen komt bijvoorbeeld overeen met het getal FF in hexadecimaal. Om verwarring bij het bepalen van het getallenstelsel te voorkomen, wordt vóór het hexadecimale getal een hekje # geplaatst, bijvoorbeeld #666999. Elk van de drie kleuren – rood, groen en blauw – kan waarden aannemen van 00 tot FF. Het kleursymbool is dus verdeeld in drie componenten #rrggbb, waarbij de eerste twee symbolen de rode component van de kleur aangeven, de middelste twee - groen en de laatste twee - blauw. Het is toegestaan ​​om de afgekorte vorm #rgb te gebruiken, waarbij elk teken verdubbeld moet worden. De invoer #fe0 moet dus worden beschouwd als #ffee00.

Bij naam

Browsers ondersteunen sommige kleuren op basis van hun naam. In tafel 1 toont de namen, hexadecimale code, RGB, HSL-waarden en beschrijving.

RGB gebruiken

U kunt kleur definiëren met behulp van de rode, groene en blauwe waarden in decimale termen. Elk van de drie kleurcomponenten heeft een waarde van 0 tot 255. Het is ook toegestaan ​​om de kleur als een percentage op te geven, waarbij 100% overeenkomt met het getal 255. Geef eerst het rgb-trefwoord op en specificeer vervolgens de kleurcomponenten tussen haakjes. , gescheiden door komma's, bijvoorbeeld rgb(255, 128, 128) of rgb(100%, 50%, 50%).

RGBA

Het RGBA-formaat is qua syntaxis vergelijkbaar met RGB, maar bevat een alfakanaal dat de transparantie van het element specificeert. Een waarde van 0 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is semi-transparant.

RGBA is toegevoegd aan CSS3, dus CSS-code moet worden gevalideerd tegen deze versie. Opgemerkt moet worden dat de CSS3-standaard nog in ontwikkeling is en dat sommige functies kunnen veranderen. Een kleur in RGB-indeling die aan de eigenschap background-color is toegevoegd, wordt bijvoorbeeld gevalideerd, maar een kleur die aan de eigenschap background-color wordt toegevoegd, is niet langer geldig. Tegelijkertijd begrijpen browsers de kleur voor beide eigenschappen volkomen correct.

HSL

De naam van het HSL-formaat is afgeleid van de combinatie van de eerste letters Hue (tint), Saturate (verzadiging) en Lightness (lichtheid). Tint is de kleurwaarde op het kleurenwiel (Fig. 1) en wordt weergegeven in graden. 0° komt overeen met rood, 120° met groen en 240° met blauw. De tintwaarde kan variëren van 0 tot 359.

Rijst. 1. Kleurenwiel

Verzadiging is de intensiteit van een kleur en wordt gemeten als een percentage van 0% tot 100%. Een waarde van 0% duidt op geen kleur en een grijstint, 100% is de maximale waarde voor verzadiging.

Lichtheid geeft aan hoe helder de kleur is en wordt gespecificeerd als een percentage van 0% tot 100%. Lage waarden maken de kleur donkerder, en hoge waarden maken de kleur lichter; extreme waarden van 0% en 100% komen overeen met zwart en wit.

HSLA

Het HSLA-formaat is qua syntaxis vergelijkbaar met HSL, maar bevat een alfakanaal om de transparantie van het element te specificeren. Een waarde van 0 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is semi-transparant.

RGBA-, HSL- en HSLA-kleurwaarden zijn toegevoegd aan CSS3, dus controleer uw code op versiegeldigheid wanneer u deze formaten gebruikt.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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!

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

Rijst. 2. Kleuren op de webpagina