# Korallgradient: livlige koder mellom rosa og oransje

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

Korall ligger akkurat der rosa blir oransje, med varmen fra den ene og sjarmen fra den andre. Den er livlig, vennlig og overraskende vanskelig å sette tekst på. Her er kodene og løsningene.

## The short version

- En korallgradient blander varme, rosaskjære oransjetoner, vanligvis med rosa i den ene enden og mandarin eller fersken i den andre.
- CSS-fargen coral er #ff7f50, en klar korallfarge som heller mot oransje.
- Korall og blågrønt er nesten motsetninger, så en direkte blanding blir grå. Bruk heller blågrønt i et eget område eller som aksent.
- Hvit tekst har for svak kontrast på klar korall. Bruk en dyp vin- eller brunfarge som #3b0d0c, eller flytt hvit tekst til en dyp rødkorall.
- Korall passer til sommerkampanjer, mat og drikke, skjønnhet, trening og vennlige forbrukerapper.

En **korallgradient** blander varme, rosaskjære oransjetoner, fargene der rosa blir oransje. Drei den mot rosa for et sjarmerende, friskt uttrykk, eller mot mandarin for et solrikt, energisk uttrykk. Korall er munter og svært synlig, og derfor en favoritt til sommer, mat, skjønnhet og trening. De to fellene er en grå stripe der den møter blågrønt, og tekst som forsvinner på den. Begge er lette å unngå når du kjenner dem.

## Korall, laks, fersken og vannmelon

Varme, rosaskjære oransjetoner har mange navn. Det er verdt å skille dem, fordi riktig ord hjelper deg å velge riktige fargestopp og beskrive det du ønsker til en designer eller Designer i Gradiently.

| Farge | Typisk hex | Karakter |
| --- | --- | --- |
| Korall | `#ff7f50` | Klar og varm, heller mot oransje |
| Living Coral | `#ff6f61` | Mer rosa, mykere korall |
| Laks | `#fa8072` | Lysere og mer rosa, litt støvet |
| Fersken | `#ffcba4` | Mye lysere, mer oransje, mild |
| Vannmelon | `#fb7185` | Mer rosa og kjølig, leken |

Korall er den klareste av disse. Nabofargene er nyttige stopp i en korallgradient.

## Sterke korallgradienter

Dette er korall på sitt livligste. Fargene fanger oppmerksomheten selv som miniatyrbilder, og fungerer derfor godt til salgsinnlegg, lanseringer, treningstimer og alt du vil skal synes i en travel strøm.

- 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%)`
- Korallblomst: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Korallsolnedgang: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Fem klare korallblandinger. Alle partnerfargene er nære naboer, så blandingene beholder metningen.

Noen måter å bruke dem på: «Klassisk korall» bak én linje som «Dørene åpner klokken tolv» i en story på 1080×1920. «Tropisk punch» som omslag til en sommerdrikkemeny. «Korallsolnedgang» nedover en Pinterest-pin på 1000×1500 for en ferieguide. Korall er sterk, så la den fylle rammen og hold resten enkelt: én overskrift, én detalj og mye luft.

## Korallgradienter fra rosa til oransje

### Korall som heller mot rosa

Drei korall mot rosa og dus rosa, så blir den mykere og mer romantisk, ideell for skjønnhet, blomsterbutikker, bryllup og livsstilsmerkevarer. Se [rosa gradienter](https://gradiently.design/nb/guide/pink-gradient) for den rosere siden av familien.

- Rosekorall: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Lakserosa: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Vannmelonkorall: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Koralltoner som heller mot rosa, virker mykere og passer til skjønnhet og livsstil.

### Korall som heller mot oransje

Drei den motsatt vei, mot aprikos og mandarin, så blir korall mer solrik og høylytt: sommermenyer, smoothiebarer, ferier. [Oransje-rosa gradienter](https://gradiently.design/nb/guide/orange-pink-gradient) dekker hele spennet mellom de to.

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

Koralltoner som heller mot oransje, er mer solrike, energiske og skapt for sommeren.

## Korall og blågrønt uten grå midte

Korall og blågrønt er en flott kombinasjon: varmt mot kjølig, rev mot hav. Men de ligger nesten overfor hverandre i fargesirkelen, så en rett blanding går gjennom matt grått i midten. Løsningen er å holde dem atskilt. Bruk blågrønn bunn med koralllys, korallbunn med blågrønn aksent, eller la overgangen gå gjennom svært lyse nyanser. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer hvorfor midten blir grå.

- Unngå: grå midte: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Korallsol på blågrønt: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Gjennom skjellhvitt: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

Den første blandingen blir grå i midten. De to andre holder korall og blågrønt atskilt, eller kobler dem gjennom en lys nyanse.

Prøv en svært mørk blågrønn som `#042f2e` med korallfargede overskrifter og knapper på en meny eller plakat. Korall når omtrent 5,8 til 1 der, langt bedre enn hvitt på korall, og uttrykket blir tydelig og sommerlig. Den blågrønne siden dekkes i [blågrønne gradienter](https://gradiently.design/nb/guide/teal-gradient).

## Korall på mørk bunn

Korall gløder vakkert mot dyp plomme, marineblått eller nesten svart. Ett koralllys på mørk bunn minner om et neonskilt eller en solnedgang over havet, og passer til barer, musikk, natteliv og kveldsarrangementer. Hold koralllyset unna der ordene står, og sett dem i lyst skjellhvitt eller hvitt på det mørke området.

- Korall på vin: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Solnedgang over bukten: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Kull og korall: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Ett koralllys, mye mørke. Korallen virker klarere enn den ville gjort på hvitt.

## Tekst på en korallgradient

Korall virker sterk nok for hvit skrift, og nettopp derfor mislykkes så mange koralldesign. Hvitt på `#ff7f50` måler omtrent 2,5 til 1, godt under 4,5 til 1 som kreves for brødtekst. En dyp vinbrun som `#3b0d0c` måler omtrent 6,7 til 1 på samme korall og beholder varmen. Vil du ha hvit tekst, gjør korallen dypere til en rødfarge som `#e11d48`, der hvitt når omtrent 4,7 til 1. Metoden står i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

Et salgsinnlegg for et pilatesstudio med lys tekst over den klareste delen av en korallgradient

Lyse ord tvers over klar korall virker tydelige, men er vanskelige å lese på telefonen i dagslys.

Det samme pilatesinnlegget med tydelig tekst på et roligere, dypere område av korallgradienten

Det samme innlegget med en roligere sone og en passende tekstfarge.

En Mark fra Gradiently gjør denne justeringen selv: den flytter det roligste området med best kontrast bak ordene dine, og Auto-tekstfarge velger lys eller mørk skrift per linje fra Markens egen palett. Ingen bokser eller slagskygger trengs.

## CSS-korallgradient til en knapp

Korall gir en vennlig handlingsoppfordring. Hold gradienten lys nok til at en mørk etikett er lesbar, og flytt posisjonen når pekeren holdes over knappen, fremfor å bytte farger. [CSS-gradientknapper](https://gradiently.design/nb/guide/css-gradient-button) har flere mønstre.

```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 avrundet korallknapp med dyp vinfarget tekst. Gradienten flytter seg ved pekerberøring fremfor å endre farge.

## FAQ

### Hva er hex-koden for korall?

CSS-fargen `coral` er `#ff7f50`. Pantones Living Coral gjengis ofte omtrent som `#ff6f61`.

### Hvilke farger passer med en korallgradient?

Fersken, rosa, mandarin og gull glir inn i den. Dyp blågrønn, marineblå og plomme gir sterke kombinasjoner når de holdes i egne områder.

### Hvorfor ser korall- og blågrønngradienten min grå ut?

Korall og blågrønt ligger nesten overfor hverandre i fargesirkelen, så fargene mellom dem mister metning. Hold dem atskilt, eller koble dem gjennom en lys nyanse.

### Kan jeg bruke hvit tekst på korall?

Ikke på klar korall, der hvitt har for svak kontrast. Bruk en dyp vin- eller brunfarge, eller gjør korallen dypere mot rødt før du bruker hvitt.

### Hva er forskjellen på korall og laks?

Laks er lysere, mer rosa og litt mer støvet. Korall er klarere, mer mettet og heller mer mot oransje.