# Turkis gradient: tropiske fargekoder med dybde

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

Klar turkis alene ligner et svømmebassengikon. Gi den en dyp bunn, varm strand og litt lys, så blir den havet ved en øy. Her er metoden med koder.

## The short version

- En turkis gradient blander klare grønnblå farger og virker mest naturlig når den også har dypere blått og et lyst, nesten hvitt høylys.
- Turkis er lysere og klarere enn petroleumsgrønt og grønnere enn cyan; den navngitte CSS-fargen turquoise er #40e0d0.
- Flate turkise gradienter virker kunstige. Gi dybde med marineblå bunn, lyst høylys eller varm sandfarge.
- Hvit tekst svikter på klar turkis. Bruk heller dyp marineblå som #083344 til skrift.
- Sand, korall og hvitt er de mest naturlige partnerne til turkis fordi de minner om en strand.

En **turkis gradient** blander klare grønnblå farger. De som føles virkelig tropiske, har tre ting: et lyst høylys der lyset treffer, en klar turkis hovedfarge og dypere blått under. Uten dette spennet virker turkis flat og kunstig. Nedenfor finner du koder til klare laguner, turkis med ekte dybde og turkis ved varm sand, fulgt av CSS og tekstfarger som holder alt lesbart.

## Turkis, petroleumsgrønt, cyan og akva sammenlignet

Disse brukes ofte om hverandre, men er ulike farger, og valget endrer stemningen. Turkis er gruppens klareste og mest feriepregede.

| Farge | Vanlig hex | Oppleves som |
| --- | --- | --- |
| Turkis | `#40e0d0` | Klar, grønnlig, tropisk, edelstein |
| Akva | `#7fffd4` (akvamarin) | Lys, myntepreget, lett, vannaktig |
| Cyan | `#00ffff` (CSS cyan) | Elektrisk, kjøligere, digital |
| Petroleumsgrønt | `#008080` (CSS teal) | Dypere, dempet, rolig, voksent |

Turkis er lysere enn petroleumsgrønt og grønnere enn cyan. Se artikkelen om petroleumsgrønt for en dypere variant.

Ønsker merkevaren ro og alvor, passer trolig [petroleumsgrønne gradienter](https://gradiently.design/nb/guide/teal-gradient) bedre. Ønsker den ferie, energi og varme, bli her.

## Klare tropiske turkise gradienter

Dette er postkortblandingene: grunt vann over hvit sand. Hver har et lyst stopp som lar turkisen gløde, og ingen går over i grått.

- Grunt vann: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagune: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Solbelyst vik: `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 lyst eller hvitt stopp gjør at alle føles belyst.

## Gi en turkis gradient dybde

Ekte tropisk vann har aldri bare én farge. Det er lyst over sand, turkis over grunt rev og dypblått der bunnen faller. Kopier strukturen, så slutter gradienten å ligne et flatt fyll.

1. **Velg en bunn** Velg dypblått til mørkeste del, som `#0c4a6e` eller `#083344`. Det forankrer turkisen og gir den noe å skinne mot.
2. **Sett hovedfargen** Bruk turkis rundt `#2dd4bf` til `#40e0d0` på største område, gjerne i midten eller øverst.
3. **Legg til høylys** Plasser et lite, nesten hvitt stopp som `#ecfeff` der lyset treffer. En radiell gradient i et hjørne passer godt.
4. **Varm én kant** Legg eventuelt sandfarge nederst eller i et hjørne, så den kjølige blandingen får en varm strand.
5. **Fullfør overflaten** Legg til lett korn så de klare fargene ikke får bånd ved plattformkomprimering. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har metoden.

- Dypkant: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Lys gjennom vann: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Turkis til kobolt: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Glødende dyp: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turkis med dypblå bunn. Disse passer reiser, dykking, drikke og kveldsarrangementer på stranden.

## Gradienter med turkis og sand

Turkisens mest naturlige partner er stranden selv: varm sand, korall og hvitt. Disse ligger på andre siden av fargesirkelen, så bland bare der metningen er lav, gjennom lyse stopp, eller behold separate områder. Da får du en strandlinje fremfor en grå flekk. [Sommerpaletter](https://gradiently.design/nb/guide/summer-color-palettes) har flere feriekombinasjoner.

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

Turkis møter sand gjennom en lys midte, så de varme og kalde sidene aldri blir grå.

- Skum: #ecfeff
- Turkis: #40e0d0
- Revblått: #0891b2
- Dypt vann: #083344
- Sand: #f5deb3
- Korall: #fb7185

En komplett tropisk palett: skum, to blåfarger, dypt blekk, sand og én korallaksent.

## Hvor en turkis gradient passer best

Turkis er kraftig og fortjener plass der folk forventer ferie, vann eller moro. Noen bruksområder der den slår andre farger:

- **Reiser og hoteller:** en Story på 1080×1920 med «Dypkant» bak én linje som «Tre netter i Lisbon».
- **Svømmeskoler og bassenger:** lys «Grunt vann»-bakgrunn til timeplaner med dyp marineblå tekst.
- **Smoothiebarer og juicemerker:** «Lagune» med én korallprislapp, som synes fordi den ligger motsatt turkis.
- **Sommermenyer og festivalplakater:** «Strandlinje» på A4, hav øverst og sand der detaljene står.
- **Smykker:** turkis er også en stein, så dyp «Lys gjennom vann» bak sølv- eller gullprodukter føles riktig.

Unngå den der uttrykket skal være rolig eller formelt. Advokatfirmaer og begravelsesbyråer passer bedre med petroleumsgrønt eller marineblått.

## Turkis gradient-CSS med lys

To radielle høylys over en lineær bunn gir inntrykk av sollys gjennom vann. Det er lett å gjengi og trenger ikke bilde. Syntaksen forklares i [radielle CSS-gradienter](https://gradiently.design/nb/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 dypt vann nederst. Sett overskriftene i øvre halvdel i dypt vann-farge.

## Tekst på en turkis gradient

Turkis er mye lysere enn den virker. Hvitt på `#40e0d0` gir rundt 1,6 til 1, som ingen leser behagelig på mobilen i sollys. Dypt vann `#083344` på samme turkis gir rundt 8 til 1. Bruk mørk marineblå på klare områder og bytt bare til hvitt der gradienten blir dypblå. For hele reglene, se [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

Et vannsportsinnlegg med lys tekst som forsvinner mot en klar turkis gradient

Lyse ord på klar turkis vaskes ut når noen ser dem utendørs.

Samme arrangementsinnlegg med tydelig, dyp tekst på et roligere område av den turkise gradienten

Samme innlegg med tekstfarge og rolig sone valgt for ordene.

Dette gjør en Gradiently Mark selv: det roligste området flytter seg bak ordene, og Auto-tekstfarge velger lys eller mørk skrift per linje fra Markens egne farger. Reise- og overnattingsteam som publiserer daglig, finner flere ideer i [reisebyråer i sosiale medier](https://gradiently.design/nb/guide/travel-agency-social-media).

## FAQ

### Hva er hex-koden for turkis?

Den navngitte CSS-fargen `turquoise` er `#40e0d0`. Litt dypere varianter som `#2dd4bf` brukes også mye.

### Hvilke farger passer til turkis gradient?

Dyp marineblå, hvitt, sand og korall. Marineblå gir dybde, hvitt lys, og sand eller korall varme når de holdes utenfor hovedblandingen.

### Er turkis det samme som petroleumsgrønt?

Nei. Turkis er lysere, klarere og mer tropisk; petroleumsgrønt er dypere og mer dempet. Begge ligger mellom blått og grønt.

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

Ikke på klar turkis, der hvitt har svært dårlig kontrast. Bruk dyp marineblå tekst eller flytt hvit tekst til gradientens mørkeste blå område.

### Hvordan gjør jeg en turkis gradient mindre flat?

Legg til dypblå bunn, nesten hvitt høylys og lett korn. Disse tre grepene gjør den til vann fremfor et flatt fyll.