# Petrolgradient: koder fra lagune til dybhav

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

Petrol, på engelsk teal, ligger præcis mellem blå og grøn, hvilket gør den rolig, kvik og usædvanligt nem at blande. Gå ned fra lagunen til dybhavet med koder til hver dybde.

## The short version

- En petrolgradient blander blågrønne nuancer, som regel fra en lys aqua ned til en dyb grønblå.
- Petrol blander sig rent med sine naboer: cyan, smaragd, blå og marineblå.
- Varme accenter som koral, fersken og kobber ligger over for petrol og får den til at gløde, når de holdes uden for blandingen.
- Hvid tekst kræver en petrol mindst lige så dyb som #0f766e for at klare kontrasten; lysere nuancer kræver mørk tekst.
- Meget mørk petrol er en fremragende bund til mørk tilstand, fordi den føles blødere end sort og mindre forventelig end marineblå.

En **petrolgradient** løber mellem blågrønne nuancer: lys aqua i den lyse ende, en klar mellempetrol i midten og en mørk, blækagtig grønblå i bunden. Fordi petrol ligger midt mellem blå og grøn, blander den sig let til begge sider og bliver næsten aldrig mudret. Koderne nedenfor følger den nedad efter dybde, fra en solbeskinnet lagune til dybhavet, med noter om accenter, CSS og tekst til hver.

## En petrolstige til enhver gradient

De fleste gode petrolgradienter er to til fire trin fra denne stige. Vælg naboer for en blid overgang, eller spring tre trin over for dramatik. Navnene nedenfor bruges i resten af artiklen.

- Lavvande: #ccfbf1
- Lagune: #5eead4
- Aqua: #2dd4bf
- Petrol: #14b8a6
- Rev: #0d9488
- Tang: #0f766e
- Dyb petrol: #115e59
- Afgrund: #042f2e

Otte petrolnuancer fra lys til mørk. To eller tre naboer giver en rolig overgang; fra lys til mørk giver dybde.

## Lyse petrolgradienter: lagune og lavvande

Lys petrol er ren, frisk og stille munter. Den passer til velvære, svømmehaller og badetøj, tandklinikker og sundhedsklinikker og ethvert produkt, der vil føles hygiejnisk uden kulden fra ren blå. Lad den løbe mod hvid eller mod en lys mint for at holde den blød.

- Lavvande: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Lagune: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Himmel til lagune: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Solbeskinnet pool: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Lyse petrolnuancer, der forbliver friske. Hver har et næsten hvidt stop, så mørk tekst har et sted at sidde.

## Mellemlyse petrolgradienter: rev og jade

Midten af skalaen er petrol, når den er mest selvsikker. De virker godt til apps, fintech-dashboards, bæredygtige brands og uddannelse, fordi de opleves som både troværdige (blå) og levende (grøn). Hælder den mod smaragd, bliver den naturlig; hælder den mod blå, bliver den teknisk.

- Rev: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Cyan til tang: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Petrol til blå: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Petrol i tre trin: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

Mellemlyse petrolnuancer trækker mod smaragd eller blå. Vælg retningen ud fra, hvordan dit brand skal føles.

## Mørke petrolgradienter: dybhavet

I den mørke ende bliver petrol næsten sort med et køligt grønt pust. Det er den mest sofistikerede petrol: advokatfirmaer, spiritus, hoteller, arkitektur, aftenarrangementer. Den er også en fremragende bund til én klar accent, fordi intet ved den konkurrerer. Mørke overgange får striber i komprimerede eksporter, så lidt kornstruktur hjælper; se [striber i gradienter](https://gradiently.design/da/guide/gradient-banding).

- Nedstigning: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Lys oppefra: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Dyb petrol til midnat: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Lysstråle: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Mørke petrolnuancer med én enkelt lyskilde. De føles dyre og rolige.

## Varme accenter til en petrolgradient

Petrols modsætning på farvehjulet er en varm rødorange, så koral, fersken, abrikos og kobber får den alle til at synge. Hold den varme farve ude af selve blandingen: en gradient fra petrol til koral går gennem en mat grå på midten. Brug i stedet accenten til en knap, en overskrift eller en lille form. [Komplementærfarver](https://gradiently.design/da/guide/complementary-colors) forklarer tiltrækningen, og [koralgradienter](https://gradiently.design/da/guide/coral-gradient) har koder til den anden side.

- Undgå: grå midte: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Kobbersol på dyb petrol: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Lys petrol til fersken: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

En mættet overgang fra petrol til koral bliver grå på midten. Et lille varmt lys på petrol, eller to lyse toner, virker langt bedre.

Læg mærke til den tredje prøve: meget lyse toner af modsætninger blander sig fint, fordi der er lidt mætning at miste. Det er et nyttigt trick til blød emballage og bryllupstryksager.

## Sådan vælger du en petrolgradient til dit brand

Petrol er populær hos brands inden for sundhed, penge og bæredygtighed, så nuancen alene skiller dig ikke ud. Det gør den dybde, du vælger, den accent, du parrer den med, og fladen. Start med den opgave, designet skal løse.

| Hvis du er | Prøv | Kombiner med |
| --- | --- | --- |
| En klinik, svømmehal eller et hudplejebrand | Lavvande eller Lagune | Koksgrå tekst, luft |
| En app eller et fintech-produkt | Petrol til blå | Én koralfarve til knapper |
| En café, blomsterhandel eller et havecenter | Jade | Creme og terrakotta |
| Et hotel, en bar eller et advokatfirma | Lys oppefra | Detaljer i kobber eller messing |
| Et aftenarrangement | Lysstråle | Overskrift i lys lagune |

Udgangspunkter, ikke regler. Test hver af dem mod din rigtige overskrift og dit logo.

## CSS til en petrolgradient i en brugerflade i mørk tilstand

Dyb petrol er et smukt alternativ til sort eller marineblå i en mørk brugerflade. Den føles blødere end ren sort og giver stadig lys tekst masser af kontrast. Her er en baggrund til en app-ramme med et blødt skær bag toppen af siden. Mere om tilgangen i [design til mørk tilstand](https://gradiently.design/da/guide/dark-mode-design).

```css
:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }
```

En dyb petrolramme med et petrolskær i toppen. Links i lys lagune forbliver læselige mod den.

## Læselig tekst på petrol

Mellempetrol snyder. `#14b8a6` ser stærk nok ud til hvid tekst, men måler cirka 2,5 til 1, et klart nej. Hvid kræver Tang (`#0f766e`, cirka 5,5 til 1) eller mørkere. På alt fra Aqua og lysere bruger du Afgrund-farven `#042f2e` som blæk: den holder teksten i petrolfamilien og er let at læse.

| Baggrund | Hvid tekst | Afgrund-tekst #042f2e |
| --- | --- | --- |
| Lagune `#5eead4` | Dumper | Cirka 9,8:1 |
| Petrol `#14b8a6` | Cirka 2,5:1, dumper | Cirka 5,8:1 |
| Rev `#0d9488` | Cirka 3,7:1, kun stor tekst | Svag |
| Tang `#0f766e` | Cirka 5,5:1, bestået | Dumper |
| Dyb petrol `#115e59` | Cirka 7,6:1, bestået | Dumper |

Petrol skifter fra mørk tekst til hvid tekst mellem Rev og Tang.

Et stående opslag fra et spa med hvid tekst på en dyb petrolgradient

Som stående opslag sidder overskriften i den roligste petrol.

Det samme spadesign som en høj story med petrollyset flyttet, så det passer til formatet

Det samme design som story, renderet på ny i stedet for beskåret.

Det sidste punkt betyder mere, end det ser ud til. En gradient, der beskæres fra et opslag til en story, flytter lyset til det forkerte sted. I Gradiently renderes en Mark i alle størrelser, og Designer kan lave de andre størrelser for dig, så et petrollook forbliver afbalanceret i feedet, i storyen og i [heroen på dit website](https://gradiently.design/da/guide/website-hero-background).

## FAQ

### Hvilke farver passer til en petrolgradient?

Cyan, smaragd, blå og marineblå glider over i den. Koral, fersken, kobber og guld giver stærke varme accenter, når de bruges uden for blandingen.

### Hvad er hexkoden for teal?

Webbens navngivne `teal` er `#008080`. De fleste moderne paletter bruger mere livlige versioner som `#14b8a6` til mellempetrol og `#0f766e` til en dybere.

### Hvad er forskellen på petrol og turkis?

Petrol er dybere og mere dæmpet; turkis er lysere, klarere og hælder lidt mere mod grøn. Begge ligger mellem blå og grøn.

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

Kun på dyb petrol, fra cirka `#0f766e` og nedefter. Klare og lyse petrolnuancer kræver mørk tekst for at klare kontrasten.

### Er petrol en god farve til mørk tilstand?

Ja. En meget mørk petrol som `#042f2e` er blødere end sort og mere karakteristisk end marineblå, og lyse petrolaccenter læses godt på den.