Farver på nettet - Web colors

Webfarver er farver, der bruges til visning af websider på World Wide Web , og metoderne til at beskrive og specificere disse farver. Farver kan specificeres som en RGB -triplet eller i hexadecimalt format (en hex -triplet ) eller i henhold til deres almindelige engelske navne i nogle tilfælde. Et farveværktøj eller anden grafiksoftware bruges ofte til at generere farveværdier. I nogle anvendelser er hexadecimale farvekoder specificeret med notation ved hjælp af et ledende taltegn (#). En farve er angivet i henhold til intensiteten af ​​dens røde, grønne og blå komponenter, hver repræsenteret med otte bits . Således er der 24 bits, der bruges til at specificere en webfarve inden for sRGB -spektret, og 16.777.216 farver, der kan være angivet på denne måde.

Farver uden for sRGB -spektret kan specificeres i Cascading Style Sheets ved at gøre en eller flere af de røde, grønne og blå komponenter negative eller større end 100%, så farverummet er teoretisk set en ubegrænset ekstrapolation af sRGB svarende til scRGB . For at angive en ikke-sRGB-farve på denne måde kræves funktionskaldet RGB (). Det er umuligt med den hexadecimale syntaks (og dermed umulig i ældre HTML -dokumenter, der ikke bruger CSS).

De første versioner af Mosaic og Netscape Navigator brugte X11 -farvenavne som grundlag for deres farvelister, da begge startede som X Window System -applikationer. Webfarver har en entydig kolorimetrisk definition, sRGB , som relaterer kromatiske egenskaber ved et bestemt fosforsæt , en given overførselskurve, adaptivt hvidpunkt og visningsbetingelser. Disse er valgt til at ligne mange virkelige skærme og visningsbetingelser, så gengivelse kan ligge nogenlunde tæt på de angivne værdier, selv uden farvestyring . Brugeragenter varierer i troværdigheden, hvormed de repræsenterer de angivne farver. Mere avancerede brugeragenter bruger farvehåndtering til at give bedre farvefidelitet; dette er især vigtigt for web-til-print- applikationer.

Hex triplet

En hex-triplet er et sekscifret, tre- byte hexadecimalt tal, der bruges i HTML , CSS , SVG og andre computerapplikationer til at repræsentere farver. Bytes repræsenterer de røde, grønne og blå komponenter i farven. En byte repræsenterer et tal i intervallet 00 til FF (i hexadecimal notation) eller 0 til 255 i decimalnotation. Dette repræsenterer mindst (0) til mest (255) intensitet af hver af farvekomponenterne. Således angiver webfarver farver i 24-bit RGB-farveskemaet . Hex -tripletten dannes ved at sammenkoble tre bytes i hexadecimal notation i følgende rækkefølge:

• Byte 1: rød værdi (farvetype rød)
• Byte 2: grøn værdi (farvetype grøn)
• Byte 3: blå værdi (farvetype blå)

Overvej f.eks. Farven, hvor de røde/grønne/blå værdier er decimaltal: rød = 36, grøn = 104, blå = 160 (en gråblå farve). Decimaltallene 36, 104 og 160 svarer til de hexadecimale tal henholdsvis 24, 68 og A0. Hex -tripleten opnås ved at sammenkoble de seks hexadecimale cifre sammen, 2468A0 i dette eksempel.

Hvis en af ​​de tre farveværdier er mindre end 10 hex (16 decimaler), skal den repræsenteres med et førende nul, så tripleten altid har præcis seks cifre. For eksempel ville decimal -tripleten 4, 8, 16 repræsenteres med hex -cifrene 04, 08, 10, der danner hex -tripletten 040810.

Antallet af farver, der kan repræsenteres af dette system, er 16 ⁶ eller 256 ³ eller 2 ²⁴ = 16.777.216.

Shorthand hexadecimal form

En forkortet, tre (hexadecimal) -cifret form bruges. At udvide denne formular til den sekscifrede form er lige så simpel som at fordoble hvert ciffer: 09C bliver til 0099CC som vist på følgende CSS- eksempel:

.threedigit { color: #09C;    }
.sixdigit   { color: #0099CC; } /* same color as above */

Denne stenografiform reducerer paletten til 4.096 farver, svarende til 12-bit farve i modsætning til 24-bit farve ved hjælp af hele den sekscifrede form (16.777.216 farver). Denne begrænsning er tilstrækkelig til mange tekstbaserede dokumenter.

Konvertering af RGB til hexadecimal

RGB -værdier er normalt angivet i området 0–255; hvis de er i området 0–1, ganges værdierne med 255 før konvertering. Dette tal divideret med seksten (heltal division; ignorer enhver rest) giver det første hexadecimale ciffer (mellem 0 og F, hvor bogstaverne A til F repræsenterer tallene 10 til 15. Se hexadecimal for flere detaljer). Resten giver det andet hexadecimale ciffer. For eksempel deler RGB -værdien 201 sig i 12 grupper på 16, og derfor er det første ciffer C. En rest på ni giver det hexadecimale tal C9. Denne proces gentages for hver af de tre farveværdier.

Konvertering mellem talbaser er et fælles træk ved regnemaskiner, herunder både håndholdte modeller og softwareberegnere, der følger med de fleste moderne operativsystemer . Web-baserede værktøjer specifikt til konvertering af farveværdier er også tilgængelige.

HTML farve navne

De seneste W3C -specifikationer for farvenavne skelner mellem grundlæggende og udvidede farver. I HTML og XHTML kan farver bruges til tekst, baggrundsfarve, rammekanter, tabeller og individuelle tabelceller.

Grundlæggende farver

Grundfarverne er 16 farver defineret i HTML 4.01-specifikationen, ratificeret i 1999, som følger (navne er i denne sammenhæng defineret som store og små bogstaver):

Disse 16 blev mærket som sRGB og inkluderet i HTML 3.0 -specifikationen, som bemærkede, at de var "de 16 standardfarver, der understøttes med Windows VGA -paletten."

Udvidede farver

SVG -version af X11 farvenavne

SVG1.1 navngivne farver med sRGB hex/dec og HSL koder, ved UHD (4K) opløsning

De udvidede farver er resultatet af sammensmeltning af specifikationer fra HTML 4.01, CSS 2.0, SVG 1.0 og CSS3 User Interfaces (CSS3 UI).

Flere farver er defineret af webbrowsere . En bestemt browser genkender muligvis ikke alle disse farver, men fra 2005 understøtter alle moderne, generelle, grafiske browsere hele listen over farver. Mange af disse farver er fra listen over X11 farvenavne distribueret med X Window System . Disse farver blev standardiseret af SVG 1.0 og accepteres af SVG Full user -agenter. De er ikke en del af SVG Tiny .

Listen over farver, der følger med X11 -produktet, varierer mellem implementeringer og sammenstød med visse HTML -navne, f.eks. Grønt. X11 -farver er defineret som simpel RGB (derfor ikke noget bestemt farverum), frem for sRGB . Det betyder, at listen over farver, der findes i X11 (f.eks. I /usr/lib/X11/rgb.txt) ikke direkte skal bruges til at vælge farver til internettet.

Listen over web "X11 farver" fra CSS3 -specifikationen, sammen med deres hexadecimale og decimalækvivalenter, er vist nedenfor. Sammenlign de alfabetiske lister i W3C -standarderne. Dette inkluderer de almindelige synonymer: aqua (HTML4/CSS 1.0 standardnavn) og cyan (almindeligt sRGB -navn), magenta (almindeligt sRGB -navn) og fuchsia (HTML4/CSS 1.0 -standardnavn), grå (HTML4/CSS 1.0 -standardnavn) og grå.

CSS farver

Den Cascading Style Sheets specifikation definerer det samme antal navngivne farver som HTML 4 spec, nemlig de 16 html farver , og 124 farver fra Netscape X11 farve liste for i alt 140 navne, der blev genkendt af Internet Explorer (IE) 3.0 og Netscape Navigator 3.0. Blooberry.com bemærker, at Opera 2.1 og Safari 1 også inkluderede Netscapes udvidede liste med 140 farvenavne, men senere opdagede 14 navne, der ikke var inkluderet i Opera 3.5 på Windows 98.

I CSS 2.1 blev farven 'orange' (en af ​​de 140) tilføjet til sektionen med de 16 HTML4 -farver som en 17. farve. CSS3.0 -specifikationen inkluderede ikke orange i afsnittet "HTML4 farveord", der blev omdøbt til "Grundlæggende farvesøgeord". I den samme reference blev sektionen "SVG -farvesøgeord" omdøbt til "Udvidede farvesøgeord" efter at have startet som "X11 -farvesøgeord" i et tidligere arbejdsudkast. Arbejdsudkastet til farvemodulet niveau 4 kombinerer grundlæggende og udvidede sektioner sammen i et enkelt "Navngivne farver" -afsnit.

CSS 2, SVG og CSS 2.1 giver webforfattere mulighed for at bruge systemfarver , som er farvenavne, hvis værdier hentes fra operativsystemet , vælger operativsystemets fremhævede tekstfarve eller baggrundsfarve til værktøjstipkontrol. Dette gør det muligt for webforfattere at style deres indhold i overensstemmelse med brugeragentens operativsystem. Den CSS3 farve-modulet har frarådet brugen af systemfarver til fordel for CSS3 UI System Udseende ejendom, som i sig selv efterfølgende blev droppet fra CSS3.

CSS3 -specifikationen introducerer også værdier for HSL -farverum til stilark:

 /* RGB model */
 p { color: #F00 } /* #rgb */
 p { color: #FF0000 } /* #rrggbb */
 p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
 p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

 /* RGB with alpha channel, added to CSS3 */
 p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */

 /* HSL model, added to CSS3 */
 p { color: hsl(0, 100%, 50%) } /* red */
 p { color: hsl(120, 100%, 50%) } /* green */
 p { color: hsl(120, 100%, 25%) } /* dark green */
 p { color: hsl(120, 100%, 75%) } /* light green */
 p { color: hsl(120, 50%, 50%) } /* pastel green */

 /* HSL model with alpha channel */
 p { color: hsla(120, 100%, 50%, 1) } /* green */
 p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
 p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

CSS farve 4

Den 21. juni 2014 tilføjede CSS WG farven RebeccaPurple til Editor's Draft of the Colors -modulet niveau 4 for at mindes Eric Meyers datter Rebecca, der døde den 7. juni 2014, hendes sjette fødselsdag.

CSS understøtter også den særlige farve transparent, som repræsenterer en alfa -værdi på nul; som standard, transparenter gengivet som en usynlig nominel sort: rgba(0, 0, 0, 0).

CSS farve 5

Web-sikre farver

I midten af ​​1990'erne var mange skærme kun i stand til at vise 256 farver. Disse kan dikteres af hardwaren eller kan ændres af et "farvetabel". Når der findes en farve (f.eks. I et billede), der ikke er tilgængelig, skulle der bruges en anden. Dette kan gøres ved enten at bruge den nærmeste farve eller ved at bruge dithering .

Der var forskellige forsøg på at lave en "standard" farvepalet. Et sæt farver var nødvendige, der kunne vises uden at dithere på 256-farveskærme; tallet 216 blev valgt dels fordi computeroperativsystemer sædvanligvis reserverede seksten til tyve farver til eget brug; det blev også valgt, fordi det tillader præcis seks nuancer med lige store mellemrum af rød, grøn og blå (6 × 6 × 6 = 216), hver fra 00 til FF (inklusive begge grænser).

Listen over farver præsenteres som om den havde særlige egenskaber, der gør dem immune over for rystelser, men på 256-farveskærme kan applikationer faktisk indstille en palet af ethvert udvalg af farver, de vælger, og dithering resten. Disse farver blev valgt specifikt, fordi de matchede de paletter, der blev valgt af forskellige browserprogrammer. Der var ikke meget forskellige paletter i brug i forskellige browsere.

"Web-sikre" farver havde en fejl i, at på systemer som X11, hvor paletten deles mellem applikationer, blev mindre farvekuber (5 × 5 × 5 eller 4 × 4 × 4) tildelt af browsere-"web- sikre "farver ville dither på sådanne systemer. Forskellige resultater blev opnået ved at tilvejebringe et billede med et større udvalg af farver og lade browseren kvantificere farverummet, hvis det er nødvendigt, frem for at lide kvalitetstabet ved en dobbelt kvantisering.

Gennem 2000'erne faldt brugen af ​​256-farveskærme i personlige computere kraftigt til fordel for 24-bit ( TrueColor ) skærme, og brugen af ​​"websikre" farver er faldet i praktisk brug.

De "websikre" farver har ikke alle standardnavne, men hver kan specificeres af en RGB- triplet: hver komponent (rød, grøn og blå) tager en af ​​de seks værdier fra følgende tabel (ud af de 256 mulige tilgængelige værdier for hver komponent i fuld 24-bit farve).

Følgende tabel viser alle de "websikre" farver. En mangel ved den websikker palette er dens lille udvalg af lyse farver til websidebaggrunde, hvorimod intensiteterne i den lave ende af intervallet, f.eks. De to mørkeste, ligner hinanden, hvilket gør dem svære at skelne mellem. Værdier flankeret af "*" (stjerne) er en del af den "virkelig sikre palette;" se Sikkereste webfarver herunder.

Farvebord

Hver farvekode, der er angivet, er en stenografi for RGB -værdien. For eksempel svarer kode 609 til RGB-kode 102-0-153 eller HEX-kode #660099 .

Sikkereste webfarver

Designere blev opfordret til at holde sig til disse 216 "websikre" farver på deres websteder, fordi der var mange 8-bit farvedisplays, da 216-farvepaletten blev udviklet. David Lehn og Hadley Stern opdagede, at kun 22 af de 216 farver i den websikre palet vises pålideligt uden inkonsekvent ommapping på 16-bit computerskærme . De kaldte disse 22 farver "den virkelig sikre palette"; den består stort set af nuancer af grønt, gult og blåt.

Tilgængelighed

Farvevalg

Nogle browsere og enheder understøtter ikke farver. For disse displays eller blinde og farveblinde brugere kan webindhold afhængigt af farver være ubrugeligt eller svært at bruge.

Enten skal der angives nogen farver (for at påberåbe browserens standardfarver), eller så skal både baggrunden og alle forgrundsfarver (såsom farverne i ren tekst, ubesøgte links, svævede links, aktive links og besøgte links) specificeres for at undgå sort på sort eller hvid på hvid effekter.

Farvekontrast

Retningslinjerne for tilgængelighed på webindhold anbefaler et kontrastforhold på mindst 4,5: 1 mellem tekstens relative luminans og dens baggrundsfarve eller mindst 3: 1 for stor tekst. Forbedret tilgængelighed kræver kontrastforhold større end 7: 1.

Imidlertid er håndteringen af ​​tilgængelighedshensyn ikke blot et spørgsmål om at øge kontrastforholdet. Som en rapport til Web Accessibility Initiative indikerer, er ordblinde læsere bedre tjent med kontrastforhold under maksimum. De anbefalinger, de henviser til off-black (0x0A0A0A) på off-white (0xFFFFE5) og sort (0x000000) på creme (0xFAFAC8) har kontrastforhold på henholdsvis 11,7: 1 og 20,3: 1. Blandt deres andre farvepar har brun (0x282800) på mørkegrøn (0xA0A000) et kontrastforhold på 3,24: 1, hvilket er mindre end WCAG -anbefalingen, mørkebrun (0x1E1E00) på lysegrøn (0xB9B900) har et kontrastforhold på 4,54 : 1 og blå (0x00007D) på gul (0xFFFF00) har et kontrastforhold på 11,4: 1. Bemærk, at farverne, der er navngivet i rapporten, bruger andre farveværdier end webfarverne med samme navn.

Se også

Referencer

eksterne links

• CSS -farveværdi på MDN Web Docs
• CSS2.1 Farvespecifikation
• Liste over websikre farver
• Web farver på Curlie