# Monokromatiskt färgschema: en nyans, en hel identitet

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

En nyans låter begränsande tills du ser hur stort omfång som ryms i den. Byggd på rätt sätt kan en enda färg täcka bakgrunder, text, knappar och gradienter, och se mer särpräglad ut än en regnbåge.

## The short version

- Ett monokromatiskt färgschema använder en enda nyans i ett spann av ljushet och mättnad, byggt av tinter, skuggor och toner.
- En tint är en nyans blandad med vitt, en skugga är en nyans blandad med svart och en ton är en nyans blandad med grått.
- En användbar monokromatisk skala har ungefär nio eller tio steg från nästan vitt till nästan svart, jämnt fördelade i upplevd ljushet.
- Att förskjuta nyansen något mot de ljusa och mörka ändarna hindrar en monokromatisk palett från att se livlös ut.
- Monokromatiska paletter ger lugna, sammanhållna gradienter, men långsamma övergångar i en enda nyans bandar lätt och mår bra av fint korn.

Ett **monokromatiskt färgschema** använder en nyans och inget annat, varierad i ljushet och mättnad. Tänk marinblått, koboltblått, himmelsblått och isblått: allt blått, tydligt besläktat, med nog kontrast mellan sig för att klara bakgrunder, text och accenter. Eftersom varje färg delar samma nyans ser en monokromatisk palett alltid enad ut. Arbetet ligger i att bygga tillräckligt stort omfång inom den ena nyansen.

Den här guiden går igenom de tre sätten att variera en nyans, hur du bygger en skala du faktiskt kan designa med och hur monokrom färg fungerar i gradienter. För det bredare sammanhanget, se [grunderna i färglära](https://gradiently.design/sv/guide/color-theory-basics).

## Tinter, skuggor och toner

Varje färg i en monokromatisk palett kommer från ett av tre drag. En **tint** lägger till vitt, vilket gör färgen ljusare och mjukare. En **skugga** lägger till svart, vilket gör den djupare. En **ton** lägger till grått, vilket gör den stillsammare utan att ljusheten ändras särskilt mycket.

- Tinter: mot vitt: `linear-gradient(90deg, #2563eb 0%, #ffffff 100%)`
- Skuggor: mot svart: `linear-gradient(90deg, #2563eb 0%, #000000 100%)`
- Toner: mot grått: `linear-gradient(90deg, #2563eb 0%, #7a7a7a 100%)`

Ett blått, tre riktningar. De flesta monokromatiska paletter använder alla tre.

## Så bygger du en monokromatisk palett

En handfull slumpade tinter är ingen palett. Det du vill ha är en skala: en följd av steg från nästan vitt till nästan svart, jämnt fördelade så att varje steg ser lika olikt ut sin granne som det förra. Nio till elva steg är en vanlig storlek, och det är vad de flesta designsystem använder.

- Turkos 50: #f0fdfa
- Turkos 100: #ccfbf1
- Turkos 200: #99f6e4
- Turkos 300: #5eead4
- Turkos 400: #2dd4bf
- Turkos 500: #14b8a6
- Turkos 600: #0d9488
- Turkos 700: #0f766e
- Turkos 800: #115e59
- Turkos 900: #134e4a

En turkos skala i tio steg. Ljusa steg för bakgrunder, mellansteg för färg, mörka steg för text.

1. **Välj kärnnyansen** Välj den version av färgen du gillar mest i full styrka. Den blir mitten av skalan.
2. **Sätt ändarna** Välj ett nästan vitt med en aning av nyansen och ett nästan svart med en aning av nyansen. Undvik rent vitt och rent svart, som ser frånkopplade ut.
3. **Fyll stegen efter ljushet** Fördela stegen efter hur ljusa de ser ut, inte efter lika stora hex- eller HSL-värden. Perceptuella rymder som OKLCH gör det enkelt, se [OKLCH-gradienter](https://gradiently.design/sv/guide/css-gradient-oklch).
4. **Sänk mättnaden i ändarna** Mycket ljusa och mycket mörka steg ser bättre ut lite dämpade. Full mättnad i ytterlägena ser skrikig eller gyttjig ut.
5. **Knuffa nyansen** Låt den ljusa änden glida något varmare eller svalare och den mörka åt andra hållet. Det ger liv utan att bryta schemat.

### Därför hjälper en liten nyansförskjutning

Verkliga föremål mörknar sällan bara genom att man lägger till svart: skuggor tar upp svalare eller varmare ljus från omgivningen. En skala som bara blandar svart och vitt ser platt ut i jämförelse. Att förskjuta nyansen några grader över skalan är standard inom illustration och designsystem.

- Rak skala: bara vitt och svart: `linear-gradient(90deg, #d3e0fb 0% 20%, #7ca1f3 20% 40%, #2563eb 40% 60%, #1a45a5 60% 80%, #0f285e 80% 100%)`
- Nyansförskjuten: himmel och indigo: `linear-gradient(90deg, #e0f7ff 0% 20%, #7cc4f5 20% 40%, #2563eb 40% 60%, #2f3aa8 60% 80%, #1e1b4b 80% 100%)`

Två blå skalor i fem steg kring samma kärna, `#2563eb`. Den andra glider mot himmelsblått i den ljusa änden och indigo i den mörka, så den ser belyst ut i stället för blandad.

## Att driva en hel identitet på en nyans

Ett monokromatiskt varumärke kan vara förvånansvärt särpräglat, eftersom det är disciplinerat på ett sätt som de flesta varumärken inte är. Knepet är att ge varje steg i skalan ett jobb och hålla sig till det.

| Skalsteg | Jobb |
| --- | --- |
| 50 till 100 | Bakgrunder för sidor och kort |
| 200 till 300 | Ramar, avdelare, stilla ytor |
| 400 till 600 | Varumärkesfärg, knappar, illustration |
| 700 till 800 | Rubriker, länkar, kraftiga ytor |
| 900 och mörkare | Brödtext, bakgrunder i mörkt läge |

Roller för en monokromatisk skala. Text och bakgrund kommer från motsatta ändar, och där bor kontrasten.

Para alltid ihop text och bakgrund från motsatta ändar av skalan. Två mellansteg ser fina ut som färgprover och fungerar dåligt som text. Kontrollera med riktlinjerna i [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility). Anteckna skalan, med varje stegs roll, i ditt [varumärkeskit](https://gradiently.design/sv/guide/brand-kit) så att alla använder samma värden.

Ett stående redaktionellt inlägg med en serifrubrik över en mjuk bakgrund i en enda nyans

Ett lugnt fält i en enda familj under redaktionell typ.

Ett brett mejlhuvud med en rubrik över en lugn bakgrund i en enda nyans

Samma look förd över till ett mejlhuvud.

Det enda en monokromatisk identitet saknar är en självklar accent. Om dina designer behöver att en knapp eller ett pris hoppar fram kan du tillåta en färg utanför nyansen och använda den sparsamt. Då rör du dig mot en [analog palett](https://gradiently.design/sv/guide/analogous-colors) eller en monokrom med accent, båda helt bra.

## Monokromatiska gradienter

Gradienter i en enda nyans hör till de elegantaste du kan göra: de antyder ljus som faller över ett material. De blir aldrig gyttjiga, eftersom det inte finns någon andra nyans att slåss med.

- Midnattsblått: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Ros: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Salvia: `linear-gradient(160deg, #1f2e24 0%, #4b6b55 55%, #c9dbc8 100%)`
- Sand: `linear-gradient(135deg, #5c4630 0%, #b08d63 55%, #efe3cf 100%)`
- Violett glöd: `radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 40%, #2e1065 100%)`
- Grafit (helt utan nyans): `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #525252 100%)`

Sex gradienter i en enda nyans. Var och en rör sig bara i ljushet och lite i mättnad.

> **Se upp för bandning** Eftersom en monokromatisk gradient ändras långsamt har den färre färgnivåer att sprida över skärmen och är benägen att få synliga ränder, särskilt i mörka blå och grå toner. Ett fint lager korn löser det, se [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding).

## FAQ

### Vad är ett monokromatiskt färgschema?

Ett monokromatiskt färgschema använder en enda nyans i ett spann av tinter, skuggor och toner, från mycket ljus till mycket mörk.

### Vad är skillnaden mellan en tint, en skugga och en ton?

En tint är en nyans blandad med vitt, en skugga är blandad med svart och en ton är blandad med grått.

### Är svartvitt ett monokromatiskt schema?

Strängt taget är svart, vitt och grått akromatiska, alltså utan nyans. I vardagligt tal kallas de ofta monokroma, och de följer samma principer.

### Hur många färger ska en monokromatisk palett ha?

Ungefär nio till elva steg från nästan vitt till nästan svart ger tillräckligt omfång för bakgrunder, text, ramar och varumärkesfärg.

### Kan ett varumärke använda bara en färg?

Ja, om paletten har ett fullt omfång av ljushet och varje steg har en tydlig roll. Många varumärken med en färg lägger till en liten accent för uppmaningar till handling.