Turkos gradient: tropiska koder med djup

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.

Om ditt varumärke vill vara lugnt och seriöst vill du förmodligen ha blågröna gradienter 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.

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. 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. 2

   Sätt kroppen

   Använd din turkos, ungefär #2dd4bf till #40e0d0, över den största ytan, oftast mitten eller toppen.

3. 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. 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. 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 har metoden.

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 har fler semesterkombinationer.

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.

.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;
}

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.

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.