# Turkos gradient: tropiska koder med djup

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

Klar turkos för sig ser ut som en poolikon. Ge den en djup botten, en varm strand och lite ljus, så blir den havet utanför en ö. Så gör du, med koder.

## The short version

- En turkos gradient blandar klara, grönaktiga blå toner, och den ser mest naturlig ut när den också innehåller ett djupare blått och en ljus, nästan vit högdager.
- Turkos är ljusare och klarare än blågrön och grönare än cyan; den namngivna CSS-färgen turquoise är #40e0d0.
- Platta turkosa gradienter ser syntetiska ut, så lägg till djup med en marinblå botten, en blek högdager eller en varm sandfärg.
- Vit text misslyckas på klar turkos; använd ett djupt marinblått som #083344 till texten i stället.
- Sand, korall och vitt är de mest naturliga följeslagarna till turkos eftersom de påminner om en strand.

En **turkos gradient** blandar klara, grönaktiga blå toner, och de som verkligen känns tropiska har tre saker: en blek högdager där ljuset träffar, en klar turkos kropp och ett djupare blått under. Utan det omfånget ser turkos platt och syntetisk ut. Nedan finns koder för klara laguner, turkos med verkligt djup och turkos bredvid varm sand, följt av CSS och de textfärger som håller allt läsbart.

## Turkos, blågrön, cyan och aqua jämförda

De här fyra används om vartannat, men de är olika färger, och valet av rätt ändrar stämningen. Turkos är den klaraste och mest semesterlika i gänget.

| Färg | Typisk hex | Hur den läses |
| --- | --- | --- |
| Turkos | `#40e0d0` | Klar, grönaktig, tropisk, som en ädelsten |
| Aqua | `#7fffd4` (aquamarine) | Blek, mintig, ljus, vattnig |
| Cyan | `#00ffff` (CSS cyan) | Elektrisk, kallare, digital |
| Blågrön (teal) | `#008080` (CSS teal) | Djupare, dämpad, lugn, vuxen |

Turkos är ljusare än blågrön och grönare än cyan. För den djupare varianten, se artikeln om blågrön gradient.

Om ditt varumärke vill vara lugnt och seriöst vill du förmodligen ha [blågröna gradienter](https://gradiently.design/sv/guide/teal-gradient) i stället. Om det vill ha semester, energi och värme, stanna här.

## Klara tropiska turkosa gradienter

Det här är vykortsblandningarna: grunt vatten över vit sand. Alla har ett blekt stopp så att turkosen har något att lysa mot, och ingen av dem glider ut i grått.

- Grunt vatten: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagun: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Solbelyst vik: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Turkos till himmel: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Revets kant: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Akvamarin: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Sex klara turkosa blandningar. Ett blekt eller vitt stopp är det som får var och en att kännas belyst.

## Så ger du en turkos gradient djup

Verkligt tropiskt vatten har aldrig en enda färg. Det är blekt över sand, turkost över grunt rev och djupblått där det stupar. Kopiera den uppbyggnaden så slutar din gradient se ut som en platt fyllning.

1. **Välj en botten** Välj ett djupblått till den mörkaste delen, som `#0c4a6e` eller `#083344`. Det förankrar turkosen och ger den något att lysa mot.
2. **Sätt kroppen** Använd din turkos, ungefär `#2dd4bf` till `#40e0d0`, över den största ytan, oftast mitten eller toppen.
3. **Lägg till en högdager** Placera ett litet, nästan vitt stopp som `#ecfeff` där ljuset skulle träffa. En radiell gradient i ett hörn fungerar bra.
4. **Värm en kant** Dra eventuellt en sandfärg längs botten eller i ett hörn, så att den kalla blandningen får en varm strand.
5. **Avsluta ytan** Lägg på lätt korn så att de klara färgerna inte får sjok när plattformen komprimerar din bild. [Kornig gradient](https://gradiently.design/sv/guide/grainy-gradients) har metoden.

- Stupet: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Ljus genom vatten: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Turkos till kobolt: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Glödande djup: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turkos med en djupblå botten. De passar resor, dykning, drycker och strandevent på kvällen.

## Turkosa gradienter med sand

Den mest naturliga partnern till turkos är själva stranden: varm sand, korall och vitt. De här färgerna ligger tvärs över färghjulet från turkos, så blanda dem bara där mättnaden är låg, via bleka stopp, eller håll dem som separata ytor. Då får du en strandlinje i stället för en grå sudd. [Färgpaletter för sommaren](https://gradiently.design/sv/guide/summer-color-palettes) har fler semesterkombinationer.

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

Turkos möter sand genom en blek mitt, så att den varma och den kalla sidan aldrig blir grå.

- Skum: #ecfeff
- Turkos: #40e0d0
- Revblå: #0891b2
- Djupt vatten: #083344
- Sand: #f5deb3
- Korall: #fb7185

En komplett tropisk palett: skum, två blå toner, ett djupt bläck, sand och en korallaccent.

## Där en turkos gradient fungerar bäst

Turkos är högljudd, så den förtjänar sin plats där folk redan väntar sig semester, vatten eller kul. Några användningar där den slår alla andra färger:

- **Resor och hotell:** en story i 1080×1920 med ”Stupet” bakom en enda rad som ”Tre nätter i Lissabon”.
- **Simskolor och badhus:** en blek ”Grunt vatten”-bakgrund till tidtabeller, med djupt marinblå text.
- **Smoothiebarer och juicevarumärken:** ”Lagun” med en korallfärgad prislapp, som poppar eftersom den ligger mitt emot turkos.
- **Sommarmenyer och festivalaffischer:** ”Strandlinje” på en A4-affisch, havet upptill och sanden där detaljerna står.
- **Smycken:** turkos är också en sten, så ett djupt ”Ljus genom vatten” bakom produktbilder i silver eller guld känns rätt.

Undvik den till allt som ska kännas stilla eller formellt. En advokatbyrå eller en begravningsbyrå är bättre betjänta av blågrönt eller marinblått.

## CSS för turkos gradient med ljus

Två radiella högdagrar lagda över en linjär bas ger intrycket av solljus genom vatten. Det är lätt att rendera och behöver ingen bild. Syntaxen förklaras i [radiella gradienter i CSS](https://gradiently.design/sv/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;
}
```

Skumljus uppe till vänster, turkos i mitten och djupt vatten längst ned. Placera rubriker i den övre halvan, i djupvattenbläck.

## Text på en turkos gradient

Turkos är mycket ljusare än den ser ut. Vitt på `#40e0d0` mäter ungefär 1,6 till 1, vilket ingen kan läsa bekvämt i solljus på en mobil. Djupt vatten `#083344` på samma turkos mäter ungefär 8 till 1. Använd mörkt marinblå text över de klara ytorna och byt till vitt först där gradienten har sjunkit till ett djupt blått. De fullständiga reglerna finns i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility).

Ett evenemangsinlägg för vattensport där blek text blir urblekt mot en klar turkos gradient

Ljus text på klar turkos blir urblekt så fort någon tittar på den utomhus.

Samma evenemangsinlägg med tydlig, djupfärgad text på en lugnare yta av den turkosa gradienten

Samma inlägg med textfärgen och den lugna zonen vald för orden.

Det är precis vad en Mark från Gradiently gör av sig själv: dess lugnaste område flyttar sig bakom orden och Auto-bläck väljer ljus eller mörk text per rad utifrån Markens egna färger. Rese- och hotellteam som postar varje dag hittar fler idéer i [sociala medier för resebyråer](https://gradiently.design/sv/guide/travel-agency-social-media).

## FAQ

### Vilken hexkod har turkos?

Den namngivna CSS-färgen `turquoise` är `#40e0d0`. Något djupare varianter som `#2dd4bf` används också mycket.

### Vilka färger passar till en turkos gradient?

Djupt marinblått, vitt, sand och korall. Marinblått ger djup, vitt ger ljus, och sand eller korall tillför värme när de hålls utanför huvudblandningen.

### Är turkos samma sak som blågrön?

Nej. Turkos är ljusare, klarare och mer tropisk; blågrön är djupare och mer dämpad. Båda ligger mellan blått och grönt.

### Kan jag använda vit text på turkos?

Inte på klar turkos, där vitt får mycket dålig kontrast. Använd djupt marinblå text, eller flytta vit text till den mörkaste blå delen av gradienten.

### Hur får jag en turkos gradient att se mindre platt ut?

Lägg till en djupblå botten, en nästan vit högdager och lätt korn. De tre stegen gör att den läses som vatten i stället för en platt fyllning.