Syrin kode. HTML-opplæring. RGB-farger. Trygge palettfarger. CSS-farger - RGB-verdier
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, desto "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 | |
| Middels Vårgrønn | #00FA9A | |
| Lime | #00FF00 | |
| Vårgrønn | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| Midnatt blå | #191970 | |
| Dodger Blue | #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 | |
| MørkSlateBlue | #483D8B | |
| Middels turkis | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| Kadettblå | #5F9EA0 | |
| Kornblomst Blå | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #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 |
HTML-farger er angitt med seks tegn etter skråstrek - for eksempel #000000. Disse seks symbolene representerer proporsjonene til de forskjellige fargene (rød, grønn, blå) i den endelige fargen. På dataskjermen din er bildet dannet av et stort antall punkter kalt piksler. Hver piksel er en liten lyskilde, la oss kalle den en «lommelykt», som igjen består av tre lommelykter – røde, grønne og blå. Ved å redusere eller øke intensiteten av gløden til individuelle fargede lommelykter, oppnår vi ønsket farge.
HTML fargekoder
Farger i HTML er representert med en heksadesimal (HEX) notasjon av rød, blå og grønn (RGB).
Den minste fargeverdien er 0 (heksadesimal 00). Den høyeste fargeverdien er 255 (hex FF).
Den heksadesimale fargeverdien er tre sifre som begynner med #-tegnet.
Fargekoder (betydninger)
| Farge | HEX-kode | RGB-kode |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255;0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255;0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
16 millioner nyanser
Å kombinere rødt, blått og grønt med verdier fra 0 til 255 for prosentandelen av hver farge resulterer i totalt over 16 millioner nyanser (256 x 256 x 256).
De fleste moderne skjermer er i stand til å vise minst 16 384 forskjellige nyanser (LCD-skjermer er generelt i stand til å vise 262 tusen 16 millioner (oppdatert oktober 2013) farger, og CRT-skjermer kan vise et praktisk talt ubegrenset antall farger).
Fargetabellen nedenfor viser endringen i andelen rødt fra 0 til 255 med nullverdier for blått og grønt:
| rød | HEX-kode | RGB-kode |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40;0;0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56;0,0) | |
| #400000 | rgb(64;0,0) | |
| #480000 | rgb(72;0;0) | |
| #500000 | rgb(80;0;0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96;0,0) | |
| #680000 | rgb(104;0,0) | |
| #700000 | rgb(112;0;0) | |
| #780000 | rgb(120;0;0) | |
| #800000 | rgb(128;0,0) | |
| #880000 | rgb(136;0,0) | |
| #900000 | rgb(144;0,0) | |
| #980000 | rgb(152;0;0) | |
| #A00000 | rgb(160;0;0) | |
| #A80000 | rgb(168;0,0) | |
| #B00000 | rgb(176;0,0) | |
| #B80000 | rgb(184;0,0) | |
| #C00000 | rgb(192;0,0) | |
| #C80000 | rgb(200;0;0) | |
| #D00000 | rgb(208;0,0) | |
| #D80000 | rgb(216;0,0) | |
| #E00000 | rgb(224;0,0) | |
| #E80000 | rgb(232;0,0) | |
| #F00000 | rgb(240;0;0) | |
| #F80000 | rgb(248;0,0) | |
| #FF0000 | rgb(255;0,0) |
Nyanser av grå
For å få nyanser av grått, brukes like deler av alle farger. For å gjøre det lettere for deg å velge riktig farge, gir vi deg grå nyansekoder
| Nyanser av grå | HEX-kode | RGB-kode |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16;16;16) | |
| #181818 | rgb(24;24;24) | |
| #202020 | rgb(32;32;32) | |
| #282828 | rgb(40;40;40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56;56;56) | |
| #404040 | rgb(64;64;64) | |
| #484848 | rgb(72;72;72) | |
| #505050 | rgb(80;80;80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) |
Kryss-nettlesere (alle nettlesere) html fargenavn
En samling av 150 fargenavn i html, støttet i alle nettlesere.
Standardiserte fargenavn
W3C viser 16 gyldige fargenavn for HTML og CSS: aqua, svart, blå, fuchsia, grå, grønn, lime, rødbrun (kastanje), marine (ultramarin), oliven (oliven), lilla (lilla), rød (rød) , sølv (sølv), blågrønn (grå), hvit (hvit) og gul (gul).
Når du bruker farger som ikke er inkludert i denne listen, er det mer riktig å bruke deres heksadesimale (HEX) kode eller RGB-kode.
Trygge farger
For flere år siden, da datamaskiner kunne støtte maksimalt 256 forskjellige farger, ble det foreslått en liste med 216 "Web Safe Colors", med 40 farger reservert for systemet.
Denne paletten med 216 farger ble laget for å vise farger på riktig måte i 256-fargers palettmodus.
Nå spiller det ingen rolle fordi de fleste datamaskiner over hele verden støtter millioner av fargenyanser. I alle fall, her er en liste over disse fargene:
| 000000 | 000033 | 000066 | 000099 | 0000 CC | 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 |
For html-sider er farger angitt hovedsakelig i det heksadesimale systemet. For å gjøre dette brukes to typer kodeopptak - full eller forkortet. For å angi html-fargen i sin helhet, må du skrive seks tegn (tall og/eller engelske bokstaver) etter hash-merket, for eksempel skrives svart slik: #000000. Stenografien for å spesifisere html-farger består av en hash og tre tall og/eller bokstaver bak. Imidlertid kan denne typen aksjer bare brukes hvis den fullstendige posten for en gitt farge består av identiske symboler etter hash-merket. For eksempel kan den samme sorte fargen skrives slik: #000. Du kan spesifisere html-farger med både store og små tegn, siden de ikke skiller mellom store og små bokstaver.
Hvert tegn skrevet etter "#" tilsvarer en viss andel av fargene rød, grønn og blå. På sin side består alle monitorer av et stort antall piksler (mikroskopiske prikker), som hver inkluderer 3 såkalte "lommelykter" (lyskilder): rød, grønn og blå. Deretter, ved å justere intensiteten på lyset som sendes ut av disse "lommelyktene", viser skjermen fargen vi trenger.
Ved å kombinere emisjonsintensiteten til rødt, blått og grønt lys (fra 0 til 256), kan monitorer vise 16 000 000 forskjellige nyanser.
Farger for nettsteder kan også angis verbalt eller i RGB-kode.
I dag kan 147 farger skrives muntlig. Det er viktig å vite at noen forskjellige navn kan bety de samme fargene, for eksempel er Grå og Grå fargen grå (#808080).
Trygge farger for nettsider.
Ikke alle skjermer og nettlesere kan vise alle 16 millioner html-farger på riktig måte.
Hvis du for eksempel kommer over en farge som nettleseren ikke kan vise riktig, så:
- Nettleseren erstatter den med den som ligner mest på den og kan reproduseres med hell;
- For å vise riktig kan nettleseren blande flere farger og gjengi resultatet.
For å sikre at utdataene i en hvilken som helst nettleser og på hvilken som helst skjerm er fargen du spesifiserte i koden, anbefales det å bruke "Safe Colors". De ble bestemt ikke manuelt eller av andres ønske, men matematisk. Det er 216 slike 100 % sikre farger for HTML-dokumenter. Og selv om dagens teknologier har nådd det punktet der moderne skjermer og nettlesere gjenkjenner millioner av nyanser, anbefaler vi å bruke disse sikre fargene for å garantere fargegjengivelse.
| Heksadesimalt fargesystem. | Fargekoder i RGB (rød, grønn, blå). |
| HTML fargekode: #000000 | RGB-farge: 0 0 0 |
| HTML fargekode: #333333 | RGB-farge: 51 51 51 |
| HTML fargekode: #666666 | RGB-farge: 102 102 102 |
| HTML fargekode: #999999 | RGB-farge: 153 153 153 |
| HTML fargekode: #CCCCCC | RGB-farge: 204 204 204 |
| HTML fargekode: #FFFFFF | RGB-farge: 255 255 255 |
| HTML fargekode: #666600 | RGB-farge: 102 102 0 |
| HTML fargekode: #999900 | RGB-farge: 153 153 0 |
| HTML fargekode: #999933 | RGB-farge: 153 153 51 |
| HTML fargekode: #999966 | RGB-farge: 153 153 102 |
| HTML fargekode: #CCCC33 | RGB-farge: 204 204 51 |
| HTML fargekode: #CCCC66 | RGB-farge: 204 204 102 |
| HTML fargekode: #333300 | RGB-farge: 51 51 0 |
| HTML fargekode: #666633 | RGB-farge: 102 102 51 |
| HTML fargekode: #CCCC99 | RGB-farge: 204 204 153 |
| HTML fargekode: #CCFF33 | RGB-farge: 204 255 51 |
| HTML fargekode: #CCFF00 | RGB-farge: 204 255 0 |
| HTML fargekode: #CCFF66 | RGB-farge: 204 255 102 |
| HTML fargekode: #669900 | RGB-farge: 102 153 0 |
| HTML fargekode: #99CC33 | RGB-farge: 153 204 51 |
| HTML fargekode: #99CC00 | RGB-farge: 153 204 0 |
| HTML fargekode: #99CC66 | RGB-farge: 153 204 102 |
| HTML fargekode: #99FF33 | RGB-farge: 153 255 51 |
| HTML fargekode: #99FF00 | RGB-farge: 153 255 0 |
| HTML fargekode: #336600 | RGB-farge: 51 102 0 |
| HTML fargekode: #669933 | RGB-farge: 102 153 51 |
| HTML fargekode: #66CC33 | RGB-farge: 102 204 51 |
| HTML fargekode: #66CC00 | RGB-farge: 102 204 0 |
| HTML fargekode: #99FF66 | RGB-farge: 153 255 102 |
| HTML fargekode: #CCFF99 | RGB-farge: 204 255 153 |
| HTML fargekode: #009900 | RGB-farge: 0 153 0 |
| HTML fargekode: #339900 | RGB-farge: 51 153 0 |
| HTML fargekode: #33CC00 | RGB-farge: 51 204 0 |
| HTML fargekode: #33FF00 | RGB-farge: 51 255 0 |
| HTML fargekode: #66FF33 | RGB-farge: 102 255 51 |
| HTML fargekode: #66FF00 | RGB-farge: 102 255 0 |
| HTML fargekode: #00CC33 | RGB-farge: 0 204 51 |
| HTML fargekode: #33CC33 | RGB-farge: 51 204 51 |
| HTML fargekode: #00CC00 | RGB-farge: 0 204 0 |
| HTML fargekode: #00FF00 | RGB-farge: 0 255 0 |
| HTML fargekode: #00FF33 | RGB-farge: 0 255 51 |
| HTML fargekode: #33FF33 | RGB-farge: 51 255 51 |
| HTML fargekode: #003300 | RGB-farge: 0 51 0 |
| HTML fargekode: #336633 | RGB-farge: 51 102 51 |
| HTML fargekode: #669966 | RGB-farge: 102 153 102 |
| HTML fargekode: #66CC66 | RGB-farge: 102 204 102 |
| HTML fargekode: #99CC99 | RGB-farge: 153 204 153 |
| HTML fargekode: #CCFFCC | RGB-farge: 204 255 204 |
| HTML fargekode: #006600 | RGB-farge: 0 102 0 |
| HTML fargekode: #339933 | RGB-farge: 51 153 51 |
| HTML fargekode: #00FF66 | RGB-farge: 0 255 102 |
| HTML fargekode: #33FF66 | RGB-farge: 51 255 102 |
| HTML fargekode: #66FF66 | RGB-farge: 102 255 102 |
| HTML fargekode: #99FF99 | RGB-farge: 153 255 153 |
| HTML fargekode: #009933 | RGB-farge: 0 153 51 |
| HTML fargekode: #00CC66 | RGB-farge: 0 204 102 |
| HTML fargekode: #33CC66 | RGB-farge: 51 204 102 |
| HTML fargekode: #00FF99 | RGB-farge: 0 255 153 |
| HTML fargekode: #33FF99 | RGB-farge: 51 255 153 |
| HTML fargekode: #66FF99 | RGB-farge: 102 255 153 |
| HTML fargekode: #006633 | RGB-farge: 0 102 51 |
| HTML fargekode: #009966 | RGB-farge: 0 153 102 |
| HTML fargekode: #339966 | RGB-farge: 51 153 102 |
| HTML fargekode: #00CC99 | RGB-farge: 0 204 153 |
| HTML fargekode: #33CC99 | RGB-farge: 51 204 153 |
| HTML fargekode: #66CC99 | RGB-farge: 102 204 153 |
| HTML fargekode: #009999 | RGB-farge: 0 153 153 |
| HTML fargekode: #33CCCC | RGB-farge: 51 204 204 |
| HTML fargekode: #00FFCC | RGB-farge: 0 255 204 |
| HTML fargekode: #33FFCC | RGB-farge: 51 255 204 |
| HTML fargekode: #66FFCC | RGB-farge: 102 255 204 |
| HTML fargekode: #99FFCC | RGB-farge: 153 255 204 |
| HTML fargekode: #00CCCC | RGB-farge: 0 204 204 |
| HTML fargekode: #00FFFF | RGB-farge: 0 255 255 |
| HTML fargekode: #33FFFF | RGB-farge: 51 255 255 |
| HTML fargekode: #66FFFF | RGB-farge: 102 255 255 |
| HTML fargekode: #99FFFF | RGB-farge: 153 255 255 |
| HTML fargekode: #CCFFFF | RGB-farge: 204 255 255 |
| HTML fargekode: #336666 | RGB-farge: 51 102 102 |
| HTML fargekode: #006666 | RGB-farge: 0 102 102 |
| HTML fargekode: #669999 | RGB-farge: 102 153 153 |
| HTML fargekode: #339999 | RGB-farge: 51 153 153 |
| HTML fargekode: #66CCCC | RGB-farge: 102 204 204 |
| HTML fargekode: #99CCCC | RGB-farge: 153 204 204 |
| HTML fargekode: #003333 | RGB-farge: 0 51 51 |
| HTML fargekode: #0099CC | RGB-farge: 0 153 204 |
| HTML fargekode: #3399CC | RGB-farge: 51 153 204 |
| HTML fargekode: #00CCFF | RGB-farge: 0 204 255 |
| HTML fargekode: #33CCFF | RGB-farge: 51 204 255 |
| HTML fargekode: #66CCFF | RGB-farge: 102 204 255 |
| HTML fargekode: #006699 | RGB-farge: 0 102 153 |
| HTML fargekode: #336699 | RGB-farge: 51 102 153 |
| HTML fargekode: #6699CC | RGB-farge: 102 153 204 |
| HTML fargekode: #0099FF | RGB-farge: 0 153 255 |
| HTML fargekode: #3399FF | RGB-farge: 51 153 255 |
| HTML fargekode: #99CCFF | RGB-farge: 153 204 255 |
| HTML fargekode: #003366 | RGB-farge: 0 51 102 |
| HTML fargekode: #003399 | RGB-farge: 0 51 153 |
| HTML fargekode: #0033FF | RGB-farge: 0 51 255 |
| HTML fargekode: #3366CC | RGB-farge: 51 102 204 |
| HTML fargekode: #0066CC | RGB-farge: 0 102 204 |
| HTML fargekode: #0066FF | RGB-farge: 0 102 255 |
| HTML fargekode: #000033 | RGB-farge: 0 0 51 |
| HTML fargekode: #0033CC | RGB-farge: 0 51 204 |
| HTML fargekode: #0000CC | RGB-farge: 0 0 204 |
| HTML fargekode: #0000FF | RGB-farge: 0 0 255 |
| HTML fargekode: #3366FF | RGB-farge: 51 102 255 |
| HTML fargekode: #6699FF | RGB-farge: 102 153 255 |
| HTML fargekode: #000066 | RGB-farge: 0 0 102 |
| HTML fargekode: #000099 | RGB-farge: 0 0 153 |
| HTML fargekode: #3333CC | RGB-farge: 51 51 204 |
| HTML fargekode: #3300CC | RGB-farge: 51 0 204 |
| HTML fargekode: #3300FF | RGB-farge: 51 0 255 |
| HTML fargekode: #3333FF | RGB-farge: 51 51 255 |
| HTML fargekode: #333366 | RGB-farge: 51 51 102 |
| HTML fargekode: #333399 | RGB-farge: 51 51 153 |
| HTML fargekode: #666699 | RGB-farge: 102 102 153 |
| HTML fargekode: #6666CC | RGB-farge: 102 102 204 |
| HTML fargekode: #6666FF | RGB-farge: 102 102 255 |
| HTML fargekode: #9999CC | RGB-farge: 153 153 204 |
| HTML fargekode: #330066 | RGB-farge: 51 0 102 |
| HTML fargekode: #330099 | RGB-farge: 51 0 153 |
| HTML fargekode: #6600FF | RGB-farge: 102 0 255 |
| HTML fargekode: #6633FF | RGB-farge: 102 51 255 |
| HTML fargekode: #9999FF | RGB-farge: 153 153 255 |
| HTML fargekode: #CCCCFF | RGB-farge: 204 204 255 |
| HTML fargekode: #330033 | RGB-farge: 51 0 51 |
| HTML fargekode: #663399 | RGB-farge: 102 51 153 |
| HTML fargekode: #6633CC | RGB-farge: 102 51 204 |
| HTML fargekode: #6600CC | RGB-farge: 102 0 204 |
| HTML fargekode: #9966FF | RGB-farge: 153 102 255 |
| HTML fargekode: #9966CC | RGB-farge: 153 102 204 |
| HTML fargekode: #663366 | RGB-farge: 102 51 102 |
| HTML fargekode: #660099 | RGB-farge: 102 0 153 |
| HTML fargekode: #9900FF | RGB-farge: 153 0 255 |
| HTML fargekode: #9933FF | RGB-farge: 153 51 255 |
| HTML fargekode: #9933CC | RGB-farge: 153 51 204 |
| HTML fargekode: #CC99FF | RGB-farge: 204 153 255 |
| HTML fargekode: #660066 | RGB-farge: 102 0 102 |
| HTML fargekode: #996699 | RGB-farge: 153 102 153 |
| HTML fargekode: #9900CC | RGB-farge: 153 0 204 |
| HTML fargekode: #CC00FF | RGB-farge: 204 0 255 |
| HTML fargekode: #CC33FF | RGB-farge: 204 51 255 |
| HTML fargekode: #CC66FF | RGB-farge: 204 102 255 |
| HTML fargekode: #993399 | RGB-farge: 153 51 153 |
| HTML fargekode: #990099 | RGB-farge: 153 0 153 |
| HTML fargekode: #CC33CC | RGB-farge: 204 51 204 |
| HTML fargekode: #CC00CC | RGB-farge: 204 0 204 |
| HTML fargekode: #CC66CC | RGB-farge: 204 102 204 |
| HTML fargekode: #CC99CC | RGB-farge: 204 153 204 |
| HTML fargekode: #CC3399 | RGB-farge: 204 51 153 |
| HTML fargekode: #FF00FF | RGB-farge: 255 0 255 |
| HTML fargekode: #FF33FF | RGB-farge: 255 51 255 |
| HTML fargekode: #FF66FF | RGB-farge: 255 102 255 |
| HTML fargekode: #FF99FF | RGB-farge: 255 153 255 |
| HTML fargekode: #FFCCFF | RGB-farge: 255 204 255 |
| HTML fargekode: #990066 | RGB-farge: 153 0 102 |
| HTML fargekode: #CC0099 | RGB-farge: 204 0 153 |
| HTML fargekode: #CC6699 | RGB-farge: 204 102 153 |
| HTML fargekode: #FF33CC | RGB-farge: 255 51 204 |
| HTML fargekode: #FF00CC | RGB-farge: 255 0 204 |
| HTML fargekode: #FF66CC | RGB-farge: 255 102 204 |
| HTML fargekode: #660033 | RGB-farge: 102 0 51 |
| HTML fargekode: #993366 | RGB-farge: 153 51 102 |
| HTML fargekode: #CC0066 | RGB-farge: 204 0 102 |
| HTML fargekode: #FF0099 | RGB-farge: 255 0 153 |
| HTML fargekode: #FF3399 | RGB-farge: 255 51 153 |
| HTML fargekode: #FF99CC | RGB-farge: 255 153 204 |
| HTML fargekode: #663333 | RGB-farge: 102 51 51 |
| HTML fargekode: #996666 | RGB-farge: 153 102 102 |
| HTML fargekode: #CC3366 | RGB-farge: 204 51 102 |
| HTML fargekode: #FF0066 | RGB-farge: 255 0 102 |
| HTML fargekode: #FF3366 | RGB-farge: 255 51 102 |
| HTML fargekode: #FF6699 | RGB-farge: 255 102 153 |
| HTML fargekode: #330000 | RGB-farge: 51 0 0 |
| HTML fargekode: #990033 | RGB-farge: 153 0 51 |
| HTML fargekode: #993333 | RGB-farge: 153 51 51 |
| HTML fargekode: #CC3333 | RGB-farge: 204 51 51 |
| HTML fargekode: #CC6666 | RGB-farge: 204 102 102 |
| HTML fargekode: #CC9999 | RGB-farge: 204 153 153 |
| HTML fargekode: #CC0033 | RGB-farge: 204 0 51 |
| HTML fargekode: #FF0033 | RGB-farge: 255 0 51 |
| HTML fargekode: #FF3333 | RGB-farge: 255 51 51 |
| HTML fargekode: #FF6666 | RGB-farge: 255 102 102 |
| HTML fargekode: #FF9999 | RGB-farge: 255 153 153 |
| HTML fargekode: #FFCCCC | RGB-farge: 255 204 204 |
| HTML fargekode: #990000 | RGB-farge: 153 0 0 |
| HTML fargekode: #CC0000 | RGB-farge: 204 0 0 |
| HTML fargekode: #FF0000 | RGB-farge: 255 0 0 |
| HTML fargekode: #FF3300 | RGB-farge: 255 51 0 |
| HTML fargekode: #CC3300 | RGB-farge: 204 51 0 |
| HTML fargekode: #FF6633 | RGB-farge: 255 102 51 |
| HTML fargekode: #660000 | RGB-farge: 102 0 0 |
| HTML fargekode: #993300 | RGB-farge: 153 51 0 |
| HTML fargekode: #CC6633 | RGB-farge: 204 102 51 |
| HTML fargekode: #FF6600 | RGB-farge: 255 102 0 |
| HTML fargekode: #FF9966 | RGB-farge: 255 153 102 |
| HTML fargekode: #FFCC99 | RGB-farge: 255 204 153 |
| HTML fargekode: #663300 | RGB-farge: 102 51 0 |
| HTML fargekode: #996633 | RGB-farge: 153 102 51 |
| HTML fargekode: #CC6600 | RGB-farge: 204 102 0 |
| HTML fargekode: #CC9966 | RGB-farge: 204 153 102 |
| HTML fargekode: #FF9933 | RGB-farge: 255 153 51 |
| HTML fargekode: #FF9900 | RGB-farge: 255 153 0 |
| HTML fargekode: #996600 | RGB-farge: 153 102 0 |
| HTML fargekode: #CC9933 | RGB-farge: 204 153 51 |
| HTML fargekode: #CC9900 | RGB-farge: 204 153 0 |
| HTML fargekode: #FFCC33 | RGB-farge: 255 204 51 |
| HTML fargekode: #FFCC00 | RGB-farge: 255 204 0 |
| HTML fargekode: #FFCC66 | RGB-farge: 255 204 102 |
| HTML-fargekode: #CCCC00 | RGB-farge: 204 204 0 |
| HTML fargekode: #FFFF00 | RGB-farge: 255 255 0 |
| HTML fargekode: #FFFF33 | RGB-farge: 255 255 51 |
| HTML fargekode: #FFFF66 | RGB-farge: 255 255 102 |
| HTML fargekode: #FFFF99 | RGB-farge: 255 255 153 |
| HTML fargekode: #FFFFCC | RGB-farge: 255 255 204 |
Denne tabellen inneholder 216 sikre html-fargekoder. Hver farge har en verdi i RGB for å spesifisere farge i grafiske editorer og HEX for å spesifisere farge i HTML-sider.
Heksadesimale tall brukes til å spesifisere farger. Det heksadesimale systemet, i motsetning til desimalsystemet, er, som navnet antyder, basert på tallet 16. Tallene vil være som følger: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Tall fra 10 til 15 erstattes av latinske bokstaver. Tall større enn 15 i det heksadesimale systemet dannes ved å kombinere to tall til ett. For eksempel tilsvarer tallet 255 i desimal tallet FF i heksadesimalt. For å unngå forvirring ved å bestemme tallsystemet, plasseres et hash-symbol # foran det heksadesimale tallet, for eksempel #666999. Hver av de tre fargene - rød, grønn og blå - kan ha verdier fra 00 til FF. Dermed er fargesymbolet delt inn i tre komponenter #rrggbb, der de to første symbolene indikerer den røde komponenten i fargen, de to midterste - grønn, og de to siste - blå. Det er lov å bruke den forkortede formen #rgb, hvor hvert tegn skal dobles. Dermed bør oppføringen #fe0 betraktes som #ffee00.
Ved navn
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Nettlesere støtter enkelte farger etter navn. I tabellen 1 viser navn, heksadesimal kode, RGB, HSL verdier og beskrivelse.
| Navn | Farge | Kode | RGB | HSL | Beskrivelse |
|---|---|---|---|---|---|
| hvit | #ffffff eller #fff | rgb(255,255,255) | hsl(0,0 %, 100 %) | Hvit | |
| sølv | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Grå | |
| grå | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Mørk grå | |
| 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ørkerød | |
| rød | #ff0000 eller #f00 | rgb(255;0,0) | hsl(0,100%,50%) | rød | |
| oransje | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | oransje | |
| gul | #ffff00 eller #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Gul | |
| oliven | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Oliven | |
| lime | #00ff00 eller #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Lysegrønn | |
| grønn | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Grønn | |
| 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å | |
| marinen | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Mørke blå | |
| blågrønn | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blå grønn | |
| fuchsia | #ff00ff eller #f0f | rgb(255;0,255) | hsl(300,100%,50%) | Rosa | |
| lilla | #800080 | rgb(128;0;128) | hsl(300,100%,25%) | Fiolett |
Bruker RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Du kan definere farge ved å bruke de røde, grønne og blå verdiene i desimaler. Hver av de tre fargekomponentene har en verdi fra 0 til 255. Det er også tillatt å spesifisere fargen som en prosentandel, med 100 % tilsvarende tallet 255. Angi først nøkkelordet rgb, og spesifiser deretter fargekomponentene i parentes , atskilt med kommaer, for eksempel rgb(255 , 128, 128) eller rgb(100 %, 50 %, 50 %).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA-formatet ligner syntaks på RGB, men inkluderer en alfakanal som spesifiserer gjennomsiktigheten til elementet. En verdi på 0 er helt gjennomsiktig, 1 er ugjennomsiktig, og en mellomverdi som 0,5 er halvgjennomsiktig.
RGBA ble lagt til CSS3, så CSS-koden må valideres mot denne versjonen. Det skal bemerkes at CSS3-standarden fortsatt er under utvikling og noen funksjoner kan endres. For eksempel valideres en farge i RGB-format som er lagt til bakgrunnsfargeegenskapen, men en farge som legges til bakgrunnsegenskapen er ikke lenger gyldig. Samtidig forstår nettlesere helt riktig fargen for begge egenskapene.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Navnet på HSL-formatet er avledet fra kombinasjonen av de første bokstavene Hue (hue), Saturate (metning) og Lightness (lightness). Hue er fargeverdien på fargehjulet (fig. 1) og er gitt i grader. 0° tilsvarer rødt, 120° til grønt og 240° til blått. Fargeverdien kan variere fra 0 til 359.
Ris. 1. Fargehjul
Metning er intensiteten til en farge og måles som en prosentandel fra 0 % til 100 %. En verdi på 0 % indikerer ingen farge og en grå nyanse, 100 % er maksimumsverdien for metning.
Lyshet angir hvor lys fargen er og angis som en prosentandel fra 0 % til 100 %. Lave verdier gjør fargen mørkere, og høye verdier gjør fargen lysere; ekstreme verdier på 0% og 100% tilsvarer svart og hvitt.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA-formatet ligner syntaks på HSL, men inkluderer en alfakanal for å spesifisere elementets gjennomsiktighet. En verdi på 0 er helt gjennomsiktig, 1 er ugjennomsiktig, og en mellomverdi som 0,5 er halvgjennomsiktig.
RGBA-, HSL- og HSLA-fargeverdier legges til CSS3, så sjekk koden din for versjonsgyldighet når du bruker disse formatene.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Advarsel
Alle løvefangstmetoder som er oppført på nettstedet er teoretiske og basert på beregningsmetoder. Forfatterne garanterer ikke din sikkerhet når du bruker dem og fraskriver seg ethvert ansvar for resultatene. Husk at en løve er et rovdyr og et farlig dyr!
Resultatet av dette eksemplet er vist i fig. 2.
Ris. 2. Farger på nettsiden
Det er flere måter å representere farger på i webdesign.
HEX er et heksadesimalt system for å representere farger i 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 | #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 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 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) |
