HEX, RGB, HSL, CMYK och kontroll av textkontrast

En färgkod är en och samma färg skriven i ett annat format. HEX, RGB och HSL beskriver samma ljus på en skärm, så de går att omvandla exakt till varandra, bortsett från avrundning. CMYK beskriver bläck på papper, så omvandlingen från skärmvärden är bara en uppskattning. WCAG-kontrastkvoten är ett separat tal som jämför hur ljusa två färger är, och det avgör om texten går att läsa. Klistra in en färg i färgkonverteraren för att se alla format samtidigt.

FärgkonverterareBehöver en färg i ett annat formatGör det gratis

Om färgen du behöver finns i ett foto, en logotyp eller en skärmbild, läs av den från pixeln med bildfärgväljaren först och klistra sedan in HEX-koden här. Så väljer du en exakt färg från en bild går igenom stegen.

HEX och RGB är samma siffror

En HEX-kod är tre par hexadecimala siffror. #34D6A0 innehåller ett värde för rött, grönt och blått. Varje par är ett tal från 00 till FF, vilket motsvarar 0 till 255 i decimalform. Alltså är 34 lika med 52, D6 lika med 214 och A0 lika med 160, och RGB-formen blir rgb(52, 214, 160).

Att skriva talet i hexadecimalt ändrar bara hur det ser ut. Förkortningen #abc betyder #aabbcc, där varje siffra upprepas. En åttasiffrig kod lägger till ett alfapar sist, från 00 för helt transparent till FF för helt ogenomskinlig, så #34D6A080 är ungefär halvtransparent. RGBA skriver samma alfavärde som ett tal från 0 till 1.

CSS accepterar även färgnamn. rebeccapurple är #663399. Konverteraren läser namnen via webbläsaren själv, så alla namn som webbläsaren känner till fungerar.

HSL beskriver en färg som människor gör

HSL står för nyans, mättnad och ljushet. Nyansen är en vinkel runt ett färghjul: rött är 0 grader, grönt är 120 och blått är 240. Mättnaden säger hur långt färgen är från grått, och ljusheten säger hur långt den är från svart eller vitt.

Samma #34D6A0 är hsl(160, 66%, 52%). Nyansen ligger mellan grönt och blått, mättnaden är hög och ljusheten är precis över mittpunkten. HSL är det enklaste formatet att redigera för hand, eftersom du kan behålla nyansen och bara flytta ljusheten för att få en ljusare eller mörkare nyans.

HSV liknar HSL men använder värde, alltså ljusheten hos den starkaste kanalen, i stället för ljushet. Vissa färgväljare använder det, så du kan stöta på det i andra verktyg. Konverteraren visar det bredvid HSL så att du kan jämföra de två.

CMYK är för bläck, så det är en uppskattning

Skärmar adderar ljus: rött, grönt och blått tillsammans ger vitt. Skrivare tar bort ljus med bläck: cyan, magenta, gul och svart på vitt papper. De två systemen går inte att matcha exakt, så ett CMYK-värde är alltid en översättning.

Konverteraren använder den enkla formeln. Svart är K, det vill säga ett minus det största av värdena för rött, grönt och blått på en skala från 0 till 1. Cyan, magenta och gul räknas sedan ut från det som K lämnar kvar. Formeln bortser från bläcket, papperet och färgprofilen som skrivaren använder. Det tryckta resultatet blir därför annorlunda, och mycket ljusa färger kan ligga utanför vad CMYK-bläck alls kan skriva ut. Använd CMYK-värdet för att starta en diskussion med tryckeriet och be om ett korrektur innan en stor upplaga.

Kontrast handlar om ljus, inte nyans

WCAG-kontrastkvoten jämför två färger med deras relativa luminans. Luminansen räknas ut från värdena för rött, grönt och blått efter gammakorrigering, och grönt väger tyngst eftersom mänskliga ögon reagerar mest på det. Varje kanal omvandlas först från skalan 0 till 255, och luminansen är 0,2126 gånger rött, plus 0,7152 gånger grönt, plus 0,0722 gånger blått.

Kvoten är den ljusare luminansen plus 0,05, delat med den mörkare luminansen plus 0,05. Svart på vitt ger 21 till 1, det högst möjliga värdet. Två färger kan se ganska olika ut i nyans och ändå ge en låg kvot om de har samma ljushet, och det är just det fallet kontrollen finns för att fånga. Samma låga kontrast är anledningen till att QR-koder inte går att skanna.

Gränsvärdena

WCAG 2.x anger två nivåer, och kvoten som krävs beror på textens storlek.

• Nivå AA: 4,5 till 1 för normal text och 3 till 1 för stor text.
• Nivå AAA: 7 till 1 för normal text och 4,5 till 1 för stor text.

Stor text är 24 pixlar eller mer, eller 18,66 pixlar och fet. Allt som är mindre räknas som normal text. Grå text på vitt är ett vanligt misslyckande. En mellangrå som #777777 på vitt ger ungefär 4,48 till 1. Den klarar inte AA för normal text med en liten marginal, men klarar AA för stora rubriker.

Konverteraren visar kvoten avrundad till två decimaler, men varje godkänt eller underkänt resultat bygger på det exakta värdet. Ett värde som visas som 4,50 kan alltså fortfarande underkännas om det ligger något under. Kontrollen mäter bara en sak. Den täcker inte fettstil, radavstånd eller hur personer med färgblindhet ser en design, så testa även den riktiga sidan i sina verkliga storlekar.

Toner och nyanser

Remsan under konverteraren visar nio steg runt färgen: fyra toner blandade mot vitt, själva färgen och fyra nyanser blandade mot svart. Ett klick på ett steg kopierar dess HEX-kod. Det hjälper när du behöver en uppsättning närliggande färger, till exempel en ljus bakgrund, ett hover-läge och en mörk textfärg, alla hämtade från ett enda varumärkesvärde. Kontrollera varje par du väljer i avsnittet om kontrast innan du använder det.

Så gör du med fixmint

1. Klistra in en färg i rutan Färg som HEX, RGB, HSL eller ett CSS-namn som rebeccapurple.
2. Läs raderna HEX, RGB, HSL, HSV och CMYK. Tryck på Kopiera bredvid den du behöver. CMYK är märkt som ungefärligt.
3. Skriv din bakgrundsfärg i Bakgrund, eller använd färgrutan, och läs kvoten under På vitt, På svart och På din bakgrund.
4. Kontrollera de fyra markeringarna under varje kvot: AA och AAA, var och en för normal och stor text.
5. Under Toner och nyanser trycker du på en färgruta för att kopiera den.

Snabba svar

Är CMYK-värdet exakt?

Nej. Det är en enkel aritmetisk omvandling som bortser från skrivaren, papperet och färgprofilen. Se det som en utgångspunkt och be om ett korrektur.

Gör en godkänd kontrastkvot en design tillgänglig?

Den visar att textfärgerna klarar ett mätbart gränsvärde. Tillgänglighet beror också på storlek, radavstånd, rörelse och hur sidan är byggd, så kvoten är en vägledning, inte en fullständig granskning.

Vilket format ska jag spara i en stilmall?

Det du kan läsa och redigera enklast. HEX är kompakt och vanligt. HSL är lättare att justera för hand, eftersom du ändrar ljusheten utan att ändra nyansen.