Tealgradient: koder från lagun till djuphav

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.

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.

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.

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.

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 förklarar dragningen, och korallgradienter har koder för den andra sidan.

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.

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.

: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); }

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.

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.