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

In HTML kan kleur op drie manieren worden ingesteld:

Taakkleur in HTML door zijn naam

Sommige kleuren kunnen worden ingesteld door hun naam met behulp van de naam van de naam in het Engels als een waarde. De meest voorkomende zoekwoorden: zwart (zwart), wit (wit), rood (rood), groen (groen), blauw (blauw) en DR:

Tekstkleur - rood

De meest populaire kleuren van de World Wide Web Consortium Standard (Engels World Wide Web Consortium, W3C):

Een voorbeeld van het gebruik van verschillende kleurennamen:

Voorbeeld: Kleurtaak door zijn naam

• Probeer het zelf "

Titel op een rode achtergrond

Titel op een oranje achtergrond

Titel op Lyme-achtergrond

Witte tekst op blauwe achtergrond

Titel op een rode achtergrond

Titel op een oranje achtergrond

Titel op Lyme-achtergrond

Witte tekst op blauwe achtergrond

Kleurtaak met RGB

Bij het weergeven van verschillende kleuren op de monitor, wordt het RGB-palet gebruikt als basis. Elke kleur wordt verkregen door drie hoofd te mengen: R - rood (rood), G - Groen (groen), Blauw (blauw). De helderheid van elke kleur wordt ingesteld door één byte en kan daarom waarden van 0 tot 255 nemen. RGB (255.0.0) wordt bijvoorbeeld als rood weergegeven, aangezien het rood is geïnstalleerd in de hoogste waarde (255) en de rest is ingesteld op 0. U kunt ook een kleur in percentage instellen. Elk van de parameters geeft het helderheid van de helderheid van de overeenkomstige kleur aan. Bijvoorbeeld: RGB-waarden (127, 255, 127) en RGB (50%, 100%, 50%) stelt dezelfde groene verzadigingkleur in:

Voorbeeld: taakkleur met behulp van RGB

• Probeer het zelf "

rGB (127, 255, 127)

rGB (50%, 100%, 50%)

RGB (127, 255, 127)

RGB (50%, 100%, 50%)

Kleur in hexadecimaal instellen

Waarden R. G. B. Ook kunnen ook worden vermeld met hexadecimale (hex) kleurwaarden in het formulier: #RRRGGGGBB, waarbij RR (rood), GG (groen) en BB (blauw) hexadecimale waarden zijn van 00 naar FF (net als decimaal 0 -255). Het hexadecimale systeem, in tegenstelling tot het decimale systeem, is gebaseerd, als volgt uit de naam, een van de 16. Het hexadecimale systeem gebruikt de volgende tekens: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, en, B, C, D, E, F. Hier worden de cijfers van 10 tot 15 vervangen door Latijnse letters. Nummers zijn meer dan 15 in een hexadecimaal systeem worden geassocieerd met twee tekens tot één waarde. Het hoogste aantal 255 in het decimale systeem komt bijvoorbeeld overeen met de hoogste FF-waarde in het hexadecimale systeem. In tegenstelling tot het decimale systeem, vóór hexadecimaal, zet het lattice-symbool # # FF0000 wordt bijvoorbeeld weergegeven als een rode kleur, omdat het rood is geïnstalleerd in de hoogste waarde (FF) en de resterende kleuren zijn ingesteld op de minimumwaarde (00). Tekens na roostersymbool # U kunt zowel hoofdletters als regel bellen. Met het hexadecimale systeem kan de verkorte vorm van het formulier #RGB, waar elk personage gelijk is aan het dubbele. Dus, opname # f7o moet worden beschouwd als # FF7700.

Voorbeeld: kleur hex

• Probeer het zelf "

rood: # ff0000

groen: # 00FF00

blauw: # 0000FF

Rood: # ff0000

Groen: # 00FF00

Blauw: # 0000FF

Rood + groen \u003d geel: # ffff00

Rood + blauw \u003d paars: # ff00ff

Groen + blauw \u003d blauw: # 00FFFF

Lijst van wijdverspreide kleuren (naam, HEX en RGB):

Bloemcodes (achtergrond) op verzadiging en schaduw.

Voor het instellen van kleuren worden nummers gebruikt in de hexadecimale code. Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, als volgt uit de naam, van het nummer 16. De cijfers zijn de volgende: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Figuren van 10 tot 15 worden vervangen door Latijnse letters. De cijfers zijn meer dan 15 in het hexadecimale systeem worden gevormd door de combinatie van twee nummers in één. Het nummer 255 in het decimale systeem komt bijvoorbeeld overeen met het nummer FF in het hexadecimale systeem. Om de verwarring in de definitie van het nummersysteem niet te verwarren, wordt het roostersymbool ingesteld voor hexadecimaal, bijvoorbeeld # 666999. Elk van de drie kleuren is rood, groen en blauw - kan waarden van 00 naar FF nemen. Aldus is de aanduiding van de kleur onderverdeeld in drie componenten #rrggbb, waarbij de eerste twee tekens de rode component van de kleur, twee medium-groen, en de laatste twee blauw markeren. Het is toegestaan \u200b\u200bom de verkorte vorm van #RGB te gebruiken, waar elk personage zou moeten verdubbelen. Dus de opname # FE0 moet worden beschouwd als # ffee00.

Op titel

Browsers ondersteunen sommige kleuren volgens hun naam. In het tabblad. 1 toont de namen, hexadecimale code, waarden in het RGB-, HSL-indeling en beschrijving.

RGB gebruiken

U kunt de kleur bepalen met behulp van de waarden van de rode, groene en blauwe component in decimale calculus. Elk van de drie kleurencomponenten duurt een waarde van 0 tot 255. Het is ook toegestaan \u200b\u200bom de kleur als een percentage verhouding in te stellen, en 100% komt overeen met het nummer 255. Ten eerste is het RGB-trefwoord aangegeven en vervolgens tussen haakjes, Kleurcomponenten, zoals RGB (255, 128, 128) of RGB (100%, 50%, 50%).

Rgba

Het RGBA-formaat is vergelijkbaar met de syntaxis op RGB, maar bevat een alfakanaal dat de transparantie van het element aangeeft. De waarde van 0 komt overeen met volledige transparantie, 1 - opaciteit en de tussenwaarde zoals 0,5 - doorschijnendheid.

RGBA is toegevoegd aan CSS3, dus de validatie van CSS-code moet volgens deze versie worden uitgevoerd. Opgemerkt moet worden dat de CSS3-standaard nog in ontwikkeling is en sommige mogelijkheden in het kan veranderen. De kleur in het RGB-formaat heeft bijvoorbeeld toegevoegd aan de achtergrond-Color Property passeert validatie, en de achtergrond is al toegevoegd aan de accommodatie. Tegelijkertijd begrijpen browsers behoorlijk de kleur voor beide eigenschappen.

HSL.

De naam van het HSL-formaat wordt gevormd uit de combinatie van de eerste HUE-letters (TINT), SatainAate en Lightness (Svetlota). De schaduw is de kleurwaarde in de kleurencirkel (fig. 1) en ingesteld in graden. 0 ° komt overeen met een rode kleur, 120 ° - groen en 240 ° - blauw. De schaduwwaarde kan variëren van 0 tot 359.

Fig. 1. Kleurcirkel

Verzadiging is de intensiteit van de kleur, wordt gemeten als een percentage van 0% tot 100%. De waarde van 0% geeft de afwezigheid van kleur en schaduw van grijs, 100% maximale verzadigingswaarde aan.

Svetlota stelt in hoeveel de kleur helder is en wordt aangegeven als een percentage van 0% tot 100%. Kleine waarden maken de kleur donkerder en hoge aansteker, extreme waarden van 0% en 100% komen overeen met zwarte en witte kleur.

HSLA

Het HSLA-formaat is vergelijkbaar met de HSL-syntaxis, maar bevat een alfakanaal dat de transparantie van het element aangeeft. De waarde van 0 komt overeen met volledige transparantie, 1 - opaciteit en de tussenwaarde zoals 0,5 - doorschijnendheid.

Kleurwaarden in RGBA-, HSL- en HSLA-indelingen worden toegevoegd aan CSS3, dus controleer wanneer u deze indelingen gebruikt, de code voor de geldigheid in rekening houdend met de versie.

HTML5 CSS2.1 CSS3 IE CR OP SA FX

Een waarschuwing

Alle Lion Fishing-methoden die op de site worden vermeld, zijn theoretisch en op basis van computermethoden. De auteurs garanderen uw veiligheid niet wanneer ze ze gebruiken en alle verantwoordelijkheid voor het resultaat verwijderen. Onthoud, leeuw is een roofdier en een gevaarlijk dier!

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

Fig. 2. Kleuren op een webpagina

Kleur in CSS-taal kan op verschillende manieren worden ingesteld:

• op titel,
• in hexadecimale waarde
• in RGB- en RGBA-indelingen,
• in HSL- en HSLA-indelingen.

Taakkleur op naam

Browsers ondersteunen de indicatie van sommige kleuren aan de namen op namen. In deze tabel gebruikten sommige zoekwoorden (Engelse kleurnamen) die worden gebruikt om de kleureigenschappen, RGB-code, hexadecimale code (HEX) en HSL-code in te stellen.

Dit is een monster van het gebruik van de namen van kleuren, de pauzes van de kleuren worden uit de uitgebreide tabel gehaald.

Dit is hoe deze code werkt:

Kleur instellen met RGB

RGB is een additief kleurenmodel. In Engels toevoeging - toevoegen. RGB is een afkorting van Engelse woorden: rood, groen, blauw - rood, groen, blauw). Hieruit is het duidelijk dat de RGB-modellen worden gesynthetiseerd door het toevoegen van drie kleuren (rood, groen, blauw) in verschillende hoeveelheden.

Het mengen van rode, groene en blauwe kleur kan verschillende miljoenen tinten worden verkregen. Alle mogelijke combinaties worden opgeslagen in Computers-geheugen.

Dichter bij het bedrijfsleven.

Om de eigenschappen in dit formaat in te stellen, wordt het RGB (R-, G-, B) -record gebruikt, waarbij R, G, B drie kanalen is voor elke kleur (rood, groen, blauw). Waarden voor elk kanaal zijn ingesteld in het bereik van 0 tot 255.

Voorbeeldcode.

Om het duidelijk te maken, zal ik een voorbeeldcode geven:

Dit is hoe dit voorbeeld moet werken:

Verklaringen bijvoorbeeld.

Aan het begin van de pagina maak ik een klasse div.rgb, het heeft de blokken nodig die door de tag is gemaakt

Weergegeven de gewenste grootte: 240px tot 40px. De linehoogte-eigenschap heeft een waarde toegewezen - 40px, dat is, gelijk aan de hoogte van het blok, waarmee u tekst in het blok kunt weergeven

In het midden van de verticaal. Horizontaal tekst gecentreerd met behulp van de regel ( tekst-uitlijnen: centrum;).

Vervolgens zet in de code de achtergrondkleur van het blok

Bij het typen van het stijlkenmerk, gebruiken we de achtergrondbezit en worden de waarden toegewezen RGB (255, 0, 0), RGB (0, 255, 0) en RGB (0, 0, 255). Dat wil zeggen, wij maken afwisselend één kanaal zo verzadigd mogelijk en de resterende kanalen worden niet gebruikt voor synthese, aangezien hun waarde gelijk is aan NUL.

Probeer dit voorbeeld te bewerken en specificeer uw waarden, zoals RGB (100, 100, 100).

Kleur instellen met RGBA

De CSS3 heeft een nieuwe tool voor het werken met Color - RGBA-formaat. Het kan de ontwikkeling van het RGB-model worden genoemd, maar met de toevoeging van één nieuw kanaal - een of alfakanaal. Dit kanaal legt kleurtransparantie op. De waarden zijn ingesteld in het bereik van 0 tot 1. Een waarde van gelijk aan 0 komt overeen met volledige transparantie, 1 - volledige dekking (de kleur zal zijn zoals gespecificeerd in de eerste drie RGB-kanalen) en tussentijdse waarden, als 0,4 of 0,6 - doorschijnendheid tot variërende mate.

Voorbeeldcode.

Dit is hoe het zal werken:

Deze code voor de visuele weergave is vergelijkbaar met het volgende met behulp van het RGB-model om de kleurwaarde in te stellen:

Hier is zijn resultaat:

De alfakanaalwaarde die gelijk is aan de Knau maakt elke onzichtbare kleur - absoluut transparant, de waarde die gelijk is aan één vertaalt de kleur in de RGB-code ongewijzigd. Het RGBA-onroerend goed (255,0,0,10) toont de rode RGB (255, 0, 0).

In hexadecimale waarde (HEX-code)

In het lawaai-leven, gebruiken we het decimale score-systeem. De oorsprong is heel eenvoudig - we hebben tien vingers in je armen, en het was handig om op de vingers op weg te rekenen. Als er tien cijfers in het decimale systeem zijn: van 0 tot 9, en het nummer 10 is al de volgende ontlading, dan in een hexadecimaal aantal van 16 cijfers, en de volgende ontlading is het nummer 16.

Kleurencodes opgeven als hexadecimale cijfers, conventionele decimalen van 0 tot 9 worden gebruikt en Latijnse letters van A tot F dat is (0, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 6 , 2, 7, 8, 9, A, B, C, D, E, F). Voor de duidelijkheid zullen we dit in de tabel verminderen:

Om hexadecimale getallen op te nemen, gebruikt meer dan F (15 over het decimale systeem), zoals in het decimale systeem, ook de combinatie van twee cijfers, maar al hexadecimaal, dat voor de hand ligt. Dus gebruikt om een \u200b\u200bdecimaal nummer 255 in een hexadecimaal systeem te registreren een FF-record.

Het hexadecimale systeem is begrijpelijker voor de computer, het verwerkt de waarden die zijn gespecificeerd in hexadecimale waarde.

Om de kleur in het 16e-Riche-systeem te specificeren, moet u vóór de numerieke waarde het teken "#" instellen, een voorbeeld: # ffc0cb. De waarde van # FFC0CB zelf bestaat uit drie hexadecimale cijfers FF, C0 en CB. De betekenis van deze plaat is hetzelfde als de installatie van kleur in RGB-indeling (RGB (R, G, B)) - elke hexadecimale figuur in de HEX-code geeft kleurverzadiging in zijn RGB-modelkanaal aan.

# FF0000.

# 00FF00.

# 0000FF.

Deze code toont de volgende items:

Maar de tekening met het resultaat uit de sectie "Kleur instellen met RGB" op deze pagina hierboven.

Figuur 1. Kleuren in RGB.

We zien dat de kleuren identiek zijn.

Afgekoste opname van de hex-code van de kleur is toegestaan: het 6-cijferige nummer kan worden geschreven als 3-cijferig. Het is alleen toegestaan \u200b\u200bin het geval wanneer twee cijfers worden herhaald in de kleur van de kleur van één kanaal.

Dat wil zeggen, de volgende opnameductie is toegestaan:

Kleur # FF22AA is bijvoorbeeld toegestaan \u200b\u200bom SO te schrijven - # F2A of kleur # 44AA22 is toegestaan \u200b\u200bom in het formulier # 4A2 in te specificeren.

Kleur instellen met behulp van HSL

Een nieuw formaat verscheen in CSS3 om de kleur te specificeren.

HSL-indeling is een afkorting van Engelse woorden: tint (tint), verzadigde (verzadiging) en lichtheid (Svetlota).

Hue to HSL is een kleurwaarde op een speciale kleurcirkel (figuur 2) en is in graden ingesteld. Als u analoog met het RGB-model houdt, komt 0 ° overeen met de rode, 120 ° overeen met de groene en 240 ° - blauwe kleur.

De waarde van de schaduw wordt in het bereik van 0 tot 359 gewijzigd.

Figuur 2. HSL-kleurencirkel.

De tweede waarde is verzadiging (verzadig) in percentage. Met 100% verzadiging is de kleur de maximale "sappige", omdat de indicator de verzadiging naar 0% beweegt, wordt de kleur saai en rollen in grijs.

Derde betekenis - lightlock (lichtheid) stelt ook percentage in. Hoe hoger het percentage, hoe feldere kleur zal zijn. De extreme waarden van 0% en 100% worden aangeduid met het zwart (gebrek aan licht) en witte (verdoemde) kleuren, het maakt niet uit welke kleur uit de kleurencirkel in het eerste kanaal is geselecteerd. Het optimale kan worden beschouwd als een helderheidswaarde van 50%.

Kleur instellen met behulp van HSLA

Het HSLA-formaat is geassocieerd met HSL, evenals RGB met RGBA. In het HSLA-formaat, zoals in RGBA toegevoegd alfakanaal dat verantwoordelijk is voor kleurtransparantie.

De kleur die is opgegeven in HSL-formaat lees eenvoudig. Er kan worden gezegd dat hij intuïtief wordt begrepen. HSL-code (120.60%, 50%) kan bijvoorbeeld een laatste kleur worden ingediend als er een foto is van de HSL-kleurencirkel. Het is onmogelijk te zeggen over de RGB- en HEX-formaten, de kleurcode die is opgegeven in deze indelingen wordt alleen duidelijk na visualisatie op de monitor.

Nieuwe formaten in CSS3 (HSL, HSLA en RGBA) werken in browsers die beginnen met de versie: IE 9.0, Opera 10.0 Firefox 3.0. Hoe te maken stijlen werken aan oude browsers?

SomeBlock (achtergrondkleur: RGB (255,50, 50); Achtergrondkleur: RGBA (255,50,50, 0,085))

Bij gebruik van een dergelijke code in oude browsers, achtergrondkleur voor de klasse .Somebloxk, hoewel het het alfakanaal niet zal gebruiken, maar wordt weergegeven in het RGB-formaat.

Kleurcodes in CSS worden gebruikt om de kleur aan te duiden. In de regel worden kleurcodes of kleurwaarden gebruikt om de kleur of voor de voorgrond van het element (bijvoorbeeld de tekstkleur, referentie) of voor de achtergrond van het element (achtergrondkleur, blok) te installeren. Ze kunnen ook worden gebruikt om de kleur van de knop, de grenzen, marker te wijzigen tijdens de begeleiding en andere decoratieve effecten.

U kunt uw kleurwaarden in verschillende formaten instellen. De volgende tabel bevat alle mogelijke indelingen:

Hieronder worden de vermelde indelingen meer in detail beschreven.

CSS-kleuren - Hexadecimale codes

Sandent Color Code - Dit is een zescijferige presentatie van kleur. De eerste twee cijfers (RR) zijn een rode waarde, de volgende twee is een groene waarde (GG) en de laatste is een blauwe waarde (BB).

CSS-kleuren - korte hex-codes

Korte hex kleurcode - Dit is een kortere vorm van zescijferige notatie. In dit formaat wordt elk cijfer herhaald om een \u200b\u200bgelijkwaardige zescijferige kleurwaarde te verkrijgen. Bijvoorbeeld: # 0F0 wordt # 00FF00.

HEX-waarde kan worden genomen uit alle grafische software, zoals Adobe Photoshop, Core Draw, etc.

Elke hex-kraag in CSS wordt voorafgegaan door het Hesha "#" -teken. Hieronder staan \u200b\u200bvoorbeelden van het gebruik van hexadecimale benamingen.

CSS-kleuren - RGB-waarden

RGB-waarde - Dit is een kleurcode die is ingesteld met de eigenschap RGB (). Deze eigenschap duurt drie waarden: één voor rood, groen en blauw. De waarde kan een geheel getal zijn van 0 tot 255 of percentage.

Opmerking: Niet alle browsers ondersteunen de eigenschappen van RGB () kleuren, dus het wordt niet aanbevolen om het te gebruiken.

Hieronder vindt u een voorbeeld met verschillende kleuren met behulp van RGB-waarden.

Kleurcode generator

U kunt miljoenen kleurcodes maken met behulp van onze service.

Beveiligde browserkleuren

Hieronder staat een tabel met 216 kleuren die het meest veilig en onafhankelijk van de computer zijn. Deze kleuren in CSS variëren van 000000 naar het FFFFFF van hexadecimale code. Ze zijn veilig om te gebruiken, omdat ze ervoor zorgen dat alle computers de kleur correct weergeven bij het werken met 256 kleurenpaletten.

Tafel "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	# 9933C.	# 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.
# CCC00.	# 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.
# Ffccc00.	# Ffcc33	# Ffcc66.	# Ffccc99	#Ffcccccc	#Ffccff.
# Ffff00.	# Ffff33	# Ffff66	# Ffff99.	#Ffffcc	#Ffffff.