Grønn farge hex. HTML opplæring
Vlad Merzhevich
I HTML er farge satt på en av to måter: ved å bruke heksadesimal kode og ved navn på noen blomster. Metoden basert på det heksadesimale tallsystemet brukes overveiende, da den er den mest universelle.
Heksadesimale farger
HTML bruker heksadesimale tall for å 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. Tallene 10 til 15 erstattes med latinske bokstaver. I tabellen 6.1 viser samsvaret mellom desimaltall og heksadesimaltall.
Tall større enn 15 i det heksadesimale systemet dannes ved å kombinere to tall til ett (tabell 6.2). For eksempel tallet 255 tommer desimalsystem tilsvarer tallet FF i heksadesimal.
For å unngå forvirring når det gjelder å definere tallsystemet, er et heksadesimalt tall innledet med et hash-symbol #, for eksempel #aa69cc. I dette tilfellet spiller saken ingen rolle, så det er tillatt å skrive #F0F0F0 eller #f0f0f0.
En typisk farge brukt i HTML ser slik ut.
Her er bakgrunnsfargen på nettsiden satt til #FA8E47. Hash-symbolet # foran et tall betyr at det er heksadesimalt. De to første sifrene (FA) definerer den røde komponenten i fargen, de tredje til og med fjerde sifrene (8E) definerer den grønne komponenten, og de to siste sifrene (47) definerer den blå komponenten. Sluttresultatet blir denne fargen.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Hver av de tre fargene - rød, grønn og blå - kan ha verdier fra 00 til FF, noe som resulterer i totalt 256 nyanser. Dermed kan det totale antallet farger være 256x256x256 = 16 777 216 kombinasjoner. En fargemodell basert på røde, grønne og blå komponenter kalles RGB (rød, grønn, blå; rød, grønn, blå). Denne modellen er additiv (fra add - add), der tillegg av alle tre komponentene dannes hvit farge.
For å gjøre det lettere å navigere i heksadesimale farger, ta hensyn til noen regler.
- Hvis verdiene til fargekomponentene er de samme (for eksempel: #D6D6D6), blir resultatet grå nyanse. Hvordan større antall, jo lysere fargen er, med verdier fra #000000 (svart) til #FFFFFF (hvit).
- En lys rød farge dannes hvis den røde komponenten gjøres maksimal (FF) og de resterende komponentene settes til null. En farge med en verdi på #FF0000 er den rødest mulige røde nyansen. Situasjonen er lik med grønn(#00FF00) og blå (#0000FF).
- Gul (#FFFF00) lages ved å blande rødt og grønt. Dette er godt synlig på fargehjul(Fig. 6.1), som presenterer primærfargene (rød, grønn, blå) og komplementære eller tilleggsfarger. Disse inkluderer gul, cyan og fiolett (også kalt magenta). Generelt kan enhver farge oppnås ved å blande farger nær den. Dermed oppnås cyan (#00FFFF) ved å kombinere blått og grønt.
Ris. 6.1. Fargesirkel
Farger basert på heksadesimale verdier trenger ikke å velges empirisk. Egnet for dette formålet grafikk editor, i stand til å jobbe med forskjellige fargemodeller, for eksempel, Adobe Photoshop. I fig. Figur 6.2 viser vinduet for valg av farge i dette programmet. Den resulterende heksadesimale verdien for gjeldende farge er skissert med en linje. Du kan kopiere og lime den inn i koden din.
Ris. 6.2. Vindu for valg av farger i Photoshop program
Nettfarger
Hvis du setter skjermens fargegjengivelseskvalitet til 8 biter (256 farger), kan den samme fargen vises i forskjellige nettlesere på min egen måte. Dette er på grunn av måten grafikk vises på, når nettleseren jobber med sin egen palett og ikke kan vise en farge som ikke er i paletten. I dette tilfellet erstattes fargen med en kombinasjon av piksler av andre, nær den, farger som imiterer den gitte. For å sikre at fargen forblir den samme på tvers av ulike nettlesere, ble en palett med såkalte nettfarger introdusert. Nettfarger er de fargene som hver komponent - rød, grønn og blå - er satt til en av seks verdier - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) 255 (FF). Den heksadesimale verdien til denne komponenten er angitt i parentes. Totalt antall farger fra alle mulige kombinasjoner gir 6x6x6 - 216 farger. Et eksempel på nettfarge er #33FF66.
Hovedtrekket til nettfarger er at det ser likt ut i alle nettlesere. I dette øyeblikket Relevansen til nettfarger er veldig liten på grunn av forbedringen i kvaliteten på skjermene og utvidelsen av deres evner.
Farger etter navn
For å unngå å måtte huske et sett med tall, kan du bruke navnene på ofte brukte farger i stedet. I tabellen 6.3 viser navnene på populære fargenavn.
| Fargenavn | Farge | Beskrivelse | Heksadesimal verdi |
|---|---|---|---|
| svart | Svart | #000000 | |
| blå | Blå | #0000FF | |
| fuchsia | Lys lilla | #FF00FF | |
| grå | Mørk grå | #808080 | |
| grønn | Grønn | #008000 | |
| lime | Lysegrønn | #00FF00 | |
| rødbrun | Mørkerød | #800000 | |
| marinen | Mørke blå | #000080 | |
| oliven | Oliven | #808000 | |
| lilla | Mørklilla | #800080 | |
| rød | rød | #FF0000 | |
| sølv | Lysegrå | #C0C0C0 | |
| blågrønn | Blå grønn | #008080 | |
| hvit | Hvit | #FFFFFF | |
| gul | Gul | #FFFF00 |
Det spiller ingen rolle om du angir en farge ved navn eller ved å bruke heksadesimale tall. Disse metodene er like i sin effekt. Eksempel 6.1 viser hvordan du setter bakgrunns- og tekstfarger på en nettside.
Eksempel 6.1. Bakgrunn og tekstfarge
Eksempeltekst
I i dette eksemplet Bakgrunnsfargen settes ved å bruke bgcolor-attributtet til taggen
, og tekstfargen gjennom tekstattributtet. For variasjon settes verdien av tekstattributtet til et heksadesimalt tall, og bgcolor-attributtet er satt til et reservert nøkkelord blågrønn.Fargekoder i CSS brukes til å spesifisere farger. Vanligvis brukes fargekoder eller fargeverdier for å angi fargen for enten forgrunnsfargen til et element (f.eks. tekstfarge, lenkefarge) eller bakgrunnsfargen til et element (bakgrunnsfarge, blokkfarge). De kan også brukes til å endre fargen på en knapp, kantlinje, markør, hover og andre dekorative effekter.
Du kan angi fargeverdiene dine ulike formater. Følgende tabell viser alle mulige formater:
De listede formatene er beskrevet mer detaljert nedenfor.
CSS-farger - Hex-koder
Heksadesimal fargekode er en sekssifret representasjon av farge. De to første sifrene (RR) representerer den røde verdien, de to neste representerer den grønne verdien (GG), og de to siste representerer den blå verdien (BB).
CSS-farger - Korte hex-koder
Kort sekskantet fargekode er en kortere form for notasjon på seks tegn. I dette formatet gjentas hvert siffer for å produsere en ekvivalent sekssifret fargeverdi. For eksempel: #0F0 blir #00FF00.
Heksadesimal verdi kan hentes fra hvilken som helst grafikk programvare, for eksempel Adobe Photoshop, Core Draw, etc.
Hver heksadesimal fargekode i CSS vil bli innledet av et hash-tegn "#". Nedenfor er eksempler på bruk av heksadesimale notasjoner.
CSS-farger - RGB-verdier
RGB-verdi er en fargekode som settes ved hjelp av egenskapen rgb(). Denne egenskapen har tre verdier: én hver for rød, grønn og blå. Verdien kan være et heltall, fra 0 til 255, eller en prosentandel.
Merk: Ikke alle nettlesere støtter rgb() color-egenskapen, så det anbefales ikke å bruke den.
Nedenfor er et eksempel som viser flere farger ved bruk av RGB-verdier.
Fargekodegenerator
Du kan lage millioner av fargekoder ved å bruke tjenesten vår.
Nettlesersikre farger
Nedenfor er en tabell med 216 farger som er de mest sikre og datamaskinuavhengige. Disse fargene i CSS varierer fra 000000 til FFFFFF hex-kode. De er trygge å bruke fordi de sikrer at alle datamaskiner viser farger riktig når de arbeider med 256-fargepaletten.
| Tabell over "sikre" farger 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 |
Se nøye på tegningen. Bakgrunnen til rullegardinvinduet er gjort gjennomskinnelig. Dette er en ganske vanlig designteknikk. La oss tenke på hvordan dette kan implementeres.
Oppgave
Gjør fargen gjennomskinnelig på tvers av nettlesere.
Løsning
Den første tanken i denne situasjonen er å bruke et png24-bilde med en forhåndsinnstilt gjennomskinnelighet for bakgrunnen. Men dette bildet er helt unødvendig. Du klarer deg helt fint uten (og derfor uten en ekstra forespørsel til serveren). La oss fortsatt prøve å finne den optimale løsningen.
Den andre tanken er å bruke . Men i i dette tilfellet dette er ikke veldig praktisk. Tross alt vil ikke bare bakgrunnen, men også inskripsjonene bli gjennomskinnelige. Ja, faktisk hele vinduet på en gang.
Selvfølgelig kan du prøve å legge til en ekstra beholder og bare bruke opasitet på den, men dette HTML-elementet vil kun være ment for dekorasjon og vil åpenbart være overflødig. Er det mulig å klare seg uten?
Selvfølgelig kan du! Hvis du bruker RGBA.
RGBA fargebeskrivelsesformat
CSS3 lar deg spesifisere farge ved hjelp av RGB- og RGBA-funksjoner. I dette tilfellet må vi angi andelen av hver fargekomponent som en byte er tildelt (fra 0 til 255, i tilfelle noen ikke vet det).
Syntaksen for denne saken er veldig enkel:
Bakgrunn: rgb(0, 255, 0); /* ren grønn farge */
For RGBA legges en fjerde parameter til - alfa-transparens (fra 0 til 1).
Bakgrunn: rgba(255, 0, 0, 0,5); /* ren rød med 50 % gjennomsiktighet */
Her er den, løsningen på problemet vårt. Bare sett bakgrunnsfargen ved å bruke rgba og alt vil se ut slik vi ønsker. Uten ekstra bilder og elementer!
Hvor kan jeg få tak i disse tallene?
Du kan se på fargekomponentene ved å bruke Photoshops pipetteverktøy.
Om kompatibilitet på tvers av nettlesere
Siden RGB-funksjonen er mye eldre enn RGBA og har vært til stede siden CSS2-standardens dager, for å beskytte mot de eldste nettleserne, kan du bruke følgende duplikatkonstruksjon:
SomeBlock ( bakgrunn: rgb(255, 0, 0); bakgrunn: rgba(255, 0, 0, 0.5); )
Med denne tilnærmingen vil ikke oldefedrene til moderne nettlesere ha gjennomskinnelighet, men selve fargen vil forbli korrekt.
Du må ta vare på IE separat. Esler forstår ikke RGBA helt frem til versjon 8 inklusive.
Som alltid: land for bøndene, fabrikker for arbeiderne, og esler en krykke! Som .
Selvfølgelig, i kampforhold bruker vi denne regelen separat CSS som vi kobler sammen.
SomeBlock ( bakgrunn:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Trikset er å spesifisere start- og sluttfargene som de samme (ff0000 - rød) og utnytte det faktum at du kan stille inn alfakanalen for gradienten i dette filteret (i eksempelet er verdien 80).
For referanse: filteret bruker heksadesimalt system og en helt ugjennomsiktig farge tilsvarer koden FF (i desimal er dette 255). Følgelig er heksadesimal 80 desimal 128, dvs. 50 % gjennomsiktighet.
Testet i:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
>>Fargehåndtering
Heksadesimale RGB-fargeverdier
Metoder for å beskrive og behandle farger skiller seg fra hverandre i hvilken endelig representasjon de er ment for. La oss sammenligne for eksempel representasjonen av farger for utskrift og for dataskjermer. I det første tilfellet legges grunnlaget hvit fargen på papiret som tre primærfarger deretter påføres på: blå, lilla Og gul. Blanding med hverandre og med den hvite fargen på papir i forskjellige proporsjoner, gir disse tre primærfargene forskjellige fargenyanser, bortsett fra rent sort, eller i fullstendig fravær av maling gir de hvitt papir. Hvis vi legger svart farge til dem, får vi CMYK-en metode for å overføre farge når den nødvendige fargen er oppnådd ved å trekke de manglende fargene fra hvitt.
I det andre tilfellet legges grunnlaget svart fargen på skjermen, hvor hver celle lyser i en av tre farger: rød-rød, grønn-grønn og blå-blå. Så, i fullstendig fravær av glød, får vi en ren svart skjermfarge, og hvilken som helst av de nødvendige fargene er gitt av forholdet mellom hver av de tre fargene. I dette tilfellet får vi RGB-metode for fargeoverføring. Primærfarger kan variere fra 0
før 255
, eller fra 0%
før 100%
, eller kan representeres som en heksadesimal verdi. I figuren nedenfor kan du se resultatene av å blande primærfarger.
Det heksadesimale tallsystemet, i motsetning til desimaltallsystemet, har ikke ti sifre, men seksten - derav navnet. Følgelig kan det bare være ikke-repeterende varianter av kombinasjoner av to sifre - 256 , for å fortsette tallserien etter 9 brev fra EN før F, derfor vil serien se slik ut -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
I dette tilfellet er fargen spesifisert med tre heksadesimale tall, som hver består av to sifre. Det første tallet bestemmer intensiteten rød farger, medium- grønn, siste ting- blå farger. Alle tall kan ta verdier i området fra 00 før FF(fra 0 til 255). For eksempel: grønn farge er gitt som #00FF00, rødlignende #FF0000, blålignende #0000FF, hvitaktig #FFFFFF, fullstendig fravær av farge eller svart er gitt som #000000 .
I skjemaet nedenfor kan du spesifisere eventuelle heksadesimale verdier for hver av de tre fargene og se resultatet av å blande dem ved å klikke i utdatafeltet.
Eksempler på noen heksadesimale verdier RGB-farger: graderinger av rødt, blått og grønt.
| utsikt | kode | utsikt | kode | utsikt | kode | utsikt | kode | utsikt | kode | utsikt | kode |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Spesifisere farge ved hjelp av strengbokstaver
For enkel bruk ble noen farger og deres kombinasjoner tildelt navn som gjenkjennes av alle nettlesere, og det ble mulig å sette mange av dem ved navn. Tabellen nedenfor viser noen av fargenavnene:
| utsikt | Navn | utsikt | Navn | utsikt | Navn | utsikt | Navn |
| Hvit | rød | oransje | Gul | ||||
| Grønn | Blå | Lilla | Svart | ||||
| Aliceblue | Antikkhvit | Aqua | Akvamarin | ||||
| Azure | Beige | Bisque | Blanchedalmond | ||||
| Blå fiolett | brun | Burlywood | Kadettblå | ||||
| Chartreuse | Sjokolade | Korall | Kornblomstblå | ||||
| Mais silke | Høyrød | Cyan | Mørke blå | ||||
| Mørkcyan | Mørk gullris | Mørkegrå | Mørk grønn | ||||
| Darkkhaki | Mørkmagenta | mørkeolivegrønn | Mørk oransje | ||||
| Darkorchid | Mørkerød | Mørk laks | Mørkegrønn | ||||
| Mørk skiferblå | Darkslategray | Mørketurkis | Mørkfiolett | ||||
| Deeppink | Dyp himmelblå | Dimgray | Dodgerblue | ||||
| Brannstein | Blomsterhvit | Skoggrønn | Fuschia | ||||
| Gainsboro | Ghostwhite | Gull | Gullris | ||||
| Grå | Grønn gul | Honning dugg | Hotpink | ||||
| Indianred | Indigo | elfenbein | Kaki | ||||
| Lavendel | Lavendelblush | Sitronchiffon | Lyse blå | ||||
| Lyskorall | Lyscyan | Lyskaldrødgul | Lysegrønn | ||||
| Lysegrå | Lyserosa | Lyslaks | Lysegrønn | ||||
| Lyseblå | Lysslagegray | Lysestålblå | Lys gul | ||||
| Lime | Lime grønn | Sengetøy | Magenta | ||||
| Rødbrun | Middels akvamarin | Middels blå | Mediumorchid | ||||
| Middels lilla | Middels grønn | Mediumslateblå | Middels vårgrønn | ||||
| Middels turkis | Middels fiolett | Midnatt blå | Myntekrem | ||||
| Mistyrose | Navajowhite | marinen | Oldlace | ||||
| Oliven | Oliverab | Oransje rød | Orkidé | ||||
| Palegoldenrod | Blek grønn | Paletturkis | Blekfiolett | ||||
| Papayawhip | Peachpuff | Peru | Rosa | ||||
| Plomme | Pulver blå | Rosebrunt | Kongeblå | ||||
| Sadelbrun | Sjøgrønn | Seashell | Sienna | ||||
| Sølv | Himmelblå | Skiferblå | Slategray | ||||
| Snø | Springgrønn | Stålblå | Tan | ||||
| Blågrønn | Tistel | Tomat | Turkis | ||||
| Fiolett | Hvete | Whitesmoke | Gul-grønn |
Bruke en sikker fargepalett
Dessverre, på ulike plattformer,med forskjellige systeminnstillinger er riktig fargegjengivelse et problem. Saken er at nettleseren alltid prøver å justere farge palett dokument under systeminnstillinger og funksjonene til skjermen, ved uavhengig å blande farger og erstatte dem. Som et resultat kan brukeren noen ganger ikke se nøyaktig hva webmasteren ønsket å vise ham. En vei ut av denne situasjonen ble funnet i bruken av en palett, der hver farge garantert vil bli gjengitt likt av alle nettlesere på forskjellige plattformer. Dette er den såkalte garantert palett, også kalt sikker palett. Denne paletten inkluderer farger hvis fargekomponenter har følgende verdier: 00 ,33 ,66 ,99 , CC,FF, på alle mulige måter 216 deres kombinasjoner.
| utsikt | kode | utsikt | kode | utsikt | kode | utsikt | kode | utsikt | kode | utsikt | kode |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000 CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
HEX/HTML
HEX-farge er ikke annet enn en heksadesimal representasjon av RGB.
Farger er representert som tre grupper heksadesimale sifre, der hver gruppe er ansvarlig for sin egen farge: #112233, der 11 er rød, 22 er grønn, 33 er blå. Alle verdier må være mellom 00 og FF.
Mange applikasjoner tillater en forkortet form for heksadesimal fargenotasjon. Hvis hver av de tre gruppene inneholder de samme tegnene, for eksempel #112233, kan de skrives som #123.
- h1 ( farge: #ff0000; ) /* rød */
- h2 ( farge: #00ff00; ) /* grønn */
- h3 ( farge: #0000ff; ) /* blå */
- h4 ( farge: #00f; ) /* samme blå, stenografi */
RGB
RGB (rød, grønn, blå) fargerommet består av alle mulige farger som kan lages ved å blande rødt, grønt og blått. Denne modellen er populær innen fotografering, TV og datagrafikk.
RGB-verdier er spesifisert som et heltall fra 0 til 255. For eksempel vises rgb(0,0,255) som blå fordi den blå parameteren er satt til sin høyeste verdi (255) og de andre er satt til 0.
Noen applikasjoner (spesielt nettlesere) støtter prosentvis registrering av RGB-verdier (fra 0 % til 100 %).
- h1 ( farge: rgb(255, 0, 0); ) /* rød */
- h2 ( farge: rgb(0, 255, 0); ) /* grønn */
- h3 ( farge: rgb(0, 0, 255); ) /* blå */
- h4 ( farge: rgb(0%, 0%, 100%); ) /* samme blå, prosentvis oppføring */
RGB-fargeverdier støttes i alle større nettlesere.
RGBA
Nylig moderne nettlesere lært å jobbe med RGBA-fargemodellen - en utvidelse av RGB med støtte for en alfakanal, som bestemmer opasiteten til et objekt.
Betydning RGBA farger er spesifisert i formen: rgba(rød, grønn, blå, alfa). Alfa-parameteren er et tall som strekker seg fra 0,0 (helt gjennomsiktig) til 1,0 (helt ugjennomsiktig).
- h1 ( farge: rgb(0, 0, 255); ) /* blå i vanlig RGB */
- h2 ( farge: rgba(0, 0, 255, 1); ) /* samme blå i RGBA, fordi opasitet: 100 % */
- h3 ( farge: rgba(0, 0, 255, 0,5); ) /* opasitet: 50 % */
- h4 ( farge: rgba(0, 0, 255, .155); ) /* opasitet: 15,5 % */
- h5 ( farge: rgba(0, 0, 255, 0); ) /* helt gjennomsiktig */
RGBA støttes i IE9+, Firefox 3+, Chrome, Safari og Opera 10+.
HSL
HSL-fargemodellen er en representasjon av RGB-modellen i et sylindrisk koordinatsystem. HSL representerer farger på en mer intuitiv og lesbar måte enn vanlig RGB. Modellen brukes ofte i grafikkapplikasjoner, i fargepaletter og for bildeanalyse.
HSL står for Hue (farge/farge), Saturation (metning), Lightness/Luminance (lightness/lightness/luminosity, for ikke å forveksle med lysstyrke).
Hue spesifiserer plasseringen av fargen på fargehjulet (fra 0 til 360). Metning er den prosentvise verdien av metningen (fra 0 % til 100 %). Letthet er en prosentandel av letthet (fra 0 % til 100 %).
- h1 ( farge: hsl(120, 100%, 50%); ) /* grønn */
- h2 ( farge: hsl(120, 100%, 75%); ) /* lysegrønn */
- h3 ( farge: hsl(120, 100%, 25%); ) /* mørkegrønn */
- h4 ( farge: hsl(120, 60%, 70%); ) /* pastellgrønn */
HSL støttes i IE9+, Firefox, Chrome, Safari og Opera 10+.
HSLA
I likhet med RGB/RGBA har HSL en HSLA-modus som støtter en alfakanal for å indikere opasiteten til et objekt.
HSLA-fargeverdien er spesifisert som: hsla(nyanse, metning, lyshet, alfa). Alfa-parameteren er et tall fra 0,0 (helt gjennomsiktig) til 1,0 (helt ugjennomsiktig).
- h1 ( farge: hsl(120, 100%, 50%); ) /* grønn i normal HSL */
- h2 ( farge: hsla(120, 100%, 50%, 1); ) /* samme grønne i HSLA, fordi opasitet: 100% */
- h3 ( farge: hsla(120, 100 %, 50 %, 0,5); ) /* opasitet: 50 % */
- h4 ( farge: hsla(120, 100 %, 50 %, .155); ) /* opasitet: 15,5 % */
- h5 ( farge: hsla(120, 100%, 50%, 0); ) /* helt gjennomsiktig */
CMYK
CMYK-fargemodellen forbindes ofte med fargetrykk og utskrift. CMYK (i motsetning til RGB) er en subtraktiv modell, noe som betyr at høyere verdier er assosiert med mørkere farger.
Farger bestemmes av forholdet mellom cyan (cyan), magenta (magenta), gul (gul), med tillegg av svart (nøkkel/svart).
Hvert av tallene som definerer en farge i CMYK representerer prosentandelen av blekk av en gitt farge som utgjør fargekombinasjonen, eller mer presist, størrelsen på skjermprikken som vises på en fotosettemaskin på film av en gitt farge (eller direkte på trykt skjema når det gjelder CTP).
For å få PANTONE 7526-fargen blander du for eksempel 9 deler cyan, 83 deler magenta, 100 deler gul og 46 deler svart. Dette kan betegnes som følger: (9,83,100,46). Noen ganger brukes følgende betegnelser: C9M83Y100K46, eller (9%, 83%, 100%, 46%), eller (0,09/0,83/1,0/0,46).
HSB/HSV
HSB (også kjent som HSV) ligner på HSL, men de er to forskjellige fargemodeller. De er begge basert på sylindrisk geometri, men HSB/HSV er basert på «hexcone»-modellen, mens HSL er basert på «bi-hexcone»-modellen. Kunstnere foretrekker ofte å bruke denne modellen, det er generelt akseptert at HSB/HSV-enheten er nærmere den naturlige oppfatningen av farger. Spesielt brukes HSB-fargemodellen i Adobe Photoshop.
HSB/HSV står for Hue (farge/farge), Saturation (metning), Brightness/Value (lysstyrke/verdi).
Hue spesifiserer plasseringen av fargen på fargehjulet (fra 0 til 360). Metning er den prosentvise verdien av metningen (fra 0 % til 100 %). Lysstyrke er en prosentandel av lysstyrken (fra 0 % til 100 %).
XYZ
XYZ-fargemodellen (CIE 1931 XYZ) er et rent matematisk rom. I motsetning til RGB, CMYK og andre modeller, i XYZ er hovedkomponentene "imaginære", noe som betyr at du ikke kan knytte X, Y og Z til et sett med farger å blande. XYZ er mestermodellen til nesten alle andre fargemodeller, brukt i tekniske felt.
LAB
Farge LAB modell(CIELAB, “CIE 1976 L*a*b*”) beregnes fra CIE XYZ-rommet. Labs designmål var å skape et fargerom der fargeendringer ville være mer lineære når det gjelder menneskelig oppfatning (sammenlignet med XYZ), det vil si slik at den samme endringen i fargekoordinatverdier i forskjellige områder av fargerommet ville produsere den samme følelsen av fargeendring.