# Regnbågsgradient som inte ser ut som en standardmall

[Canonical HTML page](https://gradiently.design/sv/guide/rainbow-gradient)

Standardregnbågen har en bländande gul rand och ett mörkblått hål. Rätta ljusheten, välj din båge, så blir spektrumet ett av de gladaste verktyg du har.

## The short version

- En regnbågsgradient blandar genom spektrumets nyanser, och standardversionen ser billig ut eftersom färgerna har mycket olika ljushet.
- I OKLCH har ren gul en ljushet på ungefär 97 % medan ren blå ligger nära 45 %, och därför visar en standardregnbåge en ljus rand och ett mörkt band.
- Regnbågsgradienter ser genomtänkta ut när du håller alla stopp på ungefär samma ljushet, sänker kroman lite och bara använder den del av spektrumet du behöver.
- CSS kan blanda en regnbåge åt dig med `linear-gradient(in oklch longer hue, ...)`, som går hela vägen runt nyanscirkeln mellan två färger.
- Text på en regnbåge behöver en lugn yta eller ett band bakom sig, eftersom kontrasten ändras längs hela gradienten.

En **regnbågsgradient** blandar genom spektrumets nyanser, från rött via orange, gult, grönt och blått till violett. Den version de flesta verktyg ger dig ser ut som en standardmall eftersom ljusheten hoppar: en bländande gul rand, ett mörkblått band och hårda kanter mellan dem. En regnbåge som ser genomtänkt ut håller varje färg på ungefär samma ljushet, använder lite lägre mättnad och täcker ofta bara en del av spektrumet.

Den här guiden visar varför mallen ser fel ut, tre sätt att rätta den, regnbågskoder att kopiera och den CSS som ger mjuka regnbågar i moderna webbläsare. Är nyans, ljushet och kroma nya begrepp för dig går [färgkoder förklarade](https://gradiently.design/sv/guide/color-codes-explained) igenom dem först.

## Därför ser standardregnbågen billig ut

Den klassiska regnbågen byggs i HSL genom att nyansen stegas fram medan mättnad och ljushet hålls fasta. Ljusheten i HSL är en formel, inte ett mått på hur ljusa färgerna ser ut. För ögat är ren gul mycket ljusare än ren blå, även om HSL kallar båda 50 %. OKLCH mäter upplevd ljushet, och siffrorna visar problemet tydligt.

| Färg | Hex | Ljushet i HSL | Ljushet i OKLCH |
| --- | --- | --- | --- |
| Röd | `#ff0000` | 50 % | 62,8 % |
| Gul | `#ffff00` | 50 % | 96,8 % |
| Grön | `#00ff00` | 50 % | 86,6 % |
| Cyan | `#00ffff` | 50 % | 90,5 % |
| Blå | `#0000ff` | 50 % | 45,2 % |
| Magenta | `#ff00ff` | 50 % | 70,2 % |

HSL säger att dessa är lika ljusa. Den upplevda ljusheten varierar från 45 % till 97 %, och därför ser standardregnbågen randig ut.

- Standardregnbåge i HSL: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Regnbåge med jämn ljushet: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

Samma resa runt nyanscirkeln. Den andra håller varje stopp nära 72 % ljushet i OKLCH, så ingen färg sticker ut eller sjunker undan.

## Så får du en regnbågsgradient att se genomtänkt ut

1. **Jämna ut ljusheten** Välj en enda upplevd ljushet, till exempel 72 % i OKLCH, och håll varje stopp där. Just den ändringen tar bort den gula randen och det blå hålet.
2. **Sänk kroman lite** Fullt mättade skärmfärger tävlar med varandra. En kroma runt 0,12 i OKLCH håller varje nyans stark och ändå inom det vanliga skärmar kan visa.
3. **Använd en båge, inte hela hjulet** Tre eller fyra närliggande nyanser, som korall till guld eller blågrön till violett, läses som ett medvetet val. Hela spektrumet läses som en testbild om det inte är själva poängen.
4. **Ge den en botten** En regnbåge på vitt känns som en leksak. Samma regnbåge som stiger ur nästan svart känns som ljus genom ett prisma. Bestäm vilken du vill ha.
5. **Lägg till struktur eller mjukhet** Korn, oskärpa eller ett långsamt radiellt tonande gör färgband till ljus. Se [kornig gradient](https://gradiently.design/sv/guide/grainy-gradients) för kornsidan.

## Regnbågsgradienter med koder att kopiera

De tre första täcker hela spektrumet på olika ljushetsnivåer. Resten är bågar: en del av regnbågen vald för en stämning, vilket är hur de flesta regnbågsidentiteter faktiskt fungerar.

- Balanserat spektrum: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Pastellregnbåge: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Spektrumhjul: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Soluppgångsbåge: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Lagunbåge: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Skymningsbåge: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prisma mot svart: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Pärlskimmer: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Åtta regnbågsgradienter. Balanserat och pastell håller varje stopp på en ljushet, bågarna väljer ett hörn av hjulet, och de två sista använder spektrumet som ljus.

## Mjuka regnbågar i CSS med OKLCH-nyansinterpolering

Modern CSS kan gå runt nyanscirkeln åt dig. Ställer du interpolationen på `oklch` och nyansmetoden på `longer hue` tar webbläsaren den långa vägen mellan två färger, så två stopp med samma nyans ger en full, jämn regnbåge. Det fungerar i aktuella versioner av Chrome, Edge, Safari och Firefox. Kontrollera [MDN:s kompatibilitetstabell](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) för din målgrupp.

```css
.rainbow {
  /* Fallback: hand-picked stops at even lightness */
  background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
  /* One colour, all the way round the hue wheel, at one lightness */
  background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}

.rainbow-arc {
  /* Only the short way from coral to teal, still perceptually even */
  background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}
```

Den första regeln ritar en full regnbåge av en enda färg. Den andra ritar en båge och tar den kortare vägen mellan två nyanser.

Håll kroman måttlig när du gör så. Vid hög kroma hamnar vissa nyanser, särskilt blå och violett, utanför det en vanlig sRGB-skärm kan visa, och webbläsaren måste pressa tillbaka dem, vilket ger tillbaka ojämna band. Mer om det i [mjukare CSS-gradienter med OKLCH](https://gradiently.design/sv/guide/css-gradient-oklch).

## Text på en regnbågsgradient

En regnbåge är den svåraste bakgrunden för text eftersom kontrasten ändras längs hela dess längd. Mörk text som läses bra över blågrönt kan försvinna över violett. Placera orden över den lugnaste delen, lägg dem på ett stilla band eller ett kort, eller använd en pastellregnbåge med mörk text och kontrollera det ljusaste och mörkaste stället bakom varje rad. [Text på gradient](https://gradiently.design/sv/guide/text-on-gradient) går igenom alternativen.

Ett kvadratiskt inlägg med orden Hej, färg rakt över en regnbågsgradient, där vissa bokstäver är svårare att läsa

Utan hjälp korsar orden alla nyanser och kontrasten ändras hela tiden.

Samma kvadratiska inlägg där gradienten mjuknar bakom orden Hej, färg så att texten går att läsa tydligt

När ytan lugnas bakom orden förblir regnbågen glad och raden går att läsa.

## Där regnbågsgradienter passar

- **Kreativa verktyg och färgprodukter**, där spektrumet visar spännvidd
- **Barnvarumärken och utbildning**, oftast i pastellversionen
- **Musik, festivaler och nattliv**, som ett prisma mot mörk botten
- **Holografiska och skimrande uttryck**, som en blek pärlskimmer. Se [holografiska gradienter](https://gradiently.design/sv/guide/holographic-gradients)
- **Pridekampanjer**, där regnbågsflaggan har en egen betydelse och sina egna sex ränder, så använd den med avsikt och inte som dekoration

> **Välj bågen först** Innan du tar hela spektrumet, fråga vilka tre eller fyra nyanser som bär stämningen. De flesta regnbågsdesigner som känns dyra är egentligen bågar.

En Mark i Gradiently kan rymma upp till åtta färger, vilket räcker för en full, jämn regnbåge med ett material och korn ovanpå. Du kan bygga en reglage för reglage i Forge.

## FAQ

### Hur gör jag en regnbågsgradient i CSS?

Använd `linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20))` för en mjuk, jämn regnbåge, med en gradient av hexstopp före som fallback.

### Varför har min regnbågsgradient en ljus gul rand?

Gult upplevs som mycket ljusare än blått eller rött vid samma ljushet i HSL. Håll varje stopp på en upplevd ljushet, till exempel 72 % i OKLCH, så försvinner randen.

### Vilka hexkoder har en pastellregnbåge?

Prova `#fcbfbe`, `#efca9f`, `#cbd8a5`, `#a3e0ca`, `#9ddcf1`, `#bfd0ff` och `#e6c3ee`, som alla ligger på en liknande hög ljushet.

### Kan man lägga text på en regnbågsgradient?

Ja, men kontrasten ändras över gradienten. Lägg texten över den lugnaste ytan, på ett band eller ett kort, eller använd en pastellregnbåge med mörk text och kontrollera varje punkt bakom orden.