# Turkis gradient: tropiske farvekoder med dybde

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

Klar turkis alene ligner et ikon for en svømmehal. Giv den en dyb bund, en varm strand og lidt lys, så bliver den til havet ud for en ø. Her er hvordan, med koder.

## The short version

- En turkis gradient blander klare, grønlige blå toner, og den ser mest naturlig ud, når den også rummer en dybere blå og et lyst, næsten hvidt højlys.
- Turkis er lysere og klarere end petrol og grønnere end cyan; den navngivne CSS-farve turquoise er #40e0d0.
- Flade turkise gradienter ser kunstige ud, så tilføj dybde med en marineblå bund, et blegt højlys eller en varm sandfarve.
- Hvid tekst fejler på klar turkis; brug i stedet en dyb marineblå som #083344 til skriften.
- Sand, koral og hvid er turkis’ mest naturlige partnere, fordi de minder om en strand.

En **turkis gradient** blander klare, grønlige blå toner, og dem, der føles ægte tropiske, har tre ting: et blegt højlys, hvor lyset rammer, en klar turkis krop og en dybere blå nedenunder. Uden det spænd ser turkis flad og kunstig ud. Nedenfor finder du koder til klare laguner, turkis med ægte dybde og turkis ved siden af varmt sand, efterfulgt af CSS og de skriftfarver, der holder det hele læsbart.

## Turkis, petrol, cyan og aqua sammenlignet

De fire bliver brugt i flæng, men de er forskellige farver, og det rette valg ændrer stemningen. Turkis er den klareste og mest feriefyldte i gruppen.

| Farve | Typisk hex | Hvordan den læses |
| --- | --- | --- |
| Turkis | `#40e0d0` | Klar, grønlig, tropisk, ædelsten |
| Aqua | `#7fffd4` (aquamarine) | Bleg, mintagtig, let, vandig |
| Cyan | `#00ffff` (CSS cyan) | Elektrisk, køligere, digital |
| Petrol | `#008080` (CSS teal) | Dybere, dæmpet, rolig, voksen |

Turkis er lysere end petrol og grønnere end cyan. Den dybere version finder du i artiklen om petrol.

Vil dit brand være roligt og seriøst, vil du sandsynligvis hellere have [petrolfarvede gradienter](https://gradiently.design/da/guide/teal-gradient). Vil det have ferie, energi og varme, så bliv her.

## Klare tropiske turkise gradienter

Det er postkortblandingerne: lavt vand over hvidt sand. Hver har et blegt stop, så turkisen har noget at gløde imod, og ingen af dem løber ud i gråt.

- Lavt vand: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagune: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Solbeskinnet vig: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Turkis til himmel: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Revkant: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Akvamarin: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Seks klare turkise blandinger. Et blegt eller hvidt stop er det, der får hver af dem til at føles belyst.

## Sådan giver du en turkis gradient dybde

Ægte tropisk vand er aldrig én farve. Det er blegt over sand, turkis over lavt rev og dybblåt, hvor bunden falder væk. Kopier den opbygning, så holder din gradient op med at ligne en flad udfyldning.

1. **Vælg en bund** Vælg en dyb blå til den mørkeste del, som `#0c4a6e` eller `#083344`. Den forankrer turkisen og giver den noget at skinne imod.
2. **Sæt kroppen** Brug din turkis, omkring `#2dd4bf` til `#40e0d0`, over det største område, som regel midten eller toppen.
3. **Tilføj et højlys** Placer et lille, næsten hvidt stop som `#ecfeff`, hvor lyset ville ramme. En radial gradient i ét hjørne virker godt.
4. **Varm én kant op** Lad eventuelt en sandfarve løbe langs bunden eller et hjørne, så den kølige blanding får en varm strand.
5. **Gør overfladen færdig** Tilføj let korn, så de klare farver ikke laver banding, når platformen komprimerer dit billede. [Kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) har metoden.

- Skrænt: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Lys gennem vand: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Turkis til koboltblå: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Glødende dyb: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turkis med en dybblå bund. De passer til rejser, dykning, drikkevarer og strandarrangementer om aftenen.

## Gradienter i turkis og sand

Turkis’ mest naturlige partner er selve stranden: varmt sand, koral og hvid. Disse farver står over for turkis på farvecirklen, så bland dem kun dér, hvor mætningen er lav, gennem blege stop, eller hold dem som separate områder. Så får du en kystlinje i stedet for en grå udtværing. [Sommerfarvepaletter](https://gradiently.design/da/guide/summer-color-palettes) har flere feriekombinationer.

- Kystlinje: `linear-gradient(180deg, #40e0d0 0%, #a5f3fc 55%, #fef3c7 75%, #f5deb3 100%)`
- Sand til hav: `linear-gradient(135deg, #f5e6cc 0%, #e6fffb 50%, #40e0d0 100%)`
- Koral på turkis: `radial-gradient(circle at 85% 85%, #fda4af 0%, transparent 30%), linear-gradient(160deg, #5eead4 0%, #0891b2 100%)`

Turkis møder sand gennem en bleg midte, så den varme og den kølige side aldrig bliver grå.

- Skum: #ecfeff
- Turkis: #40e0d0
- Revblå: #0891b2
- Dybt vand: #083344
- Sand: #f5deb3
- Koral: #fb7185

En komplet tropisk palet: skum, to blå, et dybt blæk, sand og én koralaccent.

## Hvor en turkis gradient virker bedst

Turkis er højlydt, så den fortjener sin plads dér, hvor folk allerede forventer ferie, vand eller sjov. Et par anvendelser, hvor den slår alle andre farver:

- **Rejser og hoteller:** en story i 1080×1920 med »Skrænt« bag en enkelt linje som »Tre nætter i Lissabon«.
- **Svømmeskoler og svømmehaller:** en bleg baggrund i »Lavt vand« til skemaer, med dyb marineblå skrift.
- **Smoothiebarer og juicebrands:** »Lagune« med ét koralfarvet prismærke, som springer frem, fordi det står over for turkis.
- **Sommermenuer og festivalplakater:** »Kystlinje« på en A4-plakat, havet øverst og sandet dér, hvor detaljerne står.
- **Smykker:** turkis er også en sten, så en dyb »Lys gennem vand« bag produktbilleder i sølv eller guld føles rigtig.

Undgå den til alt, der skal føles stille eller formelt. Et advokatkontor eller en bedemand er bedre tjent med petrol eller marineblå.

## Turkis gradient i CSS med lys

To radiale højlys lagt over en lineær base giver indtryk af sollys gennem vand. Det er let at rendere og kræver intet billede. Syntaksen forklares i [radiale gradienter i CSS](https://gradiently.design/da/guide/css-radial-gradient).

```css
.section-tropical {
  background-color: #0891b2; /* fallback */
  background-image:
    radial-gradient(circle at 20% 15%, rgb(236 254 255 / 0.9) 0%, transparent 30%),
    radial-gradient(circle at 80% 40%, rgb(64 224 208 / 0.8) 0%, transparent 45%),
    linear-gradient(180deg, #5eead4 0%, #0891b2 60%, #083344 100%);
  color: #083344;
}
```

Skumlys øverst til venstre, turkis i midten og dybt vand i bunden. Sæt overskrifter i den øverste halvdel, i blæk i farven dybt vand.

## Tekst på en turkis gradient

Turkis er meget lysere, end den ser ud. Hvid på `#40e0d0` måler cirka 1,6 til 1, hvilket ingen kan læse behageligt i sollys på en telefon. Dybt vand `#083344` på samme turkis måler cirka 8 til 1. Brug mørk marineblå skrift over de klare områder, og skift kun til hvid, hvor gradienten er faldet til en dyb blå. De fulde regler finder du i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility).

Et opslag om et vandsportsarrangement med bleg tekst, der udvaskes mod en klar turkis gradient

Lyse ord på klar turkis bliver udvaskede, så snart nogen kigger på dem udendørs.

Samme arrangementsopslag med tydelig, dybfarvet tekst på et roligere område af den turkise gradient

Samme opslag med skriftfarven og den rolige zone valgt til ordene.

Det er præcis, hvad en Gradiently Mark gør af sig selv: dens roligste område flytter sig bag ordene, og Automatisk farve vælger lys eller mørk skrift pr. linje ud fra Markens egne farver. Rejse- og hospitalityteams, der slår op hver dag, kan finde flere idéer i [sociale medier for rejsebureauer](https://gradiently.design/da/guide/travel-agency-social-media).

## FAQ

### Hvad er hexkoden for turkis?

Den navngivne CSS-farve `turquoise` er `#40e0d0`. Lidt dybere versioner som `#2dd4bf` bruges også meget.

### Hvilke farver passer til en turkis gradient?

Dyb marineblå, hvid, sand og koral. Marineblå giver dybde, hvid giver lys, og sand eller koral tilføjer varme, når de holdes uden for den primære blanding.

### Er turkis det samme som petrol?

Nej. Turkis er lysere, klarere og mere tropisk; petrol er dybere og mere dæmpet. Begge ligger mellem blå og grøn.

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

Ikke på klar turkis, hvor hvid fejler kontrasttesten slemt. Brug dyb marineblå skrift, eller flyt hvid tekst til den mørkeste blå del af gradienten.

### Hvordan får jeg en turkis gradient til at se mindre flad ud?

Tilføj en dybblå bund, et næsten hvidt højlys og let korn. De tre trin får den til at læses som vand i stedet for en flad udfyldning.