# Koral gradient: livlige koder mellem pink og orange

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

Koral lever præcis der, hvor pink bliver til orange, så den har den enes varme og den andens charme. Den er livlig, venlig og overraskende svær at sætte tekst på. Her er koder og løsningerne.

## The short version

- En koral gradient blander varme, lyserødlige orange nuancer, som regel med hældning mod rosa i den ene ende og mandarin eller fersken i den anden.
- CSS-farvenavnet coral er #ff7f50, en klar orange med koraltræk.
- Koral og blågrøn er næsten modsætninger, så en direkte blanding mellem dem bliver grå. Brug i stedet blågrøn som et selvstændigt område eller en accent.
- Hvid tekst fejler på klar koral. Brug en dyb vin eller brun som #3b0d0c, eller flyt hvid tekst over på en dyb rød koral.
- Koral passer til sommerkampagner, mad og drikke, skønhed, fitness og venlige forbrugerapps.

En **koral gradient** blander varme, lyserødlige orange toner, farverne hvor pink bliver til orange. Læn den mod rosa, og den føles charmerende og frisk. Læn den mod mandarin, og den føles solrig og energisk. Koral er glad og meget synlig, hvilket gør den til en favorit til sommer, mad, skønhed og fitness. Dens to faldgruber er en grå stribe, når den møder blågrøn, og tekst, der forsvinder på den. Begge er lette at undgå, når du kender dem.

## Koral, laks, fersken og vandmelon

Varme lyserødlige orange nuancer deler mange navne. De er værd at holde ude fra hinanden, for det rette ord hjælper dig med at vælge de rette stop og beskrive, hvad du vil have, til en designer eller til Designer i Gradiently.

| Farve | Typisk hex | Karakter |
| --- | --- | --- |
| Koral | `#ff7f50` | Klar og varm, med hældning mod orange |
| Living coral | `#ff6f61` | Mere lyserød, blødere koral |
| Laks | `#fa8072` | Blegere og mere lyserød, lidt støvet |
| Fersken | `#ffcba4` | Meget lysere, mere orange, blid |
| Vandmelon | `#fb7185` | Mere lyserød og køligere, legende |

Koral er den klareste af disse. Dens naboer er nyttige stop i en koral gradient.

## Klare koral gradienter

Det er koral på sit mest livlige. De holder på opmærksomheden i miniaturestørrelse, og derfor virker de så godt til tilbudsopslag, lanceringer, fitnesshold og alt, du vil have bemærket i et travlt feed.

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

Fem klare koralblandinger. Hver partnerfarve er en tæt nabo, så blandingerne holder farven.

Et par måder at bruge dem på: »Klassisk koral« bag én enkelt linje som »Dørene åbner kl. 12« på en 1080×1920-story, »Tropisk punch« som forside på et sommerdrinkskort, »Koral-solnedgang« ned ad en Pinterest-pin på 1000×1500 til en feriguide. Koral er stærk, så lad den fylde rammen og hold alt andet på siden enkelt: én overskrift, én detalje og masser af luft.

## Koral gradienter fra pink til orange

### Koral med hældning mod pink

Skub koral mod rosa og blush, og den bliver blødere og mere romantisk, ideel til skønhed, blomsterhandlere, bryllupper og lifestylebrands. Til den mere lyserøde side af familien, se [pink gradienter](https://gradiently.design/da/guide/pink-gradient).

- Rosakoral: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Lakseblush: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Vandmelonkoral: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Koraller med hældning mod pink føles blødere og passer til skønheds- og lifestylebrands.

### Koral med hældning mod orange

Skub den den anden vej, mod abrikos og mandarin, og koral bliver solrigere og højere: sommermenuer, smoothiebarer, ferier. [Orange-pink gradienter](https://gradiently.design/da/guide/orange-pink-gradient) dækker hele spændet mellem de to.

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

Koraller med hældning mod orange er solrigere, mere energiske og skabt til sommer.

## Koral og blågrøn uden den grå midte

Koral og blågrøn er et af de store par: varmt mod køligt, rev mod hav. Men de ligger næsten modsat hinanden på farvehjulet, så en ligefrem blanding mellem dem passerer en kedelig grå midte. Løsningen er at holde dem adskilt. Brug blågrøn som bund med et koral lys, koral som bund med en blågrøn accent, eller før dem sammen gennem meget lyse toner. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) forklarer, hvorfor midten bliver grå.

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

Den første blanding bliver grå i midten. De to andre holder koral og blågrøn som adskilte farver eller forbinder dem gennem en lys tone.

På en menu eller plakat kan du prøve en meget mørk blågrøn som `#042f2e` med koralfarvede overskrifter og knapper. Koral når omkring 5,8 til 1 dér, langt bedre end hvid på koral, og det ser dristigt og sommerligt ud. Den blågrønne side er dækket i [blågrønne gradienter](https://gradiently.design/da/guide/teal-gradient).

## Koral på mørk bund

Koral gløder smukt mod dyb blomme, marineblå eller næsten sort. Et enkelt koral lys på mørk bund føles som et neonskilt eller en solnedgang over havet og passer til barer, musik, natteliv og aftenevents. Hold det koralfarvede lys væk fra det sted, hvor ordene sidder, og sæt dem i en lys skalfarve eller hvid på det mørke område.

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

Ét koral lys, masser af mørke. Koralen virker klarere, end den ville på hvid.

## Tekst på en koral gradient

Koral ser dristig nok ud til hvid skrift, og det er netop derfor, så mange koraldesigns fejler. Hvid på `#ff7f50` måler omkring 2,5 til 1, langt under de 4,5 til 1, der kræves til brødtekst. En dyb vinbrun som `#3b0d0c` måler omkring 6,7 til 1 på den samme koral og bevarer varmen. Vil du have hvid skrift, så uddyb koralen til en rød som `#e11d48`, hvor hvid når omkring 4,7 til 1. Metoden står i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility).

Et tilbudsopslag fra et pilatesstudie med lys tekst hen over den klareste del af en koral gradient

Lyse ord lige hen over klar koral ser dristige ud, men er svære at læse på en telefon i dagslys.

Samme pilatesopslag med tydelig tekst på et roligere, dybere område af den koral gradient

Samme opslag med en roligere zone og en skriftfarve, der passer til den.

En Gradiently Mark laver denne justering af sig selv: den flytter sit roligste område med bedst kontrast bag dine ord, og Automatisk farve vælger lys eller mørk skrift til hver linje ud fra Markens egen palet. Ingen bokse eller slagskygger nødvendige.

## Koral gradient-CSS til en knap

Koral giver en venlig opfordring til handling. Hold gradienten lys nok til, at en mørk etiket kan læses, og lad dens position glide ved hover frem for at skifte farver. [CSS-gradientknapper](https://gradiently.design/da/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 koral pille med dyb vinfarvet tekst. Gradienten glider ved hover i stedet for at skifte farve.

## FAQ

### Hvad er hex-koden for koral?

CSS-farvenavnet `coral` er `#ff7f50`. Pantones Living Coral approksimeres ofte som `#ff6f61`.

### Hvilke farver passer til en koral gradient?

Fersken, rosa, mandarin og guld blander sig ind i den. Dyb blågrøn, marineblå og blomme er stærke partnere, når de holdes som adskilte områder.

### Hvorfor ser min koral og blågrønne gradient grå ud?

Koral og blågrøn ligger næsten modsat på farvehjulet, så farverne mellem dem mister mætning. Hold dem adskilt, eller forbind dem gennem en lys tone.

### Kan jeg bruge hvid tekst på koral?

Ikke på klar koral, hvor hvid fejler på kontrast. Brug en dyb vin eller brun, eller uddyb koralen til en rød, før du bruger hvid.

### Hvad er forskellen på koral og laks?

Laks er blegere, mere lyserød og lidt mere støvet. Koral er klarere, mere mættet og læner sig mere mod orange.