Fargelegg a b. HTML-opplæring
Som du vet, kan farge påvirke en persons tilstand: både mental og fysisk. Hver dag, mens de surfer på nettsider på Internett, vurderer øynene millioner av farger og nyanser. En webdesigner som er kjent med fargepsykologien kan manipulere besøkendes humør for å oppnå visse mål.
Dette skyldes det faktum at noen nyanser beroliger, og noen, tvert imot, begeistrer. Deretter vil vi snakke om hvordan farge syntetiseres og vises ved hjelp av datateknologi.
RGB er en fargemodell som representerer en metode for å oppnå alle farger og deres nyanser ved å blande tre hovedkomponenter i forskjellige proporsjoner, som er:
- Rød farge ( rød);
- grønn farge ( Grønn);
- blå farge ( Blå).
Det er her det forkortede navnet RGB kommer fra. Disse fargene ble valgt som de viktigste av en grunn: årsaken er fysiologien til netthinnen i det menneskelige øyet, og hvordan det oppfatter dem:
RGB-modellen er fortsatt den mest populære i dag og brukes til å gjengi farger på TV-skjermer og dataskjermer. Siden produsenter gir produktene sine forskjellige egenskaper, ble det i 1996 laget et enhetlig RGB-basert fargesyntesesystem kalt sRGB, som Microsoft og HP jobbet sammen om.
Numerisk representasjon av farge
Som nevnt tidligere dannes RGB-farger ved å blande primærfarger. For å beskrive intensiteten til hver av dem, ble det tatt i bruk et skjema der fargen er representert av området 0-255 (8 bits), som i heksadesimal notasjon tilsvarer 00-FF.
Det vil si at primærfargene vil se slik ut:
- Rød – RGB (255,0,0);
- Grønn – RGB (0,255,0);
- Blå – RGB (0,0,255);
Hvis fargeintensiteten tar verdier mindre enn 255, oppnås forskjellige nyanser av rødt, grønt og blått. Følgende er en tabell over deres graderinger, samt de heksadesimale verdiene for hver av nyansene:
RGB fargetabeller
Naturligvis, i tillegg til graderinger av primærfarger, er det blandede, og antallet er ganske stort. Derfor ble det laget en tabell med RGB-farger, som presenterer alle eksisterende nyanser, samt deres navn og numeriske representasjoner ( i desimal og heksadesimal form).
Du kan se den her. Denne tabellen gjør livet mye enklere for webdesignere, siden du på noen få sekunder kan finne den nødvendige nyansen og finne ut dens numeriske representasjon.
Trygg RGB-fargepalett
Men på et tidspunkt var det et problem med å vise farger i forskjellige nettlesere, og for å løse det ble den såkalte "sikre" paletten med RGB-farger kompilert, som ble utledet av matematiske beregninger.
Når nettleseren ikke kan vise en farge riktig, vil den prøve å få noe i nærheten av det den trenger ved å blande tilstøtende farger, og mest sannsynlig vil resultatet være helt uakseptabelt:
Ved å bruke RGB-fargekoder fra denne paletten kan en nettutvikler ha trygghet når det gjelder visning av farger på sidene på nettsiden deres når de vises med forskjellige nettlesere, plattformer og skjermer. Selv om tabellen over sikre farger for øyeblikket mister sin relevans ( teknologiske fremskritt står fortsatt ikke stille), når du bruker den, kan du, som de sier, sove rolig.
Gullfarge i RGB-modell
Ordet "gull" ble først brukt på begynnelsen av 1300-tallet for å beskrive fargen på et kjemisk element kalt Aurum - gull. I RGB-modellen er fargen gull representert med følgende numeriske verdier:
- RGB (255, 215, 0) – desimalsystem;
- HEX #FFD700 – heksadesimalt system.
Beige farge i RGB-modell
Beige farge inntar en ganske betydelig plass i historien, selv om den ikke er den mest uttrykksfulle. Mange kulturminner, spesielt antikke skulpturer, ble laget av kleberstein og kleberstein, som har en beige fargetone. I RGB-modellen har fargen beige følgende numeriske representasjoner.
Denne siden inneholder en tabell med nøkkelord som kan brukes til å angi farger på webutviklerspråk som: HTML, CSS, JavaScript, Flash, etc.
I de gamle spesifikasjonene for WC3-konsernet ble det kun spesifisert 16 nøkkelord, ved hjelp av hvilke farger ble satt i HTML og CSS. I ytterligere, mer moderne spesifikasjoner, ble ytterligere 130 nøkkelord lagt til for å indikere fargenavn. Følgende tabell inneholder fargenavnene og hex- og RGB-kodene de tilsvarer.
I henhold til CSS-reglene skilles ikke fargenavn med store og små bokstaver. Fargeoppføringene IndianRed og indianred er likeverdige.
Det er også verdt å merke seg at av de 146 søkeordene i tabellen er det faktisk færre farger i den. Dette er fordi noen søkeord refererer til samme farge. Dermed representerer navnene Grå og Grå den 50 % grå fargekoden #808080, og ordet Magenta er et synonym for HTML-fargen Fuchsia, tilsvarende den heksadesimale koden #FF00FF. Synonyme er også ordene Aqua og Cyan, de tilsvarer koden #00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Det er flere måter å representere farger på i webdesign.
HEX er et heksadesimalt fargerepresentasjonssystem basert på base 16. For dette systemet brukes arabiske desimalsiffer fra 0 til 9 og latinske bokstaver fra A til F for å komplementere det digitale tallet til 16. For webdesign, 16 primære (nøkkel) farger brukes, den såkalte heksadesimale fargekoden #RRGGBB, hvor hvert par er ansvarlig for sin andel av fargen: RR – rød, GG – grønn og BB – blå. Hver fargefraksjon varierer fra 00 til FF.
To andre representasjoner av farger i webdesign er: i form av RGB(*,*,*), der hver "*"-brøkdel av en farge er representert med desimaler fra 0 til 255 og med fargenavn på engelsk.
Når du lager et fargebilde, er hovedproblemet riktig gjengivelse av farger på forskjellige typer datamaskiner, skjermer og nettlesere. Hvis nettleseren ikke kan vise en farge riktig, velger den en lignende eller blander flere farger. Og noen ganger kan den erstattes med en helt annen farge.
Bord 16 primærfarger, som brukes i alle nettlesere
| Navn | Farge | Hex | (RGB) |
| Aqua (havbølge) | #00FFFF | (000,255,255) | |
| Svart | #000000 | (000,000,000) | |
| Blå | #0000FF | (000,000,255) | |
| Fuchsia (magenta) | #FF00FF | (255,000,255) | |
| Grå | #808080 | (128,128,128) | |
| Grønn | #008000 | (000,128,000) | |
| Lime (lysegrønn) | #00FF00 | (000,255,000) | |
| Rødbrun (mørk burgunder) | #800000 | (128,000,000) | |
| Marine (mørkeblå) | #000080 | (000,000,128) | |
| Oliven | #808000 | (128,128,000) | |
| Lilla | #800080 | (128,000,128) | |
| Rød (rød) | #FF0000 | (255,000,000) | |
| Sølv | #C0C0C0 | (192,192,192) | |
| Blågrønn (grågrønn) | #008080 | (000,128,128) | |
| Hvit | #FFFFFF | (255,255,255) | |
| Gul | #FFFF00 | (255,255,000) |
Bord lilla farger og dens nyanser
| Navn | Farge | Hex | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| Fuksia (fuksia) | #FF00FF | (255,000,255) | |
| Mauvein (anilin lilla) | #EF0097 | (239,000,151) | |
| Lakserosa (oransje rosa) | #FF91A4 | (255,145,164) | |
| Cenise (en nyanse av lilla) | #DE3163 | (153,149,140) | |
| Aubergine aubergine (aubergine) | #990066 | (153,000,132) | |
| Lavendel blush (rosa-lavendel) | #FFF0F5 | (255,240,245) | |
| syrin (syrin) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| Orkidé (orkide) | #DA70D6 | (218,112,214) | |
| Rød-fiolett (lilla-rød) | #C71585 | (199,021,133) | |
| Sanguine (sanguine) | #92000A | (146,000,010) | |
| Tistel (nyanse av lilla) | #D8BFD8 | (185,211,238) | |
| Fiolett-aubergine (en nyanse av lilla) | #991199 | (153,017,153) | |
| Rosa vivo (dyp rosa) | #FF007F | (255,000,127) | |
| Lavendel-rose (en nyanse av lilla) | #FBA0E3 | (108,123,139) | |
| Mountbatten rosa | #997ABD | (153,122,141) |
Bord grå farger og dens nyanser
| Navn | Farge | Hex | (RGB) |
| Grå | #808080 | (128,128,128) | |
| Grå | #bebebe | (190,190,190) | |
| (grå nyanse) | #858585 | (133,133,133) | |
| Grå33 | #545454 | (084,084,084) | |
| (Grå skifer) | #708090 | (112,128,144) | |
| (kvarts) | #99958с | (153,149,140) | |
| (Lysegrå) | #bbbbbb | (187,187,187) | |
| (Sølv) | #c0c0c0 | (192,192,192) | |
| (Grå-hvit) | #f0f0f0 | (240,240,240) | |
| (Abdel-Kerims skjegg) | #e0e0e0 | (224,224,224) | |
| Lysegrå (Lysegrå) | #d3d3d3 | (211,211,211) | |
| LightStateGray() | #778899 | (119,136,153) | |
| StateGray-1 (blek kornblomstblå1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (blek kornblomstblå2) | #b9d3ee | (185,211,238) | |
| StateGray3() | #9fb6cd | (159,182,205) | |
| StateGray4() | #6c7b8b | (108,123,139) |
I HTML kan farge spesifiseres på tre måter:
Angi en farge i HTML etter navnet
Noen farger kan spesifiseres ved navn, ved å bruke fargenavnet på engelsk som verdi. De vanligste søkeordene: svart, hvit, rød, grønn, blå osv.:
Tekstfarge – rød
De mest populære fargene i World Wide Web Consortium (W3C)-standarden:
| Farge | Navn | Farge | Navn | Farge | Navn | Farge | Navn |
|---|---|---|---|---|---|---|---|
| Svart | Grå | Sølv | Hvit | ||||
| Gul | Lime | Aqua | Fuchsia | ||||
| rød | Grønn | Blå | Lilla | ||||
| Rødbrun | Oliven | marinen | Blågrønn |
Eksempel på bruk av forskjellige fargenavn:
Eksempel: spesifisere en farge ved navn
- Prøv selv"
Overskrift på rød bakgrunn
Overskrift på oransje bakgrunn
Overskrift på lime bakgrunn
Hvit tekst på blå bakgrunn
Overskrift på rød bakgrunn
Overskrift på oransje bakgrunn
Overskrift på lime bakgrunn
Hvit tekst på blå bakgrunn
Spesifisere farge ved hjelp av RGB
Når du viser forskjellige farger på en skjerm, brukes RGB-paletten som grunnlag. Enhver farge oppnås ved å blande tre grunnleggende farger: R - rød, G - grønn, B - blå. Lysstyrken til hver farge er gitt av én byte og kan derfor ta verdier fra 0 til 255. For eksempel vises RGB(255,0,0) som rødt siden rød er satt til sin høyeste verdi (255) og resten er satt til 0 Du kan også angi fargen som en prosentandel. Hver parameter indikerer lysstyrkenivået til den tilsvarende fargen. For eksempel: verdiene rgb(127, 255, 127) og rgb(50%, 100%, 50%) vil sette den samme mellomgrønne fargen:
Eksempel: Spesifisere farge ved hjelp av RGB
- Prøv selv"
rgb(127, 255, 127)
rgb(50 %, 100 %, 50 %)
rgb(127, 255, 127)
rgb(50 %, 100 %, 50 %)
Sett farge etter heksadesimal verdi
Verdier R G B kan også spesifiseres med heksadesimale (HEX) fargeverdier i formen: #RRGGBB hvor RR (rød), GG (grønn) og BB (blå) er heksadesimale verdier fra 00 til FF (samme som desimal 0-255) ). Det heksadesimale systemet, i motsetning til desimalsystemet, er, som navnet antyder, basert på tallet 16. Det heksadesimale systemet bruker følgende tegn: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Her er tallene fra 10 til 15 erstattet med latinske bokstaver. Tall større enn 15 i det heksadesimale systemet er representert ved å kombinere to tegn til én verdi. For eksempel tilsvarer det høyeste tallet 255 i desimal den høyeste FF-verdien i heksadesimal. I motsetning til desimalsystemet, er et heksadesimalt tall innledet av et hash-symbol. # , for eksempel, #FF0000 vises som rødt fordi rødt er satt til sin høyeste verdi (FF) og resten av fargene er satt til minimumsverdien (00). Tegn etter hash-symbolet # Du kan skrive med både store og små bokstaver. Det heksadesimale systemet lar deg bruke den forkortede formen #rgb, hvor hvert tegn tilsvarer dobbel. Dermed bør oppføringen #f7O betraktes som #ff7700.
Eksempel: HEX-farge
- Prøv selv"
rød: #FF0000
grønn: #00FF00
blå: #0000FF
rød: #FF0000
grønn: #00FF00
blå: #0000FF
rød+grønn=gul: #FFFF00
rød+blå=lilla: #FF00FF
grønn+blå=cyan: #00FFFF
Liste over ofte brukte farger (navn, HEX og RGB):
| engelsk navn | Russisk navn | Prøve | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranth | Amaranth | #E52B50 | 229 | 43 | 80 | |
| Rav | Rav | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Blå grønn | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| Svart | Svart | #000000 | 0 | 0 | 0 | |
| Blå | Blå | #0000FF | 0 | 0 | 255 | |
| Bondi blå | Bondi strandvann | #0095B6 | 0 | 149 | 182 | |
| Messing | Messing | #B5A642 | 181 | 166 | 66 | |
| brun | brun | #964B00 | 150 | 75 | 0 | |
| Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
| Mørk vårgrønn | Mørk vårgrønn | #177245 | 23 | 114 | 69 | |
| Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
| Aubergine | Aubergine | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
| Gull | Gull | #FFD700 | 250 | 215 | 0 | |
| Grå | Grå | #808080 | 128 | 128 | 128 | |
| Grønn | Grønn | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| Lime | Lime | #CCFF00 | 204 | 255 | 0 | |
| Malakitt | Malakitt | #0BDA51 | 11 | 218 | 81 | |
| marinen | Mørke blå | #000080 | 0 | 0 | 128 | |
| Ohre | Oker | #CC7722 | 204 | 119 | 34 | |
| Oliven | Oliven | #808000 | 128 | 128 | 0 | |
| oransje | oransje | #FFA500 | 255 | 165 | 0 | |
| Fersken | Fersken | #FFE5B4 | 255 | 229 | 180 | |
| Gresskar | Gresskar | #FF7518 | 255 | 117 | 24 | |
| Lilla | Fiolett | #800080 | 128 | 0 | 128 | |
| rød | rød | #FF0000 | 255 | 0 | 0 | |
| Safran | Safran | #F4C430 | 244 | 196 | 48 | |
| Sjøgrønn | Grønt hav | #2E8B57 | 46 | 139 | 87 | |
| Sumpgrønn | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Blågrønn | Blå grønn | #008080 | 0 | 128 | 128 | |
| Ultramarin | Ultramarin | #120A8F | 18 | 10 | 143 | |
| Fiolett | Fiolett | #8B00FF | 139 | 0 | 255 | |
| Gul | Gul | #FFFF00 | 255 | 255 | 0 | |
Fargekoder (bakgrunn) etter metning og fargetone.
Tabell (palett) med farger html gir deg muligheten til selvstendig å velge tonen du trenger. Fargeverdien vises i tre formater: Hex, RGB og HSV.
- Hex består av tre to-tegns verdier i det heksadesimale tallsystemet. For eksempel: #ff00b3, der det første tallparet er rødt, det andre er grønt og det tredje er blått.
- RGB (RedGreenBlue) har formen "200.100.255", som indikerer mengden av den tilsvarende tonen (rød, grønn, blå) i den resulterende fargen.
- HSV (Hue, Saturation, Value - tone, saturation, value) - en fargemodell der koordinatene er:
- Nyanse - fargetone, kan variere fra 0° til 360°.
- Metning - metning, varierer fra 0-100 eller 0-1. Jo høyere denne parameteren er, jo "renere" er fargen, og det er derfor denne parameteren noen ganger kalles for fargerenhet. Og jo nærmere denne parameteren er null, jo nærmere er fargen nøytral grå.
- Verdi (fargeverdi) - setter lysstyrken, verdien kan også variere mellom 0-100 eller 0-1.
Skriv inn fargekode: GÅ
Liste over farger med navn
Tabellen viser de engelske fargenavnene (som kan brukes som verdier) som støttes av alle nettlesere og deres heksadesimale verdier. Alle fargene som er oppført er "trygge", noe som betyr at de vil vises like i alle nettlesere.
| Fargenavn | HEX | Farge |
|---|---|---|
| Svart | #000000 | |
| marinen | #000080 | |
| Mørke blå | #00008B | |
| Middels blå | #0000CD | |
| Blå | #0000FF | |
| Mørk grønn | #006400 | |
| Grønn | #008000 | |
| Blågrønn | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| Mørk turkis | #00CED1 | |
| MediumVårGrønn | #00FA9A | |
| Lime | #00FF00 | |
| Vårgrønn | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| Midnatt blå | #191970 | |
| DodgerBlue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| Skoggrønn | #228B22 | |
| Sjøgrønn | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| Lime grønn | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turkis | #40E0D0 | |
| Kongeblå | #4169E1 | |
| Stålblå | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| Middels turkis | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| Kadettblå | #5F9EA0 | |
| Kornblomst Blå | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| Dimgrå | #696969 | |
| Skiferblå | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| Skifergrå | #708090 | |
| Lys Skifergrå | #778899 | |
| MediumSlateBlå | #7B68EE | |
| Plengrønn | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Akvamarin | #7FFFD4 | |
| Rødbrun | #800000 | |
| Lilla | #800080 | |
| Oliven | #808000 | |
| Grå | #808080 | |
| Himmelblå | #87CEEB | |
| LysHimmelblå | #87CEFA | |
| Blå fiolett | #8A2BE2 | |
| Mørkerød | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| Lysegrønn | #90EE90 | |
| Middels Lilla | #9370D8 | |
| Mørkfiolett | #9400D3 | |
| Blek grønn | #98FB98 | |
| DarkOrchid | #9932CC | |
| Gul-grønn | #9ACD32 | |
| Sienna | #A0522D | |
| brun | #A52A2A | |
| Mørkegrå | #A9A9A9 | |
| Lyse blå | #ADD8E6 | |
| Grønn gul | #ADFF2F | |
| Blek turkis | #AFEEEE | |
| Lys stålblå | #B0C4DE | |
| Pulver blå | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| MediumOrchid | #BA55D3 | |
| Rosebrunt | #BC8F8F | |
| Mørk kaki | #BDB76B | |
| Sølv | #C0C0C0 | |
| Mediumfiolettrød | #C71585 | |
| Indisk rød | #CD5C5C | |
| Peru | #CD853F | |
| Sjokolade | #D2691E | |
| Tan | #D2B48C | |
| Lysegrå | #D3D3D3 | |
| Blekfiolettrød | #D87093 | |
| Tistel | #D8BFD8 | |
| Orkidé | #DA70D6 | |
| GoldenRod | #DAA520 | |
| Høyrød | #DC143C | |
| Gainsboro | #DCDCDC | |
| Plomme | #DDA0DD | |
| BurlyWood | #DEB887 | |
| Lyscyan | #E0FFFF | |
| Lavendel | #E6E6FA | |
| DarkSalmon | #E9967A | |
| Fiolett | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Kaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| Honning dugg | #F0FFF0 | |
| Azure | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Hvete | #F5DEB3 | |
| Beige | #F5F5DC | |
| WhiteSmoke | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Laks | #FA8072 | |
| AntikkHvit | #FAEBD7 | |
| Sengetøy | #FAF0E6 | |
| Lys GyldenRodGul | #FAFAD2 | |
| OldLace | #FDF5E6 | |
| rød | #FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| DeepPink | #FF1493 | |
| Oransje rød | #FF4500 | |
| Tomat | #FF6347 | |
| HotPink | #FF69B4 | |
| Korall | #FF7F50 | |
| Mørk oransje | #FF8C00 | |
| Lyslaks | #FFA07A | |
| oransje | #FFA500 | |
| Lyserosa | #FFB6C1 | |
| Rosa | #FFC0CB | |
| Gull | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoHvit | #FFDEAD | |
| Mokkasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| Blanchert mandel | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| Lavendelblush | #FFF0F5 | |
| SeaShell | #FFF5EE | |
| Mais silke | #FFF8DC | |
| SitronChiffon | #FFFACD | |
| Blomsterhvit | #FFFFAF0 | |
| Snø | #FFFAFA | |
| Gul | #FFFF00 | |
| Lys gul | #FFFFE0 | |
| elfenbein | #FFFFFF0 | |
| Hvit | #FFFFFF |
