# Korallgradient: livliga koder mellan rosa och orange

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

Korall finns precis där rosa blir orange, vilket ger den värmen från den ena och charmen från den andra. Den är livlig, vänlig och förvånansvärt svår att lägga text på. Här är koder och lösningarna.

## The short version

- En korallgradient blandar varma, rosiga oranger, oftast med lutning mot rosé i ena änden och mandarin eller persika i den andra.
- CSS-färgnamnet coral är #ff7f50, en klar orange som lutar åt korall.
- Korall och turkos är nästan motsatser, så en direkt blandning mellan dem blir grå; använd turkos som en separat yta eller accent i stället.
- Vit text faller igenom på klar korall; använd ett djupt vin eller brunt som #3b0d0c, eller flytta vit text till en djupröd korall.
- Korall passar sommarkampanjer, mat och dryck, skönhet, träning och vänliga konsumentappar.

En **korallgradient** blandar varma, rosiga oranger, färgerna där rosa blir orange. Luta den mot rosé så känns den charmig och fräsch; luta den mot mandarin så känns den solig och energisk. Korall är glad och mycket synlig, vilket gör den till en favorit för sommar, mat, skönhet och träning. Dess två fällor är en grå rand när den möter turkos och text som försvinner på den. Båda är lätta att undvika när du känner till dem.

## Korall, lax, persika och vattenmelon

Varma rosiga oranger delar många namn. De är värda att skilja åt, eftersom rätt ord hjälper dig att välja rätt stopp och beskriva vad du vill ha för en designer eller för Designer i Gradiently.

| Färg | Typisk hex | Karaktär |
| --- | --- | --- |
| Korall | `#ff7f50` | Klar och varm, lutar åt orange |
| Living coral | `#ff6f61` | Rosigare, mjukare korall |
| Lax | `#fa8072` | Blekare och rosigare, lätt dammig |
| Persika | `#ffcba4` | Mycket ljusare, mer orange, mild |
| Vattenmelon | `#fb7185` | Rosigare och kallare, lekfull |

Korall är den klaraste av dessa. Grannarna är användbara stopp i en korallgradient.

## Klara korallgradienter

Det här är korall när den är som livligast. De håller uppmärksamheten i miniatyrstorlek, och därför fungerar de så bra för rea-inlägg, lanseringar, träningspass och allt du vill ska synas i ett fullt flöde.

- Klassisk korall: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Living coral: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Tropisk punch: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Korallblom: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Korallsolnedgång: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Fem klara korallblandningar. Varje partnerfärg är en nära granne, så blandningarna förblir mättade.

Några sätt att använda dem: ”Klassisk korall” bakom en enda rad som ”Dörrarna öppnar klockan tolv” på en story i 1080×1920; ”Tropisk punch” som omslag till en sommardrinkmeny; ”Korallsolnedgång” nedför en Pinterest-pin i 1000×1500 för en semesterguide. Korall är stark, så låt den fylla bilden och håll allt annat på sidan enkelt: en rubrik, en detalj, gott om utrymme.

## Korallgradienter från rosa till orange

### Rosa lutande korall

Skjut korall mot rosé och blush så blir den mjukare och mer romantisk, perfekt för skönhet, blomsterhandlare, bröllop och livsstilsvarumärken. För den rosigare sidan av familjen, se [rosa gradienter](https://gradiently.design/sv/guide/pink-gradient).

- Roséfärgad korall: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Laxblush: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Vattenmelonskorall: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Rosa lutande koraller känns mjukare och passar skönhets- och livsstilsvarumärken.

### Orange lutande korall

Skjut den åt andra hållet, mot aprikos och mandarin, så blir korall soligare och högljuddare: sommarmenyer, smoothiebarer, semestrar. [Orangerosa gradienter](https://gradiently.design/sv/guide/orange-pink-gradient) täcker hela spannet mellan de två.

- Aprikoskorall: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Korall till mandarin: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Strandbar: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

Orange lutande koraller är soligare, mer energiska och gjorda för sommaren.

## Korall och turkos utan grå mitt

Korall och turkos är ett av de stora paren: varmt mot kallt, rev mot hav. Men de sitter nästan rakt emot varandra på färghjulet, så en rak blandning mellan dem går genom ett trist grått i mitten. Lösningen är att hålla dem isär. Använd turkos som botten med ett korallljus, korall som botten med en turkos accent, eller led mellan dem via mycket bleka toner. [Leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar varför mitten blir grå.

- Undvik: grå mitt: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Korallsol på turkos: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Via snäckvitt: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

Den första blandningen blir grå i mitten. De andra två håller korall och turkos som separata färger, eller förenar dem via en blek ton.

På en meny eller affisch, prova en mycket mörk turkos som `#042f2e` med korallfärgade rubriker och knappar. Korall når ungefär 5,8 till 1 där, långt bättre än vitt på korall, och det ser kraftfullt och sommarigt ut. Turkossidan tas upp i [turkosa gradienter](https://gradiently.design/sv/guide/teal-gradient).

## Korall på mörk botten

Korall glöder vackert mot djup plommon, marinblått eller nästan svart. Ett enda korallljus på mörk botten känns som en neonskylt eller en solnedgång över havet, och passar barer, musik, nattliv och kvällsevent. Håll korallljuset borta från där orden sitter och sätt dem i blekt snäckvitt eller vitt på den mörka ytan.

- Korall på vin: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Solnedgång över viken: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Kol och korall: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Ett korallljus, gott om mörker. Korallen läses klarare än den skulle göra på vitt.

## Text på en korallgradient

Korall ser tillräckligt kraftig ut för vit text, och det är precis därför så många korallfärgade designer misslyckas. Vitt på `#ff7f50` mäts till ungefär 2,5 till 1, långt under de 4,5 till 1 som krävs för brödtext. Ett djupt vinbrunt som `#3b0d0c` mäts till ungefär 6,7 till 1 på samma korall och behåller värmen. Vill du ha vit text, fördjupa korallen till ett rött som `#e11d48`, där vitt når ungefär 4,7 till 1. Metoden finns i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility).

Ett rea-inlägg från en pilatesstudio med blek text över den klaraste delen av en korallgradient

Ljusa ord rakt över klar korall ser kraftfulla ut men är svåra att läsa i mobilen i dagsljus.

Samma pilatesinlägg med tydlig text på en lugnare, djupare del av korallgradienten

Samma inlägg med en lugnare zon och en textfärg som passar den.

En Gradiently-Mark gör den här justeringen själv: den flyttar sin lugnaste, mest kontrasterande region bakom dina ord, och Auto-bläck väljer ljus eller mörk text för varje rad ur Markens egen palett. Inga rutor eller skuggor behövs.

## CSS för en korallgradient på en knapp

Korall blir en vänlig uppmaning. Håll gradienten ljus nog för att en mörk etikett förblir läsbar, och låt positionen glida vid hovring i stället för att byta färger. [CSS-gradientknappar](https://gradiently.design/sv/guide/css-gradient-button) har fler mönster.

```css
.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}
```

En korallpill med djupvin text. Gradienten glider vid hovring i stället för att byta färg.

## FAQ

### Vad är hex-koden för korall?

CSS-färgnamnet `coral` är `#ff7f50`. Pantones Living Coral approximeras ofta som `#ff6f61`.

### Vilka färger passar till en korallgradient?

Persika, rosé, mandarin och guld går i varandra med den. Djup turkos, marinblått och plommon blir starka partner när de hålls som separata ytor.

### Varför ser min gradient mellan korall och turkos grå ut?

Korall och turkos sitter nästan rakt emot varandra på färghjulet, så färgerna mellan dem tappar mättnad. Håll dem isär, eller förena dem via en blek ton.

### Kan jag använda vit text på korall?

Inte på klar korall, där vitt inte klarar kontrasten. Använd ett djupt vin eller brunt, eller fördjupa korallen till ett rött innan du använder vitt.

### Vad är skillnaden mellan korall och lax?

Lax är blekare, rosigare och lite dammigare. Korall är klarare, mer mättad och lutar mer åt orange.