Gråblå färgkod. Färg i stilar kan ställas in på olika sätt: efter hexadecimalt värde, efter namn, i RGB, RGBA, HSL, HSLA-format

Försök att redigera det här exemplet så att det inkluderar dina egna värden, som rgb(100, 100, 100) .

Ställ in färg med RGBA

CSS3 introducerade ett nytt verktyg för att arbeta med färg - RGBA-formatet. Det kan kallas en utveckling av RGB-modellen, men med tillägg av en ny kanal - A- eller alfakanal. Denna kanal ställer in färgens genomskinlighet. Dess värden är inställda i intervallet från 0 till 1. Ett värde lika med 0 motsvarar full transparens, 1 - full opacitet (färgen kommer att vara densamma som den är inställd i de tre första RGB-kanalerna) och mellanliggande värden , som 0,4 eller 0,6 - genomskinlighet i varierande grad.

Kodexempel.

Så här kommer det att fungera:

Denna kod liknar visuellt följande, som använder RGB-modellen för att ställa in färgvärdet:

Här är hans resultat:

Ett alfakanalvärde lika med noll gör vilken färg som helst osynlig - absolut transparent, ett värde lika med ett översätter färgen i RGB-koden 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 decimalsystemet för räkning. Dess ursprung är mycket enkelt - vi har tio fingrar på våra händer, och det var bekvämt att räkna på fingrar i livet. Om det finns tio siffror i decimalsystemet: från 0 till 9, och siffran 10 är nästa siffra, så finns det 16 siffror i det hexadecimala talsystemet, och nästa siffra blir siffran 16.

För att ange färgkoder används vanliga decimalsiffror från 0 till 9 som hexadecimala siffror och latinska bokstäver från A till F används för att indikera siffror från 10 till 15, 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 sammanfatta detta i en tabell:

För att skriva hexadecimala tal större än F (15 decimaler), som i decimalsystemet, använder de också föreningen av två siffror, men redan hexadecimala, vilket är uppenbart. Så, för att skriva decimaltalet 255 i hexadecimalt, används notationen FF.

Det hexadecimala systemet är mer förståeligt för datorn, det bearbetar värdena som ges av det hexadecimala värdet snabbare.

För att ange en färg i hexadecimalt system, föregå det numeriska värdet med ett "#"-tecken, till 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-format (rgb(r, g, b) ) - varje hexadecimal siffra i HEX-koden indikerar färgmättnaden i dess RGB-modellkanal.

Denna kod kommer att visa följande element:

Och här är en bild med resultatet från avsnittet "Ställa in färg med RGB" på den här sidan ovan.

Vi ser att färgerna är identiska.

En förkortad notation för HEX-färgkoden är tillåten: ett 6-siffrigt nummer kan skrivas som ett 3-siffrigt nummer. Detta är endast giltigt om två siffror i färgvärdet för samma 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äll in färg med HSL

CSS3 har ett nytt format för att specificera färger.

HSL-formatet är en förkortning av de engelska orden: Hue (hue), Saturate (saturation) och Lightness (lightness).

Nyans i HSL är ett färgvärde på ett speciellt färghjul (Figur 2) och det 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 ändras från 0 till 359.

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% blir färgen mer och mer matt och rullar in i grått.

Det tredje värdet - lätthet (Lightness) 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 (brist på ljus) respektive vita (exponerade) 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 kan betraktas som värdet av färgens ljusstyrka lika med 50%.

Färginställning med HSLA

HSLA-formatet är relaterat till HSL, liksom RGB till RGBA. I HSL-format A, som i RGBA, läggs en alfakanal till som ansvarar för färggenomskinlighet.

En 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. Detta kan inte sägas om RGB- och HEX-formaten, färgkoden som anges i dessa format blir tydlig först efter att den har renderats på monitorn.

Nya format i CSS3 (HSL, HSLA och RGBA) fungerar i webbläsare sedan versionerna: IE 9.0, Opera 10.0 Firefox 3.0. Hur får man stilar att fungera i äldre webbläsare?

Someblock (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 använder en alfakanal, att visas i RGB-format.

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 en färg för antingen förgrunden på ett element (t.ex. text, länkfärg) eller bakgrunden för ett element (bakgrund, blockfärg). De kan också användas för att ändra knappfärg, kanter, markör, hovring och andra dekorativa effekter.

Du kan ställa in dina färgvärden i olika format. Följande tabell listar alla möjliga format:

Dessa format beskrivs mer i detalj nedan.

CSS-färger - Hexkoder

Hexadecimal färgkodär en sexsiffrig färgrepresentation. De två första siffrorna (RR) är det röda värdet, de nästa två är det gröna värdet (GG) och de två sista är det blåa värdet (BB).

CSS-färger - Korta hex-koder

Kort hexadecimal färgkodär en kortare form av sexteckennotation. I detta format upprepas varje siffra för att producera motsvarande sexsiffrigt färgvärde. Till exempel: #0F0 blir #00FF00.

Det hexadecimala värdet kan hämtas 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. Följande är exempel på användning av hexadecimal notation.

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.

Säkra webbläsarfä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 hex-kod. De är säkra att använda eftersom de säkerställer att alla datorer kommer att visa färg korrekt när de arbetar med 256 färgpaletten.

Vlad Merzhevich

I HTML anges färgen på ett av två sätt: med hjälp av en hexadecimal kod och med namnet på vissa färger. Den vanligaste metoden är baserad på det hexadecimala systemet, som den mest universella.

Hexadecimala färger

HTML använder hexadecimala tal 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. I tabell. 6.1 visar överensstämmelsen mellan decimala och hexadecimala tal.

Tal större än 15 i det hexadecimala systemet bildas genom att kombinera två tal till ett (tabell 6.2). Till exempel motsvarar talet 255 i decimal talet FF i hexadecimal.

För att undvika förvirring i definitionen av talsystemet föregås det hexadecimala talet av pundtecknet #, till exempel #aa69cc. I det här fallet spelar fallet ingen roll, så det är tillåtet att skriva #F0F0F0 eller #f0f0f0.

En typisk färg som används i HTML är följande.

Här är bakgrundsfärgen på webbsidan inställd på #FA8E47. Pundtecknet # framför ett tal betyder att det är hexadecimalt. De två första siffrorna (FA) definierar färgens röda komponent, den tredje till fjärde siffran (8E) den gröna komponenten och de två sista siffrorna (47) den blå komponenten. Slutresultatet är denna färg.

Var och en av de tre färgerna - röd, grön och blå - kan ta värden från 00 till FF, vilket så småningom bildar 256 nyanser. Således kan det totala antalet färger vara 256x256x256 = 16.777.216 kombinationer. Färgmodellen baserad på de röda, gröna och blå komponenterna kallas RGB (röd, grön, blå; röd, grön, blå). Denna modell är additiv (från add - add), där tillägget av alla tre komponenterna bildar vitt.

För att göra det lättare att navigera i hexadecimala färger, ta hänsyn till några regler.

• Om värdena för färgkomponenterna är desamma (till exempel: #D6D6D6), kommer en grå nyans att erhållas. Ju högre siffra, desto ljusare färg, och värdena ändras från #000000 (svart) till #FFFFFF (vit).
• En klar röd färg bildas om den röda komponenten görs maximal (FF), och resten av komponenterna sätts till noll. Färgen med värdet #FF0000 är den rödaste möjliga röda nyansen. Detsamma gäller för grönt (#00FF00) och blått (#0000FF).
• Gul (#FFFF00) erhålls genom att blanda rött med grönt. Detta syns tydligt på färghjulet (fig. 6.1), som presenterar primärfärgerna (röd, grön, blå) och komplementära eller komplementära. Dessa inkluderar gul, cyan och violett (även kallad magenta). I allmänhet kan vilken färg som helst erhållas genom att blanda färger intill den. Så cyan (#00FFFF) erhålls genom att kombinera blått och grönt.

Ris. 6.1. Färgcirkel

Färger baserade på hexadecimala värden behöver inte väljas empiriskt. Lämplig för detta ändamål grafikredigerare kunna arbeta med olika färgmodeller som Adobe Photoshop. På fig. 6.2 visar ett fönster för att välja en färg i detta program, linjen cirklar det resulterande hexadecimala värdet för den aktuella färgen. Du kan kopiera och klistra in den i din kod.

Ris. 6.2. Färgväljare i Photoshop

Webbfärger

Om du ställer in bildskärmens färgkvalitet till 8-bitars (256 färger), kan samma färg visas i olika webbläsare på mitt sätt. Detta har att göra med hur grafik renderas när webbläsaren arbetar med sin egen palett och inte kan visa en färg som inte finns i dess palett. I det här fallet ersätts färgen av en kombination av pixlar av andra, nära den, färger som imiterar den givna. För att färgen ska förbli densamma i olika webbläsare introducerades en palett med så kallade webbfärger. Webbfärger är sådana färger, för varje komponent av vilka - röd, grön och blå - ett av sex värden är satta - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Det hexadecimala värdet för denna komponent anges inom parentes. Det totala antalet färger från alla möjliga kombinationer ger 6x6x6 - 216 färger. Ett exempel på webbfärg är #33FF66.

Huvudfunktionen med webbfärg är att den visas på samma sätt i alla webbläsare. För tillfället är relevansen av webbfärger mycket liten på grund av förbättringen av kvaliteten på bildskärmar och utvidgningen av deras kapacitet.

Färger efter namn

För att inte komma ihåg en samling siffror kan du istället använda namnen på vanliga färger. I tabell. 6.3 visar namnen på populära färgnamn.

Det spelar ingen roll hur du anger färgen - med dess namn eller genom att använda hexadecimala tal. Till sin effekt är dessa metoder lika. Exempel 6-1 visar hur man ställer in bakgrunds- och textfärger på en webbsida.

Exempel 6.1. Bakgrund och textfärg

Exempeltext

I detta exempel bakgrundsfärgen ställs in med hjälp av attributet bgcolor för taggen , och färgen på texten genom textattributet. För variation sätts värdet på textattributet till ett hexadecimalt tal och bgcolor sätts till ett reserverat värde. nyckelord kricka.