Färgväljare

Varje färg på den här sidan ligger i sRGB, webbens standardfärgrymd sedan webbläsarna införde den i slutet av 1990-talet. En skärm blandar rött, grönt och blått ljus, och varje kanal har 256 nivåer (0–255), vilket ger 16 777 216 möjliga färger. RGB skriver de tre talen direkt; HEX skriver samma tre tal i bas 16, med två siffror vardera, så #FF6600 är rött 255, grönt 102, blått 0. Den kortare formen med tre siffror dubblerar varje siffra: #F60 är #FF6600.

HSL och HSB (även kallat HSV) beskriver samma färger på ett sätt som är lättare att justera för hand. Nyans är en vinkel på färghjulet: 0° rött, 120° grönt, 240° blått. Skillnaden ligger i det sista talet. I HSL är ljushet 100 % alltid vitt och 50 % är den renaste varianten av nyansen; i HSB är ljusstyrka 100 % den rena nyansen och vitt kräver mättnad 0 %. Designprogram som Photoshop och Figma använder HSB i sina färgväljare, medan CSS har inbyggt stöd för hsl(), och därför visas båda ovan.

Skärmar lägger till ljus; skrivare drar ifrån det med cyan, magenta, gul och svart bläck. De två systemen täcker olika färgområden, så kallade färgomfång. Mycket mättade skärmfärger, som ett klart RGB-grönt, ett elektriskt blått eller ett neonorange, ligger utanför det som processfärger kan återge, så de blir matta i tryck jämfört med på en skärm.

CMYK-värdena här bygger på den enkla matematiska omvandlingen utan ICC-profil, vilket duger för en grov beskrivning men inte för tryckpressen. Ett tryckeri konverterar med en profil för sitt papper och sin press, till exempel FOGRA39 i Europa eller GRACoL i USA, och samma RGB-färg kan få olika bläckprocent i var och en. Skicka därför RGB- eller HEX-värdet tillsammans med den profil som tryckeriet ber om.

WCAG 2.1 jämför den relativa luminansen hos två färger: den ljusare plus 0,05, delat med den mörkare plus 0,05. Resultatet går från 1:1 (identiska färger) till 21:1 (svart på vitt). Nivå AA kräver minst 4,5:1 för normal text och 3:1 för stor text, alltså 18 punkter eller 14 punkter fetstil; nivå AAA höjer det till 7:1 och 4,5:1. Delar av gränssnittet, som kantlinjer på fält och ikoner, kräver 3:1 mot omgivningen enligt kriterium 1.4.11.

Luminansen väger grönt mycket tyngre än blått, eftersom ögat är mest känsligt för det. Därför faller gul text på vitt igenom rejält medan mörkblått på vitt klarar sig lätt, trots att båda färgerna ser fullt mättade ut. Logotyper och rent dekorativ text är undantagna från regeln.

Bildpaletten läser din fil med webbläsarens canvas, förminskar den till högst 200 pixlar på den långa sidan och grupperar liknande pixlar med median cut-metoden som Paul Heckbert beskrev 1982: färgområdet delas om och om igen längs sin bredaste kanal tills sex grupper återstår, och varje grupps medelvärde blir en färgruta. Transparenta pixlar ignoreras, så en logotyp på transparent bakgrund ger logotypens färger.

När du har färgerna fungerar en platt logotyp ofta bättre som vektor. Bild till SVG-konverteraren spårar den till former som behåller exakt dessa färger, och om du gör en kanalbanner anpassar storleksändraren för YouTube-banner bilden till 2560 × 1440 med hänsyn till säkerhetszonen.