# Starka färgpaletter som fortfarande går att läsa

[Canonical HTML page](https://gradiently.design/sv/guide/bright-color-palettes)

Klara färger är lätta att älska och lätta att göra oläsliga. Tricket är att veta vilka som vill ha svart text, vilka som vill ha vit, och att ge hela paletten en lugn plats att vila på.

## The short version

- 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.

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`.

| Färg | Hex | Med vit text | Med svart text |
| --- | --- | --- | --- |
| Citron | `#FFD60A` | 1,41:1 | 13,38:1, använd svart |
| Akvablå | `#00C2FF` | 2,07:1 | 9,14:1, använd svart |
| Mintturkos | `#00D1B2` | 1,95:1 | 9,68:1, använd svart |
| Klargrön | `#34C759` | 2,22:1 | 8,51:1, använd svart |
| Mandarin | `#FF7A00` | 2,61:1 | 7,23:1, använd svart |
| Vallmoröd | `#FF3B30` | 3,55:1 | 5,32:1, använd svart |
| Knallrosa | `#FF2D87` | 3,51:1 | 5,37:1, använd svart |
| Hallonröd | `#E0115F` | 4,76:1, använd vit | 3,97:1 |
| Elektrisk violett | `#8B3DFF` | 4,99:1, använd vit | 3,78:1 |
| Koboltblå | `#1D4ED8` | 6,70:1, använd vit | 2,82:1 |
| Signalröd | `#C81D11` | 5,77:1, använd vit | 3,27:1 |

WCAG AA kräver 4,5:1 för brödtext och 3:1 för stor text. Hallonrött och elektrisk violett är gränsfall: vit text klarar kravet, men bara precis.

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](https://gradiently.design/sv/guide/color-blindness-design), 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

- Varmvit: #fff8ec
- Knallrosa: #ff2d87
- Mandarin: #ff7a00
- Citron: #ffd60a
- Bläck: #111111

Fruktstånd. Tre varma starka färger mellan en varmvit och ett bläck. Bläcket bär all text, de starka färgerna bär former och stora ord.

- Nattviolett: #1a1033
- Mintturkos: #00d1b2
- Citron: #ffd60a
- Knallrosa: #ff2d87
- Lilavit: #f4f1ff

Spelhall. En mörk botten får starka färger att glöda, och alla tre klarar AA mot den: citron med 12,76:1, mintturkos med 9,23:1, knallrosa med 5,13:1.

- **Poolparty:** akvablått `#00C2FF`, klargrönt `#34C759`, citron `#FFD60A`, vitt `#FFFFFF`, djup marinblått `#0B1F3A` fö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 `#FFF8EC` med bläck `#111111` ger 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 `#2F6BFF` ger 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](https://gradiently.design/sv/guide/60-30-10-rule) 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.

Ett starkt inlägg för sommarrea där den lilla stödtexten försvinner mot den klara bakgrunden

En högljudd bakgrund med orden rakt ovanpå: rubriken överlever, detaljraden försvinner.

Samma starka inlägg för sommarrea där varje textrad syns tydligt mot ett lugnare område bakom

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](https://gradiently.design/sv/guide/gradient-interpolation) förklarar skillnaden.

- Rosa till citron: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Akva till grönt: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Rosa till akva i oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Rosa sken mot natt: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Närliggande starka färger blandas rent. Motsatser förblir klara när de interpoleras i oklch.

Fler kombinationer hittar du i [livfulla gradienter](https://gradiently.design/sv/guide/vibrant-gradients) och [neongradienter](https://gradiently.design/sv/guide/neon-gradients). Fullständig vägledning om kontrast finns i [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility).

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](https://gradiently.design/sv/guide/rgb-vs-cmyk) förklarar vad du kan vänta dig.

## FAQ

### 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.