Tyvärr är det ännu inte möjligt att visa smakupplevelser på hemsidan. Men detta kan kompenseras fullt ut med hjälp av färger. När allt kommer omkring låter html-färger dig visa vilken som helst av miljontals nyanser. Så" färgade pennor Det finns många fler än sju i hans uppsättning.
Färgschema i html
I html kan färg anges i flera format:
1. Som ett hexadecimalt värde – används koden som anges i det hexadecimala talsystemet. Sådana färgkoder i html består av tre par hexadecimala tal. Varje par är ansvarigt för färgens mättnad med sin primära färg:
- Det första numeriska paret är ansvarigt för färgen röd;
- Det andra paret är för innehållet i grön färg;
- Det senare är för sitt blå innehåll.
En hash-markering placeras i början av koden (före siffrorna). Detta är den hexadecimala färgkoden. Förutom siffror från 1 till 9 använder detta nummersystem bokstäver i det latinska alfabetet (A, B, C, D, E, F).
Till exempel kommer den vita färgkoden i html att se ut som #FFFFFF:
2. Nyckelord – HTML stöder för närvarande cirka 147 nyckelord. Men alla dessa ord är inte unika. Vissa av dem hänvisar till samma färgnyans.
Färgen grå representeras av två nyckelord: grå och grå . Deras hexadecimala kod (HEX) ges av samma värde #808080.
Exempel:
#808080
3. I RGB-format - denna färgkodning i html är baserad på användningen av tre värden, inställda i intervallet från 0 till 255. Var och en av dem bestämmer färgens mättnad med en av de primära färgerna:
- R – röd (röd);
- G - grön (grön);
- B – blå (blå).
Färgnumret i RGB-format skrivs i följande form: rgb(0, 210, 100).
bakgrundsfärg:rgb(100,186,43)
4. I RGBA-formatet - det är ett förbättrat RGB-format, där det fjärde värdet anger färgens genomskinlighet som ett decimaltal från 0 till 1.
Användningsexempel:
bakgrundsfärg:rgba(100,86,143,0.2)
bakgrundsfärg:rgba(100,86,143,0.5)
bakgrundsfärg:rgba(100,86,143,0.8)
bakgrundsfärg:rgba(100,86,143,1)
HTML-färgtabeller och färggeneratorer
Med ett så brett utbud av färginställningsformat är det lätt att bli förvirrad. Därför uppfanns ett speciellt färgbord. Den tillhandahåller 147 nyckelnamn på färgnyanser med överensstämmelsekoder i alla större färgstandarder. Dessutom är varje fält utrustat med en stapel för visuellt färgval. En av dessa tabeller presenteras på webbplatsen colorscheme.ru:
Men även med denna strukturering av matchning kan det vara svårt att välja rätt nyans. Och det är inte ett faktum att tabellen med färgkoder kommer att innehålla den du behöver.
För att komma runt detta hinder och göra det så enkelt som möjligt att välja rätt nyans har interaktiva webbtjänster utvecklats. Deras användargränssnitt kan skilja sig något från varandra.
På webbplatsen html-color-codes.info ser färggeneratorn ut så här:
Och inom tjänsten color-picker.appsmaster.co implementeras det här verktyget lite annorlunda:
Mättnaden för varje färg i generatorn ställs in med hjälp av speciella reglage. Visuellt visas nyansen av färgen på ramen och rektangeln på vänster sida. Längst ner visar 3 fält färgkoden i grundläggande format.
Men färggeneratorn är tillgänglig inte bara på specialiserade webbplatser. Nästan alla grafiska redaktörer är utrustade med ett liknande verktyg. Till exempel Photoshop:
Säkerhetsföreskrifter vid arbete med färg
Och det här var länge sedan, tillbaka i en tid präglad av grafikkort som endast stödde 256 färger. I dessa avlägsna tider kunde operativsystem bara visa ett visst antal åttabitars nyanser utan distorsion.
Sedan utvecklades ett fantastiskt bord med säkra färger. Den specificerade 216 nyanser som kunde visas utan förvrängning i någon av den tidens webbläsare. Och till denna dag denna " stort manuskript» är fortfarande tillgänglig på vissa resurser:
Nuförtiden har allt förändrats. Därför är alla säkerhetsregler vid arbete med färg i html helt upphävda. När allt kommer omkring stöder modern datorhårdvara mer än 16 miljoner olika nyanser. Och 216 säkra färger har sjunkit i glömska.
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 talsystemet placeras en hash-symbol # före det hexadecimala talet, 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 dubbleras. 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å tillåtet att ange färgen i procent, med 100 % motsvarande siffran 255. Ange först nyckelordet rgb och ange sedan 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. Ett värde på 0 är helt transparent, 1 är ogenomskinligt och ett mellanvärde som 0,5 är halvtransparent.
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 % indikerar ingen färg och en grå nyans, 100 % är maxvärdet för 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 svartvitt.
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!
Resultatet av detta exempel visas i fig. 2.
Ris. 2. Färger på webbsidan
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, svävare och andra dekorativa effekter.
Du kan ange dina färgvärden i 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 två nästa representerar det gröna värdet (GG), och de två sista representerar det blå värdet (BB).
CSS-färger - Korta hex-koder
Kort hex-färgkodär en kortare form av sexteckennotation. I detta format upprepas varje siffra för att producera ett ekvivalent sexsiffrigt färgvärde. Till exempel: #0F0 blir #00FF00.
Det hexadecimala värdet kan hämtas från alla grafikprogram som 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 ser till 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 |
