Cyan gradient: skarpa, eldiga koder

En cyan gradient blandar den klara färgen halvvägs mellan grönt och blått med en av sina grannar: vitt för is, blått för en elektrisk techlook, lime för friskhet, magenta för cyberkänsla, eller en djup marinblå där cyan verkar glöda. Ren skärmcyan är #00ffff, och den är mycket ljusare än de flesta väntar sig, så huvudkunskapen är att bestämma var orden ska ligga. Kopierbara koder för varje look följer, med kontrasttalen som spelar roll.

Cyan, blågrön och turkos är inte samma sak

De här tre byts ständigt ut, och skillnaden spelar roll när du ger en brief till en designer eller väljer en kod. CSS namnger till och med alla tre, och de är tydligt skilda. Cyan är den klaraste och den mest balanserade mellan grönt och blått. Turkos är mjukare och lite grönare, som ädelstenen. Blågrön (teal) är mycket mörkare och lugnare.

För de lugnare släktingarna, se blågrön gradient och turkos gradient. Den här artikeln stannar vid den klara änden.

Gradientkoder för is- och poolcyan

Den ljusa änden av cyan känns som kallt vatten och ren luft. Is är nästan vitt med en antydan av färg; glaciär och pool går djupare, genom klar cyan till ett blågrönt som kan bära vit text längst ner. De passar sommarerbjudanden, hudvård med en kylande historia, drycker och allt som vill kännas uppfriskande.

Elektrisk cyan på mörka bakgrunder

Cyan blir elektrisk när den ligger mot mörker. Ett litet cyanljus på en nästan svart eller marinblå botten ser ut som en skärm, en laser eller en datavisualisering, vilket är varför den finns överallt i mjukvara, spel och vetenskap. Håll större delen av bilden mörk och låt cyan ta ett hörn eller en kant. Cyanblå gradienten i den här uppsättningen är den mest mångsidiga av alla, klar i ena änden och stadigt blå i den andra.

För fullständiga scheman byggda kring den här looken har techfärgpaletter flera, och neongradienter driver den längre mot nattliv.

Cyan med lime och med magenta

Cyan till lime passerar genom mint och känns sportig, frisk och optimistisk. Cyan med magenta är cyberpunkparet: två av de tre tryckprimärfärgerna, båda på full volym. Kör den genom en mörk indigomitt så känns den som en neongata på natten snarare än en barnleksak. Artikeln om magentagradient tar upp andra sidan av det här paret.

Kontrastfällan: ord på cyan

Cyan är en av de ljusaste mättade färger en skärm kan visa. Vit text på ren #00ffff har en kontrast på bara ungefär 1,3 till 1, vilket är oläsligt, medan svart på samma cyan når ungefär 16,7 till 1. Vitt börjar fungera när cyan fördjupas till runt #0e7490, där det når ungefär 5,4 till 1. Färgkontrast och tillgänglighet förklarar kvoterna och målvärdena.

Det här är den sortens bedömning Gradiently gör åt dig. Auto-bläck väljer ljus eller mörk text för varje rad utifrån Markens egen palett, och Marken flyttar sitt lugnaste, mest kontrastrika område bakom orden, så en klar cyanbakgrund lämnar aldrig vit text strandsatt.

En cyan gradientram i CSS

I mörka gränssnitt fungerar cyan fint som kant snarare än fyllning. En gradientram håller kortet läsbart samtidigt som den ger den elektriska känslan. Den här använder två bakgrunder, en klippt mot utfyllnaden och en mot ramen, så den behåller rundade hörn.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}

Fler tekniker, inklusive animerade ramar, finns i CSS gradientram.

Var en cyan gradient passar

Cyan är ett naturligt val för mjukvarulanseringar, utvecklarverktyg, spel, badkläder, drycker och allt som vill kännas snabbt eller kallt. På lanseringsdagen, håll en cyanlook genom meddelandeinlägget, länkförhandsvisningen och changelog-bannern så att folk känner igen den i varje flöde. Branding för SaaS-startups visar hur du bygger en hel identitet kring en klar färg som den här.