Webbfärger - Web colors

Webbfärger är färger som används för att visa webbsidor på World Wide Web , och metoderna för att beskriva och specificera dessa färger. Färger kan specificeras som en RGB -triplett eller i hexadecimalt format (en hex -triplet ) eller enligt deras vanliga engelska namn i vissa fall. Ett färgverktyg eller annan grafikprogramvara används ofta för att generera färgvärden. I vissa användningsområden specificeras hexadecimala färgkoder med notering med hjälp av ett ledande numret (#). En färg specificeras enligt intensiteten hos dess röda, gröna och blåa komponenter, var och en representerad av åtta bitar. Således finns det 24 bitar som används för att specificera en webbfärg inom sRGB -intervallet, och 16 777 216 färger som kan vara så specificerade.

Färger utanför sRGB -intervallet kan specificeras i Cascading Style Sheets genom att göra en eller flera av de röda, gröna och blå komponenterna negativa eller större än 100%, så färgutrymmet är teoretiskt sett en obegränsad extrapolering av sRGB som liknar scRGB . För att ange en färg som inte är sRGB på detta sätt krävs RGB () -samtalet. Det är omöjligt med hexadecimal syntax (och därmed omöjligt i äldre HTML -dokument som inte använder CSS).

De första versionerna av Mosaic och Netscape Navigator använde X11 -färgnamnen som grund för sina färglistor, eftersom båda började som X Window System -applikationer. Webbfärger har en otvetydig kolorimetrisk definition, sRGB , som relaterar kromaticiteten hos en viss fosforuppsättning , en given överföringskurva, adaptiv vitpunkt och visningsförhållanden. Dessa har valts ut för att likna många verkliga bildskärmar och visningsförhållanden, så att rendering kan vara ganska nära de angivna värdena även utan färghantering . Användaragenter varierar i trohet med vilka de representerar de angivna färgerna. Mer avancerade användaragenter använder färghantering för att ge bättre färgtrohet; Detta är särskilt viktigt för webb-till-utskrift- applikationer.

Hex triplet

En hex-triplett är ett sexsiffrigt, tre- byte hexadecimalt tal som används i HTML , CSS , SVG och andra dataprogram för att representera färger. Byte representerar färgens röda, gröna och blåa komponenter. En byte representerar ett tal i intervallet 00 till FF (i hexadecimal notation), eller 0 till 255 i decimalnotation. Detta representerar minst (0) till mest (255) intensitet för var och en av färgkomponenterna. Således anger webbfärger färger i 24-bitars RGB-färgschemat . Hextripletten bildas genom att sammanfoga tre byte i hexadecimal notation, i följande ordning:

• Byte 1: rött värde (färgtyp röd)
• Byte 2: grönt värde (färgtyp grönt)
• Byte 3: blått värde (färgtyp blå)

Tänk till exempel på färgen där de röda/gröna/blåa värdena är decimaltal: röd = 36, grön = 104, blå = 160 (en gråblå färg). Decimaltalen 36, 104 och 160 motsvarar de hexadecimala siffrorna 24, 68 respektive A0. Hextripleten erhålls genom att sammanfoga de sex hexadecimala siffrorna tillsammans, 2468A0 i detta exempel.

Om något av de tre färgvärdena är mindre än 10 hex (16 decimaler) måste det representeras med en inledande nolla så att trillingen alltid har exakt sex siffror. Exempelvis skulle decimaltripleten 4, 8, 16 representeras av hex -siffrorna 04, 08, 10 och bilda hex -tripletten 040810.

Antalet färger som kan representeras av detta system är 16 ⁶ eller 256 ³ eller 2 ²⁴ = 16 777 216.

Shorthand hexadecimal form

En förkortad, tre (hexadecimal) -siffrig form används. Att expandera detta formulär till det sexsiffriga formuläret är lika enkelt som att fördubbla varje siffra: 09C blir 0099CC enligt följande CSS- exempel:

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

Denna stenografiform reducerar paletten till 4 096 färger, motsvarande 12-bitars färg i motsats till 24-bitars färg med hela den sexsiffriga formen (16 777 216 färger). Denna begränsning är tillräcklig för många textbaserade dokument.

Konvertera RGB till hexadecimal

RGB -värden ges vanligtvis i intervallet 0–255; om de ligger i intervallet 0–1 multipliceras värdena med 255 före konvertering. Detta tal dividerat med sexton (heltal division; ignorerar eventuell rest) ger den första hexadecimala siffran (mellan 0 och F, där bokstäverna A till F representerar siffrorna 10 till 15. Se hexadecimal för mer information). Resten ger den andra hexadecimala siffran. RGB -värdet 201 delar sig till exempel i 12 grupper om 16, så den första siffran är C. En återstod av nio ger hexadecimaltalet C9. Denna process upprepas för vart och ett av de tre färgvärdena.

Omvandling mellan talbaser är ett vanligt drag hos miniräknare, inklusive både handhållna modeller och mjukvarukalkylatorer som medföljer de flesta moderna operativsystem . Webbaserade verktyg specifikt för att konvertera färgvärden är också tillgängliga.

HTML -färgnamn

De senaste W3C -specifikationerna för färgnamn skiljer mellan grundläggande och utökade färger. I HTML och XHTML kan färger användas för text, bakgrundsfärg, ramramar, tabeller och enskilda tabellceller.

Grundfärger

Grundfärgerna är 16 färger som definieras i HTML 4.01-specifikationen, ratificerade 1999, enligt följande (namn definieras i detta sammanhang för att vara skiftlägeskänsliga):

Dessa 16 märktes som sRGB och ingick i HTML 3.0 -specifikationen, som noterade att de var "de 16 standardfärger som stöds av Windows VGA -palett."

Utökade färger

SVG -version av X11 -färgnamn

SVG1.1 heter färger med sRGB hex/dec och HSL -koder, med UHD (4K) upplösning

De utökade färgerna är resultatet av sammanslagning av specifikationer från HTML 4.01, CSS 2.0, SVG 1.0 och CSS3 användargränssnitt (CSS3 UI).

Flera färger definieras av webbläsare . En viss webbläsare kanske inte känner igen alla dessa färger, men från och med 2005 stöder alla moderna, grafiska webbläsare för allmän användning hela listan över färger. Många av dessa färger är från listan över X11 -färgnamn som distribueras med X Window System . Dessa färger standardiserades av SVG 1.0 och accepteras av SVG Full user -agenter. De är inte en del av SVG Tiny .

Listan över färger som levereras med X11 -produkten varierar mellan implementeringar och krockar med vissa HTML -namn, till exempel grönt. X11 -färger definieras som enkel RGB (alltså inget särskilt färgutrymme), snarare än sRGB . Det betyder att listan över färger som finns i X11 (t.ex. i /usr/lib/X11/rgb.txt) inte direkt ska användas för att välja färger för webben.

Listan över webb "X11 -färger" från CSS3 -specifikationen, tillsammans med deras hexadecimala och decimalekvivalenter, visas nedan. Jämför de alfabetiska listorna i W3C -standarderna. Detta inkluderar de vanliga synonymerna: aqua (standardnamn HTML4/CSS 1.0) och cyan (vanligt sRGB -namn), magenta (vanligt sRGB -namn) och fuchsia (standardnamn HTML4/CSS 1.0), grått (standardnamn HTML4/CSS 1.0) och grå.

CSS färger

Den Cascading Style Sheets -specifikationen definierar samma antal namngivna färger som HTML 4 spec, nämligen 16 html färger och 124 färger från Netscape X11 färglista för totalt 140 namn som känns igen av Internet Explorer (IE) 3.0 och Netscape Navigator 3.0. Blooberry.com noterar att Opera 2.1 och Safari 1 också inkluderade Netscapes utökade lista med 140 färgnamn, men upptäckte senare 14 namn som inte ingår i Opera 3.5 på Windows 98.

I CSS 2.1 lades färgen 'orange' (en av de 140) till avsnittet med de 16 HTML4 -färgerna som en 17: e färg. CSS3.0 -specifikationen inkluderade inte orange i avsnittet "HTML4 -färgnyckelord", som döptes om till "Basic -färgord". I samma referens har avsnittet "SVG -färgnyckelord" bytt namn till "Utökade färgsökord", efter att ha börjat som "X11 -färgnyckelord" i ett tidigare arbetsutkast. Arbetsutkastet för färgmodulen på nivå 4 kombinerar de grundläggande och utökade sektionerna tillsammans i ett enkelt avsnitt "Namngivna färger".

CSS 2, SVG och CSS 2.1 tillåter webbförfattare att använda systemfärger , som är färgnamn vars värden tas från operativsystemet , väljer operativsystemets markerade textfärg eller bakgrundsfärgen för verktygstips -kontroller. Detta gör det möjligt för webbförfattare att utforma sitt innehåll i enlighet med användaragentens operativsystem. Den CSS3 färg modulen har föråldrat användningen av systemfärger till förmån för CSS3 UI System Utseende egendom, som i sin tur därefter sjunkit från CSS3.

CSS3 -specifikationen introducerar också HSL -färgutrymmesvärden för 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 -färg 4

Den 21 juni 2014 lade CSS WG till färgen RebeccaPurple till modulen Editor's Draft of the Colors, nivå 4, för att fira Eric Meyers dotter Rebecca som dog den 7 juni 2014, hennes sjätte födelsedag.

CSS stöder också den speciella färgen transparent, som representerar ett alfavärde på noll; Som standard transparentgörs som en osynlig nominell svart: rgba(0, 0, 0, 0).

CSS -färg 5

Webbsäkra färger

I mitten av 1990-talet kunde många skärmar bara visa 256 färger. Dessa kan dikteras av hårdvaran eller ändras av ett "färgtabell". När en färg hittas (t.ex. i en bild) som inte är tillgänglig, måste en annan användas. Detta kan göras genom att antingen använda den närmaste färgen eller genom att använda dithering .

Det fanns olika försök att göra en "standard" färgpalett. En uppsättning färger behövdes som kunde visas utan att röra sig på skärmar med 256 färger; nummer 216 valdes delvis för att datoroperativsystem vanligtvis reserverade sexton till tjugo färger för eget bruk; den valdes också eftersom den tillåter exakt sex nyanser med lika stora mellanrum av rött, grönt och blått (6 × 6 × 6 = 216), var och en från 00 till FF (inklusive båda gränserna).

Listan över färger presenteras som om den hade speciella egenskaper som gör dem immuna mot rysningar, men på 256-färgskärmar kan applikationer faktiskt ställa in en palett med val av färger som de väljer, dithering resten. Dessa färger valdes specifikt eftersom de matchade paletterna som valts av olika webbläsarprogram. Det var inte särskilt olika paletter som användes i olika webbläsare.

"Webbsäkra" färger hade en brist i det, på system som X11 där paletten delas mellan applikationer, tilldelades mindre färgkuber (5 × 5 × 5 eller 4 × 4 × 4) av webbläsare-"web- säkra "färger skulle skaka på sådana system. Olika resultat erhölls genom att tillhandahålla en bild med ett större färgintervall och låta webbläsaren kvantifiera färgutrymmet om det behövs, snarare än att drabbas av kvalitetsförlust av en dubbel kvantisering.

Under 2000-talet minskade användningen av 256-färgskärmar i persondatorer kraftigt till förmån för 24-bitars ( TrueColor ) skärmar, och användningen av "webbsäkra" färger har fallit i praktiskt bruk.

De "webbsäkra" färgerna har inte alla standardnamn, men var och en kan specificeras av en RGB- triplett: varje komponent (röd, grön och blå) tar ett av de sex värdena från följande tabell (av de 256 möjliga tillgängliga värden för varje komponent i hela 24-bitars färg).

Följande tabell visar alla "webbsäkra" färger. En nackdel med den nätsäkra paletten är dess lilla utbud av ljusa färger för webbsidans bakgrund, medan intensiteten i den nedre delen av intervallet, som de två mörkaste, liknar varandra, vilket gör det svårt att skilja dem. Värden som flankeras av "*" (asterisk) är en del av den "riktigt säkra paletten;" se Säkraste webbfärger nedan.

Färgbord

Varje färgkod som anges är en stenografi för RGB -värdet. Till exempel motsvarar kod 609 RGB-kod 102-0-153 eller HEX-kod #660099 .

Säkraste webbfärger

Designers uppmanades att hålla sig till dessa 216 "webbsäkra" färger på sina webbplatser eftersom det fanns många 8-bitars färgskärmar när 216-färgspaletten utvecklades. David Lehn och Hadley Stern upptäckte att endast 22 av de 216 färgerna i den nätsäkra paletten visas på ett tillförlitligt sätt utan inkonsekvent ommappning på 16-bitars datorskärmar . De kallade dessa 22 färger för "den riktigt säkra paletten"; den består till stor del av nyanser av grönt, gult och blått.

Tillgänglighet

Färgval

Vissa webbläsare och enheter stöder inte färger. För dessa skärmar eller blinda och färgblinda användare kan webbinnehåll beroende på färger vara oanvändbart eller svårt att använda.

Antingen ska inga färger anges (för att åberopa webbläsarens standardfärger), eller så ska både bakgrunden och alla förgrundsfärger (t.ex. färgerna i ren text, obesökta länkar, svävade länkar, aktiva länkar och besökta länkar) specificeras för att undvika svart på svart eller vitt på vitt effekter.

Färgkontrast

Den Web Content Accessibility Guidelines rekommenderar ett kontrastförhållande på minst 4,5: 1 mellan relativa ljusstyrkan av text och dess bakgrundsfärg eller åtminstone 3: 1 för stora text. Förbättrad tillgänglighet kräver kontrastförhållanden större än 7: 1.

Att ta itu med tillgänglighetshänsyn handlar dock inte bara om att öka kontrastförhållandet. Som en rapport till Web Accessibility Initiative indikerar är dyslektiska läsare bättre betjänade av kontrastförhållanden under maxvärdet. Rekommendationerna de hänvisar till av svart (0x0A0A0A) på benvitt (0xFFFFE5) och svart (0x000000) på creme (0xFAFAC8) har kontrastförhållanden på 11,7: 1 respektive 20,3: 1. Bland deras andra färgpar har brun (0x282800) på mörkgrön (0xA0A000) ett kontrastförhållande på 3,24: 1, vilket är mindre än WCAG -rekommendationen , mörkbrun (0x1E1E00) på ljusgrön (0xB9B900) har ett kontrastförhållande på 4,54 : 1 och blått (0x00007D) på gult (0xFFFF00) har ett kontrastförhållande på 11,4: 1. Lägg märke till att färgerna som nämns i rapporten använder andra färgvärden än webbfärgerna med samma namn.

Se även

Referenser

externa länkar

• CSS -färgvärde på MDN -webbdokument
• CSS2.1 Färgspecifikation
• Listning över webbsäkra färger
• Webbfärger på Curlie