Lichtgrijze kleur rgb. HTML-zelfstudie. RGB-kleuren. Veilige paletkleuren

met behulp van het stijlkenmerk met behulp van de background-eigenschap en het toewijzen van waarden 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 om uw eigen waarden op te nemen, zoals rgb(100, 100, 100) .

Kleur instellen met RGBA

CSS3 introduceerde 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 - volledige dekking (de kleur is hetzelfde als die is ingesteld in de eerste drie RGB-kanalen) en tussenliggende waarden , zoals 0,4 of 0,6 - doorschijnendheid in verschillende mate.

Codevoorbeeld.

Hier is hoe het zal werken:

Deze code lijkt visueel op de 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 stelsel van tellen. De oorsprong is heel eenvoudig - we hebben tien vingers aan onze handen en het was 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 het volgende cijfer, dan zijn er 16 cijfers in het hexadecimale getalsysteem 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). Laten we dit voor de duidelijkheid samenvatten in een tabel:

Om hexadecimale getallen groter dan F (15 decimaal) te schrijven, zoals in het decimale systeem, gebruiken ze ook de vereniging van twee cijfers, maar al hexadecimaal, wat duidelijk is. Dus om het decimale getal 255 in hexadecimaal te schrijven, wordt de notatie FF gebruikt.

Het hexadecimale systeem is begrijpelijker voor de computer, het verwerkt de waarden die door de hexadecimale waarde worden gegeven sneller.

Om een ​​kleur in een hexadecimaal systeem op te geven, 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 dit item is hetzelfde als het instellen van de kleur in RGB-formaat (rgb(r, g, b) ) - elk hexadecimaal cijfer in de HEX-code geeft de kleurverzadiging in het RGB-modelkanaal aan.

Deze code geeft de volgende elementen weer:

En hier is een foto met het resultaat uit het gedeelte "Kleur instellen met RGB" op deze pagina hierboven.

Figuur 1. Kleuren in RGB.

We zien dat de kleuren identiek zijn.

Een verkorte notatie voor de HEX-kleurcode is toegestaan: een 6-cijferig getal kan worden geschreven als een 3-cijferig getal. Dit is alleen geldig als twee cijfers in de kleurwaarde van hetzelfde 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 specificeren van kleuren.

Het HSL-formaat is een afkorting van de Engelse woorden: Hue (hue), Saturate (saturation) en Lightness (lightness).

Tint in HSL is een kleurwaarde op een speciaal kleurenwiel (Figuur 2) en wordt gespecificeerd in graden. Als we analogieën trekken met het RGB-model, dan komt 0° overeen met rood, 120° met groen en 240° met blauw.

De tintwaarde verandert van 0 in 359.

Figuur 2. HSL-kleurenwiel.

De tweede waarde - verzadiging (Verzadiging) wordt ingesteld als een percentage. Bij 100% verzadiging is de kleur zo "sappig" mogelijk, aangezien de verzadigingsindicator richting 0% gaat, wordt de kleur steeds doffer en rolt naar grijs.

De derde waarde - lichtheid (Lichtheid) wordt ook ingesteld als een percentage. Hoe hoger het percentage, hoe helderder de kleur zal zijn. De extreme waarden van 0% en 100% geven respectievelijk zwarte (gebrek aan licht) en witte (belichte) kleuren aan, en het maakt niet uit welke kleur uit het kleurenwiel in het eerste kanaal is geselecteerd. De optimale waarde kan worden beschouwd als de waarde van kleurhelderheid gelijk aan 50%.

Kleurinstelling met HSLA

Het HSLA-formaat is gerelateerd aan HSL, evenals RGB aan RGBA. Zowel in het HSLA-formaat als in RGBA wordt een alfakanaal toegevoegd dat verantwoordelijk is voor de kleurtransparantie.

Een kleur gespecificeerd in HSL-formaat is beter leesbaar. 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 is. Dit kan niet gezegd worden van de RGB- en HEX-formaten, de kleurcode die in deze formaten wordt gespecificeerd, wordt pas duidelijk nadat deze op de monitor is weergegeven.

Nieuwe formaten in CSS3 (HSL, HSLA en RGBA) werken in browsers sinds versies: IE 9.0, Opera 10.0 Firefox 3.0. Hoe stijlen te laten werken in oudere browsers?

Someblock ( 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 er geen alfakanaal wordt gebruikt, weergegeven in RGB-indeling.

Hexadecimale getallen worden gebruikt om kleuren te specificeren. Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam al aangeeft, 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 te combineren tot één. Het getal 255 in decimaal komt bijvoorbeeld overeen met het getal FF in hexadecimaal. Om verwarring bij de definitie van het getallenstelsel te voorkomen, wordt het hexadecimale getal voorafgegaan door het hekje #, bijvoorbeeld #666999. Elk van de drie kleuren - rood, groen en blauw - kan waarden aannemen van 00 tot FF. De aanduiding van de kleur 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 de verkorte vorm #rgb te gebruiken, waarbij elk teken moet worden verdubbeld. De invoer #fe0 moet dus worden beschouwd 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. In tafel. 1 toont de namen, hexadecimale code, waarden in RGB, HSL-formaat en beschrijving.

Tabblad. 1. Kleurnamen

Naam	Kleur	De code	RGB	HSL	Beschrijving
wit		#fffff 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%)	Het 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%)	Donkerblauw
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
Purper		#800080	RGB(128,0,128)	hsl(300,100%,25%)	Purper

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 een 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 acceptabel om de kleur in te stellen als een percentage, terwijl 100% overeenkomt met het getal 255. Eerst wordt het rgb-sleutelwoord opgegeven en vervolgens worden de kleurcomponenten gespecificeerd tussen haakjes, 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 instelt. Een waarde van 0 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is doorschijnend.

RGBA is toegevoegd aan CSS3, dus validatie van CSS-code moet volgens deze versie worden uitgevoerd. Opgemerkt moet worden dat de CSS3-standaard nog in ontwikkeling is en dat sommige functies ervan kunnen veranderen. Een RGB-kleur die bijvoorbeeld aan de eigenschap background-color is toegevoegd, doorstaat de validatie, maar een aan de background-eigenschap toegevoegde kleur niet. 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 kleurwaarde op het kleurenwiel (Fig. 1) en wordt aangegeven 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% geeft geen kleur aan en een grijstint, 100% is de maximale verzadigingswaarde.

Lichtheid stelt in hoe helder de kleur is en wordt gespecificeerd als een percentage van 0% tot 100%. Kleine waarden maken de kleur donkerder, terwijl hoge waarden hem lichter maken, 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 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is doorschijnend.

Kleurwaarden in RGBA-, HSL- en HSLA-formaten worden toegevoegd aan CSS3, dus controleer bij gebruik van deze formaten de code op geldigheid ten opzichte van de versie.

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

Kleurcodes in CSS worden gebruikt om kleuren te specificeren. Meestal worden kleurcodes of kleurwaarden gebruikt om een ​​kleur in te stellen voor ofwel de voorgrond van een element (bijvoorbeeld tekst, linkkleur) of de achtergrond van het element (achtergrond, blokkleur). Ze kunnen ook worden gebruikt om de knopkleur, randen, markeringen, zweefeffecten en andere decoratieve effecten te wijzigen.

Je kunt je kleurwaarden in verschillende formaten instellen. De volgende tabel bevat alle mogelijke formaten:

Deze formaten worden hieronder in meer detail beschreven.

CSS-kleuren - Hex-codes

Hexadecimale kleurcode is een zescijferige kleurweergave. De eerste twee cijfers (RR) zijn de rode waarde, de volgende twee zijn de groene waarde (GG) en de laatste twee zijn de blauwe waarde (BB).

CSS-kleuren - korte hexadecimale codes

Korte hexadecimale kleurcode is een kortere vorm van notatie van zes tekens. 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 een kleurcode die is 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 computeronafhankelijk zijn. Deze kleuren in CSS variëren van 000000 tot FFFFFF hex-code. Ze zijn veilig in gebruik omdat ze ervoor zorgen dat alle computers de 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

26/02/15 8.9K

Zoals u weet, kan kleur de toestand van een persoon beïnvloeden: zowel mentaal als fysiek. Elke dag, surfend op internet, evalueren de ogen miljoenen kleuren en tinten. Een webdesigner die bekend is met de psychologie van kleur, kan de stemming van de bezoeker bepalen om elk doel 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 de 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 worden niet voor niets als de belangrijkste gekozen: de reden is de fysiologie van het netvlies van het menselijk oog en hoe het ze waarneemt:

Het RGB-model blijft tegenwoordig het meest populair en wordt gebruikt om kleuren op tv-schermen en computermonitoren weer te geven. Omdat fabrikanten hun producten verschillende eigenschappen geven, werd in 1996 een uniform RGB-gebaseerd kleurensynthesesysteem gecreëerd, sRGB genaamd, waaraan Microsoft en HP samenwerkten.

Numerieke kleurweergave

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 de kleur wordt weergegeven door het bereik 0-255 (8 bits), wat overeenkomt met 00-FF in hexadecimaal.

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 heeft die lager zijn dan 255, worden verschillende tinten rood, groen en blauw verkregen. Het volgende is een tabel met hun gradatie, evenals de hexadecimale waarden van elk van de tinten:

RGB-kleurenkaarten

Natuurlijk zijn er, naast gradaties van primaire kleuren, gemengde, en hun aantal is vrij groot. Daarom is 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 haar hier leren kennen. Deze tabel vereenvoudigt het leven van webontwerpers aanzienlijk, omdat u binnen een paar seconden de gewenste schaduw 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, die werden afgeleid door wiskundige berekeningen.

Wanneer de browser een kleur niet correct kan weergeven, probeert hij in de buurt te komen van wat hij nodig heeft door aangrenzende kleuren te mengen, en hoogstwaarschijnlijk zal het resultaat volledig onaanvaardbaar zijn:

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

Gouden kleur in RGB-model

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

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

Beige kleur in RGB-model

Beige heeft een vrij belangrijke plaats in de geschiedenis, ook al is het niet de meest expressieve. Veel culturele monumenten, vooral antieke sculpturen, zijn gemaakt van steatiet en speksteen, die een beige tint hebben. In het RGB-model heeft beige de volgende numerieke representaties.