Cyan gradient: skarpe elektriske koder

En cyan gradient blander den klare farve midt imellem grøn og blå med en af sine naboer: hvid til is, blå til et elektrisk teknisk udtryk, lime til friskhed, magenta til en cyberfølelse eller en dyb marineblå, hvor cyan ser ud til at gløde. Ren skærmcyan er #00ffff, og den er langt lysere, end de fleste venter, så den vigtigste færdighed er at beslutte, hvor ordene skal være. Kopierbare koder til hvert udtryk følger, med de kontrasttal, der tæller.

Cyan, blågrøn og turkis er ikke det samme

De tre bliver byttet rundt hele tiden, og forskellen betyder noget, når du briefer en designer eller vælger en kode. CSS navngiver faktisk alle tre, og de er tydeligt forskellige. Cyan er den klareste og den mest afbalancerede mellem grøn og blå. Turkis er blødere og lidt grønnere, som ædelstenen. Blågrøn (teal) er meget mørkere og roligere.

For de roligere slægtninge, se blågrøn gradient og turkis gradient. Denne artikel bliver i den klare ende.

Koder til is- og pool-cyan gradienter

Den lyse ende af cyan føles som koldt vand og ren luft. Is er næsten hvid med et strejf af farve; gletsjer og pool går dybere, gennem klar cyan til et blågrønt, der kan bære hvid skrift nederst. De passer til sommertilbud, hudpleje med en afkølende historie, drikkevarer og alt, der vil føles forfriskende.

Elektrisk cyan på mørke baggrunde

Cyan bliver elektrisk, når den sidder på mørke. Et lille cyan lys på en næsten sort eller marineblå bund ligner en skærm, en laser eller en datavisualisering, og derfor er det overalt i software, gaming og videnskab. Hold det meste af billedet mørkt og lad cyan fylde et hjørne eller en kant. Cyanblå-gradienten i dette sæt er den mest alsidige af alle, klar i den ene ende og solidt blå i den anden.

Til fulde skemaer bygget omkring dette udtryk har tech-farvepaletter flere, og neon-gradienter skubber det videre mod natteliv.

Cyan med lime og med magenta

Cyan over i lime passerer mint og føles sporty, frisk og optimistisk. Cyan med magenta er cyberpunk-parringen: to af de tre trykprimærfarver, begge i fuld styrke. Lad den gå gennem en mørk indigo midte, og den føles som en neongade om natten frem for legetøj. Artiklen om magenta gradient dækker den anden side af parringen.

Kontrastfælden: ord på cyan

Cyan er en af de lyseste mættede farver, en skærm kan vise. Hvid skrift på ren #00ffff har en kontrast på kun omkring 1,3 til 1, hvilket er ulæseligt, mens sort på samme cyan når omkring 16,7 til 1. Hvid begynder at virke, når cyan dybner til omkring #0e7490, hvor den når cirka 5,4 til 1. Farvekontrast og tilgængelighed forklarer forholdene og målene.

Det er den slags vurdering, Gradiently træffer for dig. Automatisk farve vælger lys eller mørk skrift til hver linje ud fra Markens egen palet, og Marken flytter sit roligste og mest kontrastrige område bag ordene, så en klar cyan baggrund aldrig efterlader hvid tekst strandet.

En cyan gradientkant i CSS

På mørke grænseflader fungerer cyan smukt som en kant frem for en fyldning. En gradientkant holder kortet læseligt og tilføjer den elektriske fornemmelse. Den bruger to baggrunde, én klippet til padding og én til kanten, så den bevarer afrundede hjørner.

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

Flere teknikker, blandt andet animerede kanter, findes i CSS gradientkant.

Hvor en cyan gradient passer

Cyan er et naturligt valg til softwarelanceringer, udviklerværktøjer, gaming, badetøj, drikkevarer og alt, der vil føles hurtigt eller koldt. På lanceringsdagen bør du holde ét cyan udtryk på tværs af annonceopslaget, linkforhåndsvisningen og changelog-banneret, så folk genkender det i hvert feed. SaaS-startup-branding viser, hvordan du bygger en hel identitet omkring én klar farve som denne.