# Tealgradient: koder från lagun till djuphav

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

Teal ligger exakt mellan blått och grönt, vilket gör den lugn, smart och ovanligt lätt att blanda. Gå ner från lagunen till djuphavet med koder för varje djup.

## The short version

- En tealgradient blandar blågröna nyanser, oftast från en blek akva ner till ett djupt grönblått.
- Teal blandas rent med sina grannar: cyan, smaragd, blått och marinblått.
- Varma accenter som korall, persika och koppar ligger mitt emot teal och får den att lysa när de hålls utanför blandningen.
- Vit text kräver en teal som är minst lika djup som #0f766e för att klara kontrasten, och ljusare teal behöver mörk text.
- Mycket mörk teal är en utmärkt botten för mörkt läge eftersom den känns mjukare än svart och mindre väntad än marinblått.

En **tealgradient** går mellan blågröna nyanser: blek akva i den ljusa änden, en klar mellanteal i mitten och ett mörkt, bläckigt grönblått längst ner. Eftersom teal ligger halvvägs mellan blått och grönt blandas den lätt åt båda hållen och blir nästan aldrig grumlig. Koderna nedan följer den ner efter djup, från en solig lagun till djuphavet, med anteckningar om accenter, CSS och text för var och en.

## En tealstege för att bygga vilken gradient som helst

De flesta bra tealgradienter är två till fyra steg från den här stegen. Välj grannar för en mild blandning, eller hoppa över tre steg för dramatik. Namnen nedan används genom resten av artikeln.

- Grundvatten: #ccfbf1
- Lagun: #5eead4
- Akva: #2dd4bf
- Teal: #14b8a6
- Rev: #0d9488
- Kelp: #0f766e
- Djup teal: #115e59
- Avgrund: #042f2e

Åtta teal från ljus till mörk. Två eller tre grannar ger en lugn blandning, från ljus till mörk ger det djup.

## Ljusa tealgradienter: lagun och grundvatten

Ljus teal är ren, fräsch och stilla glad. Den passar välmående, pooler och badkläder, tand- och hälsokliniker och varje produkt som vill kännas hygienisk utan rent blåtts kyla. Låt den gå mot vitt eller mot en blek mint för att hålla den mjuk.

- Grundvatten: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Lagun: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Himmel till lagun: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Solbelyst pool: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Bleka teal som förblir fräscha. Var och en behåller ett nästan vitt stopp så att mörk text har en plats att ligga på.

## Tealgradienter i mellantoner: rev och jade

Mitten av skalan är teal när den är som mest självsäker. De här fungerar bra för appar, fintech-instrumentpaneler, hållbarhetsvarumärken och utbildning, eftersom de läses som både pålitliga (blått) och levande (grönt). Lutar du mot smaragd blir den naturlig, lutar du mot blått blir den teknisk.

- Rev: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Cyan till kelp: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Teal till blått: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Tealgradient i tre steg: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

Mellanteal drar mot smaragd eller blått. Välj riktning efter hur ditt varumärke ska kännas.

## Mörka tealgradienter: djuphavet

I den mörka änden blir teal nästan svart med en sval grön andedräkt. Det är den mest sofistikerade tealen: advokatbyråer, sprit, hotell, arkitektur, kvällsevenemang. Den är också en superb botten för en enda stark accent, eftersom ingenting i den konkurrerar. Mörka blandningar får ränder i komprimerad export, så lite korn hjälper, se [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding).

- Nedstigning: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Ljus ovanifrån: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Djup teal till midnatt: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Ljusstråle: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Mörka teal med en enda ljuskälla. De känns dyra och lugna.

## Varma accenter för en tealgradient

Tealens motsats på färghjulet är ett varmt rödorange, så korall, persika, aprikos och koppar får den att sjunga. Håll den varma färgen utanför själva blandningen: en gradient från teal till korall passerar genom ett matt grått i mitten. Använd accenten till en knapp, en rubrik eller en liten form i stället. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) förklarar dragningen, och [korallgradienter](https://gradiently.design/sv/guide/coral-gradient) har koder för den andra sidan.

- Undvik: grå mitt: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Kopparsol på djup teal: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Blek teal till persika: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

En mättad blandning från teal till korall blir grå i mitten. Ett litet varmt ljus på teal, eller två bleka toner, fungerar mycket bättre.

Lägg märke till den tredje rutan: mycket bleka toner av motsatser blandas bra, eftersom det finns lite mättnad att förlora. Det är ett användbart knep för mjuka förpackningar och bröllopspapper.

## Välja en tealgradient för ditt varumärke

Teal är populär hos hälso-, finans- och hållbarhetsvarumärken, så nyansen ensam gör dig inte särskiljande. Det som gör det är djupet du väljer, accenten du paras med och ytan. Utgå från det jobb designen ska göra.

| Om du är | Prova | Para med |
| --- | --- | --- |
| En klinik, en pool eller ett hudvårdsvarumärke | Grundvatten eller Lagun | Kolgrå text, vitt utrymme |
| En app eller en fintech-produkt | Teal till blått | En korallfärgad knappfärg |
| Ett café, en blomsterhandlare eller ett trädgårdscenter | Jade | Crème och terrakotta |
| Ett hotell, en bar eller en advokatbyrå | Ljus ovanifrån | Detaljer i koppar eller mässing |
| Ett kvällsevenemang | Ljusstråle | Rubrik i blek lagun |

Utgångspunkter, inte regler. Testa var och en mot din riktiga rubrik och logotyp.

## Tealgradient i CSS för ett gränssnitt i mörkt läge

Djup teal är ett härligt alternativ till svart eller marinblått för ett mörkt gränssnitt. Den känns mjukare än rent svart och ger ändå blek text gott om kontrast. Här är en bakgrund för ett appskal med ett mjukt sken bakom sidans överdel. Mer om tillvägagångssättet finns i [design för mörkt läge](https://gradiently.design/sv/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); }
```

Ett djuptealfärgat skal med ett tealsken överst. Bleka lagunfärgade länkar förblir läsbara mot det.

## Läsbar text på teal

Mellanteal är vilseledande. `#14b8a6` ser stark nog ut för vit text men mäter ungefär 2,5 till 1, ett tydligt underkänt. Vitt kräver Kelp (`#0f766e`, ungefär 5,5 till 1) eller mörkare. På allt från Akva och uppåt använder du färgen Avgrund `#042f2e` som text: den håller texten i tealfamiljen och är lätt att läsa.

| Bakgrund | Vit text | Avgrundstext #042f2e |
| --- | --- | --- |
| Lagun `#5eead4` | Underkänd | Ungefär 9,8:1 |
| Teal `#14b8a6` | Ungefär 2,5:1, underkänd | Ungefär 5,8:1 |
| Rev `#0d9488` | Ungefär 3,7:1, bara stor text | Svag |
| Kelp `#0f766e` | Ungefär 5,5:1, godkänd | Underkänd |
| Djup teal `#115e59` | Ungefär 7,6:1, godkänd | Underkänd |

Teal växlar från mörk till vit text mellan Rev och Kelp.

Ett stående spainlägg med vit text på en djup tealgradient

Som ett stående inlägg ligger rubriken i den lugnaste tealen.

Samma spadesign som en hög story där tealljuset har flyttats för att passa formatet

Samma design som en story, renderad på nytt i stället för beskuren.

Den sista punkten betyder mer än den ser ut. En gradient som beskärs från ett inlägg till en story flyttar ljuset till fel plats. I Gradiently renderas en Mark i varje storlek, och Designer kan göra de andra storlekarna åt dig, så ett tealutseende förblir balanserat i flödet, i storyn och i [webbplatsens hero](https://gradiently.design/sv/guide/website-hero-background).

## FAQ

### Vilka färger passar till en tealgradient?

Cyan, smaragd, blått och marinblått blandas in i den. Korall, persika, koppar och guld ger starka varma accenter när de används utanför blandningen.

### Vad är hexkoden för teal?

Webbens namngivna `teal` är `#008080`. De flesta moderna paletter använder livligare versioner som `#14b8a6` för mellanteal och `#0f766e` för en djupare.

### Vad är skillnaden mellan teal och turkos?

Teal är djupare och mer dämpad, turkos är ljusare, klarare och lutar något mer åt grönt. Båda ligger mellan blått och grönt.

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

Bara på djup teal, från ungefär `#0f766e` och mörkare. Klara och ljusa teal behöver mörk text för att klara kontrasten.

### Är teal en bra färg för mörkt läge?

Ja. En mycket mörk teal som `#042f2e` är mjukare än svart och mer särpräglad än marinblått, och bleka tealaccenter läses bra på den.