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.

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.

Afb.1. Kleuren in RGB.

We zien dat de kleuren identiek zijn.

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

HEX/HTML

HEX-kleur is niets anders dan een hexadecimale weergave van RGB.

Kleuren worden weergegeven als drie groepen hexadecimale cijfers, waarbij elke groep verantwoordelijk is voor zijn eigen kleur: #112233, waarbij 11 rood is, 22 groen en 33 blauw. Alle waarden moeten tussen 00 en FF liggen.

Veel toepassingen maken een verkorte vorm van hexadecimale kleurnotatie mogelijk. Als elk van de drie groepen dezelfde tekens bevat, bijvoorbeeld #112233, dan kunnen ze worden geschreven als #123.

1. h1 ( kleur: #ff0000; ) /* rood */
2. h2 ( kleur: #00ff00; ) /* groen */
3. h3 ( kleur: #0000ff; ) /* blauw */
4. h4 ( kleur: #00f; ) /* hetzelfde blauw, steno */

RGB

De RGB-kleurruimte (Rood, Groen, Blauw) bestaat uit alle mogelijke kleuren die kunnen worden gecreëerd door rood, groen en blauw te mengen. Dit model is populair in fotografie, televisie en computergraphics.

RGB-waarden worden gespecificeerd als een geheel getal van 0 tot 255. RGB(0,0,255) wordt bijvoorbeeld weergegeven als blauw omdat de blauwe parameter is ingesteld op de hoogste waarde (255) en de andere zijn ingesteld op 0.

Sommige applicaties (met name webbrowsers) ondersteunen percentageregistratie van RGB-waarden (van 0% tot 100%).

1. h1 ( kleur: rgb(255, 0, 0); ) /* rood */
2. h2 ( kleur: rgb(0, 255, 0); ) /* groen */
3. h3 ( kleur: rgb(0, 0, 255); ) /* blauw */
4. h4 ( kleur: rgb(0%, 0%, 100%); ) /* hetzelfde blauw, percentageinvoer */

RGB-kleurwaarden worden in alle grote browsers ondersteund.

RGBA

Onlangs hebben moderne browsers leren werken met het RGBA-kleurmodel - een uitbreiding van RGB met ondersteuning voor een alfakanaal, dat de dekking van een object bepaalt.

De RGBA-kleurwaarde wordt gespecificeerd als: rgba(rood, groen, blauw, alpha). De alpha-parameter is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).

1. h1 ( kleur: rgb(0, 0, 255); ) /* blauw in gewone RGB */
2. h2 ( kleur: rgba(0, 0, 255, 1); ) /* hetzelfde blauw in RGBA, omdat dekking: 100% */
3. h3 ( kleur: rgba(0, 0, 255, 0,5); ) /* dekking: 50% */
4. h4 ( kleur: rgba(0, 0, 255, .155); ) /* dekking: 15,5% */
5. h5 ( kleur: rgba(0, 0, 255, 0); ) /* volledig transparant */

RGBA wordt ondersteund in IE9+, Firefox 3+, Chrome, Safari en Opera 10+.

HSL

Het HSL-kleurenmodel is een weergave van het RGB-model in een cilindrisch coördinatensysteem. HSL vertegenwoordigt kleuren op een meer intuïtieve en voor mensen leesbare manier dan typisch RGB. Het model wordt vaak gebruikt in grafische toepassingen, kleurenpaletten en beeldanalyse.

HSL staat voor Hue (kleur/tint), Saturation (verzadiging), Lightness/Luminance (lichtheid/lichtheid/helderheid, niet te verwarren met helderheid).

Tint specificeert de positie van de kleur op het kleurenwiel (van 0 tot 360). Verzadiging is de procentuele waarde van de verzadiging (van 0% tot 100%). Lichtheid is een percentage van de lichtheid (van 0% tot 100%).

1. h1 ( kleur: hsl(120, 100%, 50%); ) /* groen */
2. h2 ( kleur: hsl(120, 100%, 75%); ) /* lichtgroen */
3. h3 ( kleur: hsl(120, 100%, 25%); ) /* donkergroen */
4. h4 ( kleur: hsl(120, 60%, 70%); ) /* pastelgroen */

HSL wordt ondersteund in IE9+, Firefox, Chrome, Safari en Opera 10+.

HSLA

Net als RGB/RGBA heeft HSL een HSLA-modus die een alfakanaal ondersteunt om de dekking van een object aan te geven.

De HSLA-kleurwaarde wordt gespecificeerd als: hsla(tint, verzadiging, lichtheid, alfa). De alpha-parameter is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).

1. h1 ( kleur: hsl(120, 100%, 50%); ) /* groen in normale HSL */
2. h2 ( kleur: hsla(120, 100%, 50%, 1); ) /* hetzelfde groen in HSLA, omdat dekking: 100% */
3. h3 ( kleur: hsla(120, 100%, 50%, 0,5); ) /* dekking: 50% */
4. h4 ( kleur: hsla(120, 100%, 50%, .155); ) /* dekking: 15,5% */
5. h5 ( kleur: hsla(120, 100%, 50%, 0); ) /* volledig transparant */

CMYK

Het CMYK-kleurenmodel wordt vaak geassocieerd met afdrukken en afdrukken in kleur. CMYK is (in tegenstelling tot RGB) een subtractief model, wat betekent dat hogere waarden geassocieerd zijn met donkerdere kleuren.

Kleuren worden bepaald door de verhouding cyaan (cyaan), magenta (magenta), geel (geel), met toevoeging van zwart (key/black).

Elk van de cijfers die een kleur in CMYK definiëren, vertegenwoordigt het percentage inkt van een bepaalde kleur waaruit de kleurencombinatie bestaat, of preciezer gezegd, de grootte van de schermpunt die op een fotozetmachine wordt weergegeven op film van een bepaalde kleur ( of direct op de drukplaat bij CTP).

Om bijvoorbeeld PANTONE 7526-kleur te verkrijgen, mengt u 9 delen cyaan, 83 delen magenta, 100 delen geel en 46 delen zwart. Dit kan als volgt worden aangegeven: (9,83,100,46). Soms worden de volgende aanduidingen gebruikt: C9M83Y100K46, of (9%, 83%, 100%, 46%), of (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (ook bekend als HSV) is vergelijkbaar met HSL, maar het zijn twee verschillende kleurmodellen. Ze zijn beide gebaseerd op cilindrische geometrie, maar HSB/HSV is gebaseerd op het "hexcone" -model, terwijl HSL is gebaseerd op het "bi-hexcone" -model. Kunstenaars geven er vaak de voorkeur aan om dit model te gebruiken, algemeen wordt aangenomen dat het HSB/HSV-apparaat dichter bij de natuurlijke perceptie van kleuren staat. In Adobe Photoshop wordt met name gebruik gemaakt van het HSB-kleurmodel.

HSB/HSV staat voor Tint (kleur/tint), Verzadiging (verzadiging), Helderheid/Waarde (helderheid/waarde).

Tint specificeert de positie van de kleur op het kleurenwiel (van 0 tot 360). Verzadiging is de procentuele waarde van de verzadiging (van 0% tot 100%). Helderheid is een percentage van de helderheid (van 0% tot 100%).

XYZ

Het XYZ-kleurenmodel (CIE 1931 XYZ) is een puur wiskundige ruimte. In tegenstelling tot RGB, CMYK en andere modellen zijn in XYZ de belangrijkste componenten ‘denkbeeldig’, wat betekent dat je X, Y en Z niet kunt associëren met welke set kleuren dan ook om te mengen. XYZ is het hoofdmodel voor vrijwel alle andere kleurmodellen die op technisch gebied worden gebruikt.

LABORATORIUM

Het LAB-kleurmodel (CIELAB, “CIE 1976 L*a*b*”) wordt berekend op basis van de CIE XYZ-ruimte. Het ontwerpdoel van Lab was om een ​​kleurruimte te creëren waarin kleurveranderingen lineairer zouden zijn in termen van menselijke perceptie (vergeleken met XYZ), dat wil zeggen, zodat dezelfde verandering in kleurcoördinaatwaarden in verschillende delen van de kleurruimte zou plaatsvinden. hetzelfde gevoel van kleurverandering veroorzaken.

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

Naam	Kleur	Hex	(RGB)
Aqua (zeegolf)		#00FFFF	(000,255,255)
Zwart		#000000	(000,000,000)
Blauw		#0000FF	(000,000,255)
Fuchsia (magenta)		#FF00FF	(255,000,255)
Grijs		#808080	(128,128,128)
Groente		#008000	(000,128,000)
Limoen (heldergroen)		#00FF00	(000,255,000)
Kastanjebruin (donker bordeaux)		#800000	(128,000,000)
Marine (donkerblauw)		#000080	(000,000,128)
Olijf		#808000	(128,128,000)
Paars		#800080	(128,000,128)
Rood		#FF0000	(255,000,000)
Zilver		#C0C0C0	(192,192,192)
Wintertaling (grijsgroen)		#008080	(000,128,128)
Wit		#FFFFFF	(255,255,255)
Geel		#FFFF00	(255,255,000)

Tafel paars kleuren en zijn schakeringen

Naam	Kleur	Hex	(RGB)
Magenta (magenta)		#FFCBDB	(255,203,219)
Magenta (magenta)		#FF0099	(255,000,153)
Magenta (magenta)		#F95A61	(249,090,097)
Fuchsia (fuchsia)		#FF00FF	(255,000,255)
Mauvein (aniline paars)		#EF0097	(239,000,151)
Zalmroze (oranjeroze)		#FF91A4	(255,145,164)
Cenise (een tint paars)		#DE3163	(153,149,140)
Aubergine Aubergine (aubergine)		#990066	(153,000,132)
Lavendelblush (roze-lavendel)		#FFF0F5	(255,240,245)
Lila (lila)		#C8A2C8	(200,162,200)
Magenta (magenta)		#FF008F	(255,000,143)
Orchidee (orchidee)		#DA70D6	(218,112,214)
Roodviolet (paarsrood)		#C71585	(199,021,133)
Sanguïn (bloedig)		#92000A	(146,000,010)
Distel (paarse tint)		#D8BFD8	(185,211,238)
Violet-aubergine (een tint paars)		#991199	(153,017,153)
Rosa vivo (dieproze)		#FF007F	(255,000,127)
Lavendelroos (een tint paars)		#FBA0E3	(108,123,139)
Mountbatten roze		#997ABD	(153,122,141)

Tafel grijs kleuren en zijn schakeringen

Naam	Kleur	Hex	(RGB)
Grijs		#808080	(128,128,128)
Grijs		#bebebe	(190,190,190)
(grijstint)		#858585	(133,133,133)
Grijs33		#545454	(084,084,084)
(grijze leisteen)		#708090	(112,128,144)
(Kwarts)		#99958с	(153,149,140)
(Lichtgrijs)		#bbbbbb	(187,187,187)
(Zilver)		#c0c0c0	(192,192,192)
(Grijs-wit)		#f0f0f0	(240,240,240)
(Baarden van Abdel-Kerim)		#e0e0e0	(224,224,224)
Lichtgrijs (lichtgrijs)		#d3d3d3	(211,211,211)
LichtStateGray()		#778899	(119,136,153)
StateGray-1 (bleek korenbloemblauw1)		#c6e2ff	(198,226,255)
StateGray-2 (bleek korenbloemblauw2)		#b9d3ee	(185,211,238)
StaatGray3()		#9fb6cd	(159,182,205)
StaatGray4()		#6c7b8b	(108,123,139)

Kijk goed naar de tekening. De achtergrond van het vervolgkeuzevenster is doorschijnend gemaakt. Dit is een vrij gebruikelijke ontwerptechniek. Laten we erover nadenken hoe dit kan worden geïmplementeerd.

Taak

Maak de kleur cross-browser doorschijnend.

Oplossing

De eerste gedachte in deze situatie is om een ​​png24-afbeelding te gebruiken met een reeds ingestelde doorschijnendheid voor de achtergrond. Maar deze foto is volkomen onnodig. Je kunt prima zonder (en dus zonder extra verzoek aan de server). Laten we nog steeds proberen de optimale oplossing te vinden.

De tweede gedachte is om te gebruiken. Maar in dit geval is het niet erg handig. Dan worden immers niet alleen de achtergrond, maar ook de inscripties doorschijnend. Ja, eigenlijk het hele raam in één keer.

Natuurlijk kunt u proberen een extra container toe te voegen en er alleen dekking op toe te passen, maar dit HTML-element is alleen bedoeld ter decoratie en is uiteraard overbodig. Is het mogelijk om zonder te doen?

Natuurlijk kan dat! Als u RGBA gebruikt.

RGBA-kleurbeschrijvingsformaat

Met CSS3 kunt u kleur opgeven met behulp van RGB- en RGBA-functies. In dit geval moeten we het aandeel van elke kleurcomponent aangeven waarvoor één byte is toegewezen (van 0 tot 255, voor het geval iemand het niet weet).

De syntaxis voor dit geval is heel eenvoudig:

Achtergrond: rgb(0, 255, 0); /* puur groen */

Voor RGBA wordt een vierde parameter toegevoegd: alfatransparantie (van 0 tot 1).

Achtergrond: rgba(255, 0, 0, 0,5); /* puur rood met 50% transparantie */

Hier is hij dan, de oplossing voor ons probleem. Stel gewoon de achtergrondkleur in met RGBA en alles ziet er uit zoals we willen. Zonder onnodige afbeeldingen en elementen!

Waar kan ik deze cijfers krijgen?

U kunt de kleurcomponenten bekijken met het pipetgereedschap van Photoshop.

Over compatibiliteit tussen browsers

Omdat de RGB-functie veel ouder is dan RGBA en al sinds de tijd van de CSS2-standaard aanwezig is, kunt u ter bescherming tegen de oudste browsers de volgende dubbele constructie gebruiken:

SomeBlock ( achtergrond: rgb(255, 0, 0); achtergrond: rgba(255, 0, 0, 0.5); )

Met deze aanpak zullen de overgrootvaders van moderne browsers geen doorschijnendheid hebben, maar de kleur zelf blijft correct.

Voor IE zul je apart moeten zorgen. Ezels begrijpen RGBA niet tot en met versie 8.

Zoals altijd: land voor de boeren, fabrieken voor de arbeiders en ezels als kruk! In de vorm van .

Uiteraard plaatsen we deze regel in gevechtsomstandigheden in een aparte CSS, die we verbinden.

SomeBlock (achtergrond:transparant; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

De truc is om de begin- en eindkleuren als hetzelfde op te geven (ff0000 - rood) en te profiteren van het feit dat u in dit filter het alfakanaal voor het verloop kunt instellen (in het voorbeeld is de waarde 80).

Ter referentie: het filter gebruikt het hexadecimale systeem en de code voor een volledig ondoorzichtige kleur is FF (decimaal is dit 255). Dienovereenkomstig is hexadecimaal 80 decimaal 128, d.w.z. 50% transparantie.

Getest in:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chroom