Kortversionen
- En stark färgpalett består av mycket mättade färger som knallrosa, mandarin, citrongult, elektriskt blått och klargrönt.
- Starkt gult, grönt, cyan, turkos och orange är ljusa färger, så de behöver mörk text i stället för vit.
- Starkt rött och rosa ger runt 3,5:1 mot vitt, vilket inte klarar WCAG AA för brödtext, så sätt liten text på dem i svart och spara vitt till stora rubriker.
- Två starka färger med liknande ljushet intill varandra verkar vibrera, så separera dem med en neutral färg eller en tydlig skillnad i ljushet.
- Varje stark palett behöver ett lugnt ankare, oftast en nästan svart eller en varm off white, som bär texten och ger färgen utrymme.
På den här sidan
En stark färgpalett går att läsa när du behandlar varje klar färg efter dess ljushet och inte efter hur högljudd den är. Citron #FFD60A, klargrönt #34C759, akvablått #00C2FF och mandarin #FF7A00 är alla så ljusa att de behöver nästan svart text. Knallrosa #FF2D87 och vallmorött #FF3B30 hamnar i en obekväm mitt: svart text klarar kraven, men vit fungerar bara för stora rubriker. Lägg till ett lugnt ankare, ge varje stark färg sitt eget utrymme, så blir en palett som ser ut som en godisbutik en du faktiskt kan sätta ord på.
Vilka starka färger behöver svart text
Mättnad får en färg att kännas stark, men läsbarheten beror på ljushet. Många starka färger är mycket ljusare än de ser ut, och därför känns vit text på klargrönt eller gult högljudd men är ändå svår att läsa. Tabellen nedan mäter elva starka färger mot vitt och mot nästan svart #111111.
#FFD60AMed vit text
Med svart text
#00C2FFMed vit text
Med svart text
Hex
#00D1B2Med vit text
Med svart text
#34C759Med vit text
Med svart text
#FF7A00Med vit text
Med svart text
Hex
#FF3B30Med vit text
Med svart text
Hex
#FF2D87Med vit text
Med svart text
Hex
#E0115FMed vit text
Med svart text
Hex
#8B3DFFMed vit text
Med svart text
Hex
#1D4ED8Med vit text
Med svart text
Hex
#C81D11Med vit text
Med svart text
En användbar tumregel: den ljusa sidan av färghjulet, från orange via gult och grönt till cyan, tar svart text, och det gör även de hetaste rosa och röda nyanserna. Den mörka sidan, från blått via violett till karmosin, tar vit text. Om du gör design för en bred publik, läs också färgblindsvänliga paletter, eftersom starka färger som bara skiljer sig i nyans kan se likadana ut för vissa läsare.
Sex starka färgpaletter med hexkoder
- Poolparty: akvablått
#00C2FF, klargrönt#34C759, citron#FFD60A, vitt#FFFFFF, djup marinblått#0B1F3Aför text. - Lågstadiet: koboltblått
#1D4ED8, signalrött#C81D11, citron#FFD60A, papper#FAF7F0, bläck#111111. - Risotryck: fluorescerande rosa
#FF48B0, blått#0078BF, gult#FFE800, tidningspapper#F2EFE6, svart#1A1A1A. - Tropiskt: hallonrött
#E0115F, mango#FFA51F, palm#00A86B, sand#F6EBD9, kakao#2B1B14.
Så håller du en stark palett läsbar
- 1
Välj ett ankare först
Välj en nästan svart eller en varm off white och låt den täcka det mesta av ytan. Varmvitt
#FFF8ECmed bläck#111111ger 17,89:1, så alla ord i bläck går att läsa. - 2
Sätt texten i ankaret, inte i en stark färg
Brödtext hör hemma i ankarfärgen. Starka färger kan bära en rubrik eller en enda stor siffra, där gränsen 3:1 för stor text gäller.
- 3
Separera starka färger med samma ljushet
Knallrosa intill ett elektriskt blått som
#2F6BFFger 1,28:1, och kanten verkar skimra. Lägg vitt, svart eller luft mellan dem, eller para en ljus stark färg med en mörk. - 4
Begränsa hur många starka färger som rör orden
Tre starka färger i en palett räcker gott, och bara en ska ligga bakom ett textblock. 60-30-10-regeln hjälper här: ankare 60, ledande stark färg 30, accenter 10.
- 5
Kolla den på en telefon utomhus
Starka färger blir urvattnade i solljus och på skärmar med låg ljusstyrka. Om orden fortfarande går att läsa på en dämpad telefon fungerar paletten.
En högljudd bakgrund med orden rakt ovanpå: rubriken överlever, detaljraden försvinner.
Samma färger, men bakgrunden lugnar sig bakom texten. Fortfarande stark, och varje rad går att läsa.
Versionen till höger är vad Gradiently gör som standard. En Mark vet var dina ord ligger, drar sin mest högljudda färg åt sidan och väljer ljus eller mörk text rad för rad, så du kan behålla en högljudd palett utan ruta eller skugga bakom texten.
Starka gradienter utan grå mitt
Blanda två starka färger från motsatta sidor av färghjulet i vanlig sRGB och mittpunkten blir grå eller brun. Välj antingen grannfärger, eller be webbläsaren interpolera i oklch, vilket håller mitten mättad. Gradientinterpolation förklarar skillnaden.
Fler kombinationer hittar du i livfulla gradienter och neongradienter. Fullständig vägledning om kontrast finns i färgkontrast.
En varning om paletten ska tryckas: de mest elektriska skärmfärgerna, särskilt akva, knallrosa och klargrönt, ligger utanför vad vanliga CMYK-färger kan återge, och de kommer tillbaka från tryckeriet märkbart blekare. Be om ett korrektur eller planera för special- eller neonfärger. RGB mot CMYK förklarar vad du kan vänta dig.
Vanliga frågor
Vad är en stark färgpalett?
En uppsättning mycket mättade färger som knallrosa, mandarin, citrongult, akvablått och klargrönt, oftast balanserade med ett neutralt ankare för text.
Ska jag använda vit eller svart text på starka färger?
Använd svart på ljusa starka färger som gult, orange, grönt, akva och turkos, och även på knallrosa och vallmoröd. Använd vit på mörka starka färger som kobolt, violett, hallonrött och signalrött.
Varför ser vissa starka färger ut att vibrera?
Två mättade färger med liknande ljushet intill varandra, som knallrosa och elektriskt blått, får kanten mellan dem att skimra. Separera dem med en neutral färg eller ändra ljusheten på den ena.
Hur många starka färger bör en palett ha?
Två eller tre starka färger plus en eller två neutrala räcker gott. Bara en stark färg bör ligga bakom ett textblock.
Är starka färger dåliga för tillgängligheten?
Inte i sig. Problemen kommer av text på starka färger med för låg kontrast, så kontrollera varje textpar mot WCAG och håll brödtext i ett mörkt eller ljust ankare.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil