HEX/HTML

HEX-farge er ikke annet enn en heksadesimal representasjon av RGB.

Farger er representert som tre grupper med 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.

1. h1 ( farge: #ff0000; ) /* rød */
2. h2 ( farge: #00ff00; ) /* grønn */
3. h3 ( farge: #0000ff; ) /* blå */
4. h4 (farge: #00f; ) /* samme blå, stenografi */

RGB

RGB-fargerommet (rød, grønn, blå) 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ått 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 %).

1. h1 ( farge: rgb(255, 0, 0); ) /* rød */
2. h2 ( farge: rgb(0, 255, 0); ) /* grønn */
3. h3 ( farge: rgb(0, 0, 255); ) /* blå */
4. h4 ( farge: rgb(0%, 0%, 100%); ) /* samme blå, prosentvis oppføring */

RGB-fargeverdier støttes i alle større nettlesere.

RGBA

Nylig har moderne nettlesere lært å jobbe med RGBA-fargemodellen – en utvidelse av RGB med støtte for en alfakanal, som bestemmer opasiteten til et objekt.

RGBA-fargeverdien er spesifisert som: rgba(rød, grønn, blå, alfa). Alfa-parameteren er et tall fra 0,0 (helt gjennomsiktig) til 1,0 (helt ugjennomsiktig).

1. h1 ( farge: rgb(0, 0, 255); ) /* blå i vanlig RGB */
2. h2 ( farge: rgba(0, 0, 255, 1); ) /* samme blå i RGBA, fordi opasitet: 100 % */
3. h3 ( farge: rgba(0, 0, 255, 0,5); ) /* opasitet: 50 % */
4. h4 ( farge: rgba(0, 0, 255, .155); ) /* opasitet: 15,5 % */
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, fargepaletter og bildeanalyse.

HSL står for Hue (farge/nyanse), Saturation (metning), Lightness/Luminans (lyshet/lyshet/luminositet, 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 %).

1. h1 ( farge: hsl(120, 100%, 50%); ) /* grønn */
2. h2 ( farge: hsl(120, 100%, 75%); ) /* lysegrønn */
3. h3 ( farge: hsl(120, 100%, 25%); ) /* mørkegrønn */
4. 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 som strekker seg fra 0,0 (helt gjennomsiktig) til 1,0 (helt ugjennomsiktig).

1. h1 ( farge: hsl(120, 100%, 50%); ) /* grønn i normal HSL */
2. h2 ( farge: hsla(120, 100%, 50%, 1); ) /* samme grønne i HSLA, fordi opasitet: 100% */
3. h3 ( farge: hsla(120, 100 %, 50 %, 0,5); ) /* opasitet: 50 % */
4. h4 ( farge: hsla(120, 100 %, 50 %, .155); ) /* opasitet: 15,5 % */
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 (Key/blackK).

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 sendes ut på en fotosettemaskin på film av en gitt farge ( eller direkte på trykt skjema når det gjelder CTP).

For å oppnå PANTONE 7526 farge, vil du for eksempel blande 9 deler cyan, 83 deler magenta, 100 deler gul og 46 deler sort. 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/nyanse), 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 hovedmodellen for nesten alle andre fargemodeller som brukes innen tekniske felt.

LAB

LAB-fargemodellen (CIELAB, “CIE 1976 L*a*b*”) beregnes fra CIE XYZ-rommet. Designet til Lab ble designet for å 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 fargen plass ville produsere den samme følelsen av fargeendring.

Til html sider Farger er primært angitt i heksadesimal. For å gjøre dette brukes to typer kodeopptak - full eller forkortet. For å angi html-fargen i sin helhet, må du skrive inn seks tegn (tall og/eller engelske bokstaver) etter hashen, for eksempel, skrives svart slik: #000000. Stenografien for å spesifisere html-farger består av en hash og tre tall og/eller bokstaver bak. Samtidig denne typen reserver kan bare brukes hvis hele 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 rødt, grønt og blått. På sin side består alle monitorer av enormt beløp piksler (mikroskopiske prikker), som hver inkluderer 3 såkalte "lommelykter" (lyskilder): røde, grønne 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å:

1. Nettleseren erstatter den med den som ligner mest på den og kan reproduseres med hell;
2. Til riktig visning nettleseren kan blande flere farger og reprodusere 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. Disse er 100 % sikre farger for html-dokumenter det er 216. Og selv om dagens teknologi har nådd det punktet at moderne skjermer og nettlesere gjenkjenner millioner av nyanser, anbefaler vi å bruke disse trygge fargene for å garantere fargegjengivelse.

Denne tabellen inneholder 216 sikre html-fargekoder. Hver farge har en RGB-verdi å definere fargen i grafiske redaktører og HEX for å spesifisere farge på HTML-sider.

Denne siden inneholder en tabell med nøkkelord som kan brukes til å betegne 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 er ikke fargenavn sensitive for 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 representerer 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.

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 allerede innstilt 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 dette tilfellet er det 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 det! 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 */

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 unødvendige 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 inkludert.

Som alltid: jord til bøndene, fabrikker til arbeiderne og esler en krykke! I form av.

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).

Til referanse: filteret bruker det heksadesimale systemet og koden for en helt ugjennomsiktig farge er 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

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) er 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 navnene på fargene på engelsk(som kan brukes som verdier) støttet 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.