Lila html. Ställa in färg med RGBA
Datorskärmar, samt skärmar mobiltelefoner, smartphones och surfplattor, består av tusentals små kvadrater som kallas pixlar (om du tittar noga på bildskärmen kan du se dem). När skärmen är avstängd är den svart eftersom den inte avger ljus när den är på, varje pixel får en annan färg, vilket skapar bilden vi ser när vi tittar på skärmen.
När vi ställer in en färg för ramen för ett element, bakgrund eller text, ställer vi in färgen specifikt för de pixlar som de är sammansatta av. Det finns två allmänna metoder för att specificera färger i CSS: med namn eller värde. Det enklaste är att ange ett namn: rött är rött, blått är blått och så vidare, men CSS ger inte många färgnamn att välja mellan. Å andra sidan innebär att ange ett färgvärde ett mycket större urval av nyanser. Det finns flera sätt att ange ett färgvärde, de två vanligaste är RGB- och hexadecimala värden. De var en del av CSS sedan den allra första versionen och alla webbläsare stöder dem. CSS3 introducerade flera fler alternativ för att definiera färg: RGBA, HSL och HSLA, de är mindre webbläsarvänliga, men de mest senaste versionerna webbläsare stöder dem redan.
Blommans namn
Det enklaste och mest uppenbara sättet att ange en färg i CSS är att välja ett fördefinierat färgnamn från en uppsättning nyckelord. Det finns totalt 147 nyckelord med blomnamn tillgängliga: 17 namn - standardfärger, som introducerades i början HTML-versioner(vit, svart, röd, gul, blå, grön, orange, lila, grå, silver, aqua, fuchsia, lime, rödbrun, marin, oliv och kricka) och 130 ytterligare sådana som lades till i CSS2. Du kan se hela listan över tillgängliga färgnamn i HTML-sektionen i vår färgtabell.
RGB och RGBA
RGB-systemet använder tre siffror som beskriver de relativa mängderna rött, grönt och blått som blandas ihop för att producera vilken nyans som helst. Siffrorna kan variera från 0 till 255. Tänk på RGB-koden för färgen mörklila: rgb(204, 51, 255), den kan till exempel tillämpas på CSS-egenskap ansvarig för teckensnittsfärgen:
Färg: rgb(205, 51, 255);
RGBA-systemet lägger till ytterligare ett nummer som beskriver färgens genomskinlighet, värdet kan variera från 0 (helt transparent) till 1 (helt ogenomskinlig). Ett värde på 0,5 gör färgen halvtransparent, överväg en halvtransparent version av mörklila, definierad med RGBA-systemet:
Färg: rgba(204, 51, 255, 0,5);
Du kan se att de röda, gröna och blå färgvärdena liknar RGB-systemet. Den fjärde siffran - 0,5 är graden av transparens. Bokstaven "A" i RGBA står för alfakanal, vilket är en term från grafisk design betyder transparens.
RGBA-färger är användbara för att skapa genomskinliga element som gör elementen under dem synliga.
HSL och HSLA
HSL-systemet (hue, saturation, lightness) beskriver färger baserat på nyans, mättnad och ljushet. Här är samma mörklila färg som anges i HSL-format:
Färg: hsl(285, 100%, 60%);
Den första siffran är nyansen, uttryckt i grader från 0 till 360, som bestämmer färgens position på färghjulet. Den andra siffran, mättnad, definierad som en procentandel från 0 % till 100 %, anger hur mättad (ljus) färgen kommer att vara. Den tredje siffran är ljushet, den definieras som en procentsats precis som mättnad, ljushet indikerar hur ljus eller mörk färgen blir.
HSLA-systemet, liksom RGBA, lägger till ett fjärde tal som sträcker sig från 0 till 1 som bestämmer hur transparent färgen ska vara. Ett värde på 0,5 gör färgen halvtransparent, tänk på den halvtransparenta versionen av mörklila, definierad med HSLA-systemet:
Färg: hsla(285, 100%, 60%, 0,5);
Hexadecimala färgvärden
Den hexadecimala färgkoden är de sex tecknen efter #-symbolen:
Varje uppsättning av två tecken representerar ett tal från 0 till 255. Så de två första tecknen representerar färgen röd, de två nästa representerar grönt och de två sista representerar blått. I denna hexadecimala kod är mycket lik RGB med skillnaden att här är varje färg specificerad i hexadecimalt system notation istället för decimal.
Om varje siffrapar består av samma symboler kan färgvärdet förkortas. Men om den hexadecimala koden ser ut så här, till exempel #bbff10, kan en sådan post inte förkortas.
Färg: #f00; färg: #ff0000;
Obs: Webbläsare som inte stöder dessa färgvärden (rgba, hsl och hsla) associerar inte någon färg med bakgrunden eller teckensnittet, och ignorerar deklarationen helt. I det här fallet använder elementets bakgrund standardvärdet (det blir helt transparent), och texten använder antingen standardvärdet (svart färg) eller en färg som ärvts från det överordnade elementet.
För äldre versioner av webbläsare bör du lägga till en extra regel som definierar färgen i RGB-format, hexadecimalt värde eller efter namn. Denna regel måste visas före en regel som anger en färg i RGBA-, HSL- eller HSLA-format. Detta kommer att ge ett skyddsnät för färg eftersom i CSS, om det finns två regler som anger ett värde för samma egenskap, har regeluppsättningen nedan i koden alltid företräde. Det betyder att om webbläsaren stöder RGBA-, HSL- eller HSLA-format, kommer den att använda den andra regeln, och om den inte gör det, kommer den att använda den första.
Färgkoder i CSS används för att specificera färger. Vanligtvis används färgkoder eller färgvärden för att ställa in färgen för antingen förgrundsfärgen för ett element (t.ex. textfärg, länkfärg) eller bakgrundsfärgen för ett element (bakgrundsfärg, blockfärg). De kan också användas för att ändra färgen på en knapp, kant, markör, hovring och andra dekorativa effekter.
Du kan ställa in dina färgvärden olika format. Följande tabell listar alla möjliga format:
De listade formaten beskrivs mer i detalj nedan.
CSS-färger - Hexkoder
Hexadecimal färgkodär en sexsiffrig representation av färg. De två första siffrorna (RR) representerar det röda värdet, de nästa två representerar det gröna värdet (GG), och de två sista representerar det blå värdet (BB).
CSS-färger - Korta hexadecimala koder
Kort hex-färgkodär en kortare form av notation med sex tecken. I det här formatet upprepas varje siffra för att producera ett ekvivalent sexsiffrigt färgvärde. Till exempel: #0F0 blir #00FF00.
Hexadecimalt värde kan tas från vilken grafik som helst programvara, Till exempel Adobe Photoshop, Core Draw, etc.
Varje hexadecimal färgkod i CSS kommer att föregås av ett hash-tecken "#". Nedan finns exempel på användning av hexadecimala notationer.
CSS-färger - RGB-värden
RGB-värdeär en färgkod som ställs in med hjälp av egenskapen rgb(). Den här egenskapen har tre värden: ett vardera för rött, grönt och blått. Värdet kan vara ett heltal, från 0 till 255, eller en procentsats.
Notera: Alla webbläsare stöder inte egenskapen rgb() color, så det rekommenderas inte att använda den.
Nedan är ett exempel som visar flera färger med RGB-värden.
Färgkodsgenerator
Du kan skapa miljontals färgkoder med vår tjänst.
Webbläsarsäkra färger
Nedan finns en tabell med 216 färger som är de mest säkra och datoroberoende. Dessa färger i CSS sträcker sig från 000000 till FFFFFF hexadecimal kod. De är säkra att använda eftersom de säkerställer att alla datorer visar färg korrekt när de arbetar med 256 färgpaletten.
| Tabell över "säkra" färger i 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 |
Färga in CSS-språk kan specificeras på olika sätt:
- vid namn,
- med hexadecimalt värde,
- i RGB- och RGBA-format,
- i HSL- och HSLA-format.
Ställ in färg efter namn
Webbläsare stöder att specificera vissa färger för element efter namn. Den här tabellen innehåller några nyckelord (engelska färgnamn) som används för att specificera färgegenskaper, RGB-kod, hexadecimal kod (HEX) och HSL-kod.
| namn | Färg | RGB | HEX | HSL | Beskrivning |
|---|---|---|---|---|---|
| vit | rgb(255, 255, 255) | #ffffff eller #fff | hsl(0, 0 %, 100 %) | Vit | |
| silver | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0 %, 75 %) | Grå | |
| grå | rgb(128, 128, 128) | #808080 | hsl(0, 0 %, 50 %) | Mörkgrå | |
| svart | rgb(0, 0, 0) | #000000 eller #000 | hsl(0, 0%, 0%) | Svart | |
| rödbrun | rgb(128, 0, 0) | #800000 | hsl(0, 100 %, 25 %) | Mörkröd | |
| röd | rgb(255; 0; 0) | #ff0000 eller #f00 | hsl(0, 100 %, 50 %) | Röd | |
| orange | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100 %, 50 %) | Orange | |
| gul | rgb(255, 255, 0) | #ffff00 eller #ff0 | hsl(60, 100 %, 50 %) | Gul | |
| oliv | rgb(128, 128, 0) | #808000 | hsl(60, 100 %, 25 %) | Oliv | |
| kalk | rgb(0, 255, 0) | #00ff00 eller #0f0 | hsl(120, 100 %, 50 %) | Ljusgrön | |
| grön | rgb(0, 128, 0) | #008000 | hsl(120, 100 %, 25 %) | Grön | |
| aqua | rgb(0, 255, 255) | #00ffff eller #0ff | hsl(180, 100 %, 50 %) | Blå | |
| blå | rgb(0, 0, 255) | #0000ff eller #00f | hsl(240, 100 %, 50 %) | Blå | |
| Marin | rgb(0,0,128) | #000080 | hsl(240, 100 %, 25 %) | Mörkblå | |
| kricka | rgb(0, 128, 128) | #008080 | hsl(180, 100 %, 25 %) | Blå grön | |
| fuchsia | rgb(255, 0, 255) | #ff00ff eller #f0f | hsl(300, 100 %, 50 %) | Rosa | |
| lila | rgb(128; 0; 128) | #800080 | hsl(300, 100 %, 25 %) | Violett |
Detta är ett exempel på användningen av färgnamn, färgnamnen är hämtade från den utökade tabellen.
Så här fungerar den här koden:
Ställa in färg med RGB
RGB är en additiv färgmodell. På engelska språket tillägg- tillägg. RGB är en förkortning av de engelska orden: Red, Green, Blue - red, green, blue). Av detta framgår att i modellen RGB-färger syntetiseras genom att lägga till tre färger (röd, grön, blå) i varierande mängd.
Genom att blanda röda, gröna och blå färger kan du få flera miljoner nyanser. Alla möjliga kombinationer lagras i datorns minne.
Kom till saken.
För att ställa in egenskaper i detta format, använd notationen rgb(r, g, b) , där r, g, b är de tre kanalerna för varje färg (röd, grön, blå). Värden för varje kanal är inställda i intervallet från 0 till 255.
Exempelkod.
För att göra allt klart, här är ett kodexempel:
Så här ska det här exemplet fungera:
Figur 1. Färger i RGB. Förklaringar till exempel.
I början av sidan skapar vi klassen div.rgb, den behövs för block skapade av taggen
Därefter, i koden vi ställer in bakgrundsfärg blockera
Försök att redigera det här exemplet och ange dina egna värden, till exempel rgb(100, 100, 100) .
Ställa in färg med RGBA
Dök upp i CSS3 nytt verktyg för att arbeta med färg - RGBA-format. Det kan kallas en utveckling av RGB-modellen, men med tillägg av en ny kanal - A- eller alfakanalen. Denna kanal ställer in färgens genomskinlighet. Dess värden är inställda i intervallet från 0 till 1. Ett värde på 0 motsvarar full transparens, 1 - full opacitet (färgen kommer att vara densamma som den specificerades i tre första RGB-kanaler), och mellanvärden som 0,4 eller 0,6 - genomskinlighet i varierande grad.
Exempelkod.
Så här kommer det att fungera:
Denna kod liknar visuellt följande, som använder RGB-modellen för att ange ett färgvärde:
Här är hans resultat:
Ett alfakanalvärde på noll gör vilken färg som helst osynlig - helt transparent, värdet lika med ett sänder färg i RGB-kod utan ändringar. Egenskapen rgba(255,0,0,1.0) visar färgen röd rgb(255, 0, 0) .
Med hexadecimalt värde (HEX-kod)
I vardagen använder vi decimalräkningssystemet. Dess ursprung är mycket enkelt - vi har tio fingrar på våra händer, och att räkna på våra fingrar har varit bekvämt i livet. Om i decimalsystem tio siffror: från 0 till 9, och siffran 10 är nästa siffra, då har det hexadecimala talsystemet 16 siffror, och nästa siffra blir siffran 16.
För att ange färgkoder som hexadecimala siffror, använd det vanliga decimalsiffror från 0 till 9 och för att beteckna siffror från 10 till 15 använd latinska bokstäver från A till F, det vill säga (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D E, F). För tydlighetens skull, låt oss lägga detta i en tabell:
För att skriva hexadecimala tal större än F (15 i decimalsystemet), som i decimalsystemet, använder de också kombinationen av två siffror, men redan hexadecimala, vilket är uppenbart. Ja, för protokollet decimal nummer 255 i hexadecimal notation är FF.
Det hexadecimala systemet är mer begripligt för datorn, och det bearbetar värden som ställs in av hexadecimalt värde snabbare.
För att ange en färg i hexadecimal, före numeriskt värde du måste sätta ett "#"-tecken, exempel: #FFC0CB. Själva värdet #FFC0CB består av tre hexadecimala siffror FF, C0 och CB. Innebörden av denna post är densamma som att ställa in färgen i RGB-formatet (rgb(r, g, b)) - varje hexadecimal siffra i HEX-koden indikerar färgmättnaden i dess kanal för RGB-modellen.
Denna kod kommer att visa följande element:
Och här är en bild med resultatet från avsnittet "Ställa in färger med RGB" på den här sidan ovan.
Figur 1. Färger i RGB. Vi ser att färgerna är identiska.
En förkortad notering av HEX-färgkoden är tillåten: ett 6-siffrigt nummer kan skrivas som ett 3-siffrigt nummer. Detta är endast giltigt när två siffror i färgvärdet för en kanal upprepas.
Det vill säga följande förkortning är acceptabel:
Till exempel kan färgen #ff22aa skrivas som #f2a, eller färgen #44aa22 kan skrivas som #4a2.
Ställa in färg med HSL
Dök upp i CSS3 nytt format för att ange färg.
HSL-formatet är en förkortning för de engelska orden: Hue (hue), Saturate (saturation) och Lightness (lightness).
Nyans i HSL är värdet av en färg på ett speciellt färghjul (Figur 2) och anges i grader. Om vi drar analogier med RGB-modellen, så motsvarar 0° rött, 120° motsvarar grönt och 240° motsvarar blått.
Nyansvärdet kommer att ändras i intervallet från 0 till 359.
Figur 2. HSL färghjul. Det andra värdet - mättnad (Mättad) sätts som en procentsats. Vid 100 % mättnad är färgen så "saftig" som möjligt eftersom mättnadsindikatorn rör sig mot 0 %, färgen blir mattare och rullar in i grått.
Det tredje värdet, Ljushet, sätts också som en procentsats. Ju högre procentandel, desto ljusare blir färgen. De extrema värdena på 0% och 100% kommer att indikera svarta (inget ljus) respektive vita (överexponerade) färger, och det spelar ingen roll vilken färg från färghjulet som valdes i den första kanalen. Det optimala värdet för färgens ljusstyrka är 50 %.
Ställa in färg med HSLA
HSLA-formatet är relaterat till HSL, precis som RGB är till RGBA. I HSLA-format, som i RGBA, har en alfakanal lagts till, som ansvarar för färgtransparens.
Färg specificerad i HSL-format är lättare att läsa. Vi kan säga att det är intuitivt. Till exempel kan koden hsl(120,60%,50%) representera den slutliga färgen om det finns en bild av HSL-färghjulet i minnet. Detsamma kan inte sägas om RGB- och HEX-formaten. Färgkoden som anges i dessa format blir tydlig först efter att den har visualiserats på monitorn.
Nya format i CSS3 (HSL, HSLA och RGBA) fungerar i webbläsare från och med versionerna: IE 9.0, Opera 10.0 Firefox 3.0. Hur kan jag få stilar att fungera i äldre webbläsare?
Somebloсk (bakgrundsfärg: rgb(255,50,50); bakgrundsfärg: rgba(255,50,50,0.85))
När du använder den här koden i äldre webbläsare, kommer bakgrundsfärgen för klassen .somebloсk, även om den inte kommer att använda en alfakanal, att visas i RGB-format.
HEX/HTML
HEX-färg är inget annat än en hexadecimal representation av RGB.
Färger representeras som tre grupper hexadecimala siffror, där varje grupp är ansvarig för sin egen färg: #112233, där 11 är röd, 22 är grön, 33 är blå. Alla värden måste vara mellan 00 och FF.
Många applikationer tillåter en förkortad form av hexadecimal färgnotation. Om var och en av de tre grupperna innehåller samma tecken, till exempel #112233, kan de skrivas som #123.
- h1 (färg: #ff0000; ) /* röd */
- h2 ( färg: #00ff00; ) /* grön */
- h3 ( färg: #0000ff; ) /* blå */
- h4 (färg: #00f; ) /* samma blå, stenografi */
RGB
RGB-färgrymden (röd, grön, blå) består av alla möjliga färger som kan skapas genom att blanda rött, grönt och blått. Denna modell är populär inom fotografi, tv och datorgrafik.
RGB-värden anges som ett heltal från 0 till 255. Till exempel visas rgb(0,0,255) som blått eftersom den blå parametern är inställd på sitt högsta värde (255) och de andra är satta till 0.
Vissa applikationer (särskilt webbläsare) stöder procentuell inspelning av RGB-värden (från 0% till 100%).
- h1 ( färg: rgb(255, 0, 0); ) /* röd */
- h2 ( färg: rgb(0, 255, 0); ) /* grön */
- h3 (färg: rgb(0, 0, 255); ) /* blå */
- h4 ( färg: rgb(0%, 0%, 100%); ) /* samma blå, procentsats */
RGB-färgvärden stöds i alla större webbläsare.
RGBA
Nyligen moderna webbläsare lärt sig att arbeta med RGBA-färgmodellen - en förlängning av RGB med stöd för en alfakanal, som bestämmer opaciteten för ett objekt.
RGBA-färgvärdet anges som: rgba(röd, grön, blå, alfa). Alfaparametern är ett tal som sträcker sig från 0,0 (helt transparent) till 1,0 (helt ogenomskinlig).
- h1 (färg: rgb(0, 0, 255); ) /* blå i vanlig RGB */
- h2 ( färg: rgba(0, 0, 255, 1); ) /* samma blå i RGBA, eftersom opacitet: 100% */
- h3 ( färg: rgba(0, 0, 255, 0,5); ) /* opacitet: 50% */
- h4 ( färg: rgba(0, 0, 255, .155); ) /* opacitet: 15,5 % */
- h5 ( färg: rgba(0, 0, 255, 0); ) /* helt genomskinlig */
RGBA stöds i IE9+, Firefox 3+, Chrome, Safari och Opera 10+.
HSL
HSL-färgmodellen är en representation av RGB-modellen i ett cylindriskt koordinatsystem. HSL representerar färger på ett mer intuitivt och mänskligt läsbart sätt än typiska RGB. Modellen används ofta i grafikapplikationer, i färgpaletter och för bildanalys.
HSL står för Hue (färg/nyans), Saturation (saturation), Lightness/Luminans (lightness/lightness/luminosity, ej att förväxla med ljusstyrka).
Nyans anger färgens position på färghjulet (från 0 till 360). Mättnad är mättnadens procentuella värde (från 0 % till 100 %). Ljushet är en procentandel av ljushet (från 0% till 100%).
- h1 ( färg: hsl(120, 100%, 50%); ) /* grön */
- h2 ( färg: hsl(120, 100%, 75%); ) /* ljusgrön */
- h3 ( färg: hsl(120, 100%, 25%); ) /* mörkgrön */
- h4 ( färg: hsl(120, 60%, 70%); ) /* pastellgrön */
HSL stöds i IE9+, Firefox, Chrome, Safari och Opera 10+.
HSLA
I likhet med RGB/RGBA har HSL ett HSLA-läge som stöder en alfakanal för att indikera opaciteten för ett objekt.
HSLA-färgvärdet anges som: hsla(nyans, mättnad, ljushet, alfa). Alfaparametern är ett tal som sträcker sig från 0,0 (helt transparent) till 1,0 (helt ogenomskinlig).
- h1 ( färg: hsl(120, 100%, 50%); ) /* grön i normal HSL */
- h2 (färg: hsla(120, 100%, 50%, 1); ) /* samma gröna i HSLA, eftersom opacitet: 100% */
- h3 (färg: hsla(120, 100%, 50%, 0,5); ) /* opacitet: 50% */
- h4 ( färg: hsla(120, 100 %, 50 %, .155); ) /* opacitet: 15,5 % */
- h5 ( färg: hsla(120, 100%, 50%, 0); ) /* helt transparent */
CMYK
CMYK-färgmodellen förknippas ofta med färgtryck och tryck. CMYK (till skillnad från RGB) är en subtraktiv modell, vilket innebär att högre värden är associerade med mörkare färger.
Färgerna bestäms av förhållandet mellan cyan (Cyan), magenta (Magenta), gul (Gul), med tillägg av svart (Key/blackK).
Vart och ett av siffrorna som definierar en färg i CMYK representerar procentandelen bläck i en given färg som utgör färgkombinationen, eller mer exakt, storleken på skärmpunkten som visas på en fotosättningsmaskin på film av en given färg (eller direkt på tryckt formulär i fallet med CTP).
Till exempel, för att få PANTONE 7526-färgen, skulle du blanda 9 delar cyan, 83 delar magenta, 100 delar gult och 46 delar svart. Detta kan betecknas enligt följande: (9,83,100,46). Ibland används följande beteckningar: C9M83Y100K46, eller (9%, 83%, 100%, 46%) eller (0,09/0,83/1,0/0,46).
HSB/HSV
HSB (även känd som HSV) liknar HSL, men de är två olika färgmodeller. De är båda baserade på cylindrisk geometri, men HSB/HSV bygger på "hexcone"-modellen, medan HSL bygger på "bi-hexcone"-modellen. Konstnärer föredrar ofta att använda denna modell, det är allmänt accepterat att HSB/HSV-enheten är närmare den naturliga uppfattningen av färger. I synnerhet används HSB-färgmodellen i Adobe Photoshop.
HSB/HSV står för Hue (färg/nyans), Saturation (saturation), Brightness/Value (ljusstyrka/värde).
Nyans anger färgens position på färghjulet (från 0 till 360). Mättnad är mättnadens procentuella värde (från 0 % till 100 %). Ljusstyrka är en procentandel av ljusstyrkan (från 0 % till 100 %).
XYZ
XYZ-färgmodellen (CIE 1931 XYZ) är ett rent matematiskt utrymme. Till skillnad från RGB, CMYK och andra modeller, i XYZ är huvudkomponenterna "imaginära", vilket innebär att du inte kan associera X, Y och Z med någon uppsättning färger att blanda. XYZ är huvudmodellen för nästan alla andra färgmodeller som används inom tekniska områden.
LABB
LAB-färgmodellen (CIELAB, “CIE 1976 L*a*b*”) beräknas från CIE XYZ-utrymmet. Labs designmål var att skapa en färgrymd där färgförändringar skulle vara mer linjära när det gäller mänsklig perception (jämfört med XYZ), det vill säga så att samma förändring i färgkoordinatvärden i olika regioner av färgrymden skulle producera samma känsla av färgförändring.
Hexadecimala tal används för att ange färger. Det hexadecimala systemet, till skillnad från decimalsystemet, bygger, som namnet antyder, på talet 16. Siffrorna kommer att vara följande: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Siffror från 10 till 15 ersätts med latinska bokstäver. Tal större än 15 i det hexadecimala systemet bildas genom att kombinera två tal till ett. Till exempel motsvarar talet 255 i decimal talet FF i hexadecimal. För att undvika förvirring vid bestämning av nummersystemet, innan hexadecimalt tal sätt hash-symbolen #, till exempel #666999. Var och en av de tre färgerna - röd, grön och blå - kan ta värden från 00 till FF. Färgsymbolen är alltså uppdelad i tre komponenter #rrggbb, där de två första symbolerna indikerar färgens röda komponent, de två mittersta - grönt och de två sista - blått. Det är tillåtet att använda den förkortade formen #rgb, där varje tecken ska dubblas. Därför bör posten #fe0 betraktas som #ffee00.
Vid namn
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Webbläsare stöder vissa färger efter deras namn. I tabell 1 visar namn, hexadecimal kod, RGB, HSL värden och beskrivning.
| namn | Färg | Koda | RGB | HSL | Beskrivning |
|---|---|---|---|---|---|
| vit | #ffffff eller #fff | rgb(255,255,255) | hsl(0,0 %, 100 %) | Vit | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Grå | |
| grå | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Mörkgrå | |
| svart | #000000 eller #000 | rgb(0,0,0) | hsl(0,0%,0%) | Svart | |
| rödbrun | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Mörkröd | |
| röd | #ff0000 eller #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Röd | |
| orange | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | Orange | |
| gul | #ffff00 eller #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Gul | |
| oliv | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Oliv | |
| kalk | #00ff00 eller #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Ljusgrön | |
| grön | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Grön | |
| aqua | #00ffff eller #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blå | |
| blå | #0000ff eller #00f | rgb(0,0,255) | hsl(240,100%,50%) | Blå | |
| Marin | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Mörkblå | |
| kricka | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blå grön | |
| fuchsia | #ff00ff eller #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Rosa | |
| lila | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violett |
Använder RGB
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Du kan definiera färg med de röda, gröna och blå värdena i decimaler. Var och en av de tre färgkomponenterna har ett värde från 0 till 255. Det är också möjligt att ställa in färgen i procent, med 100 % motsvarande siffran 255. Ange först nyckelord rgb , och sedan indikeras färgkomponenterna inom parentes, separerade med kommatecken, till exempel rgb(255, 128, 128) eller rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA-formatet liknar syntaxen RGB, men innehåller en alfakanal som anger elementets transparens. Värdet 0 är helt transparent, 1 är ogenomskinligt och mellanvärde typ 0,5 - genomskinlighet.
RGBA lades till i CSS3, så CSS-koden måste valideras mot denna version. Det bör noteras att CSS3-standarden fortfarande är under utveckling och vissa funktioner kan ändras. Till exempel, en färg i RGB-format som lagts till i egenskapen bakgrundsfärg valideras, men en som läggs till i egenskapen bakgrund är inte längre giltig. Samtidigt förstår webbläsare helt korrekt färgen för båda egenskaperna.
HSL
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Namnet på HSL-formatet kommer från kombinationen av de första bokstäverna Hue (nyans), Saturate (mättnad) och Lightness (ljushet). Nyans är färgvärdet på färghjulet (fig. 1) och anges i grader. 0° motsvarar rött, 120° grönt och 240° blått. Nyansvärdet kan variera från 0 till 359.
Ris. 1. Färghjul
Mättnad är intensiteten hos en färg och mäts i procent från 0 % till 100 %. Ett värde på 0 % anger ingen färg och en grå nyans, 100 % maximalt värde mättnad.
Ljushet anger hur ljus färgen är och anges i procent från 0 % till 100 %. Låga värden gör färgen mörkare, och höga värden gör färgen ljusare; extrema värden på 0% och 100% motsvarar svart och vitt.
HSLA
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA-formatet liknar syntaxen HSL, men innehåller en alfakanal för att specificera elementets transparens. Ett värde på 0 är helt transparent, 1 är ogenomskinligt och ett mellanvärde som 0,5 är halvtransparent.
RGBA-, HSL- och HSLA-färgvärden läggs till i CSS3, så kontrollera din kod för versionsgiltighet när du använder dessa format.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Varning
Alla lejonfångstmetoder som listas på webbplatsen är teoretiska och baserade på beräkningsmetoder. Författarna garanterar inte din säkerhet när du använder dem och frånsäger sig allt ansvar för resultaten. Kom ihåg att ett lejon är ett rovdjur och ett farligt djur!
Resultat detta exempel visas i fig. 2.
Ris. 2. Färger på webbsidan