Cyangradient: skarpe, elektriske fargekoder

En cyangradient blander den klare fargen midt mellom grønt og blått med en partner: hvitt for is, blått for et elektrisk teknologiuttrykk, lime for friskhet, magenta for et cyberuttrykk eller dyp marineblå der cyan ser ut til å gløde. Ren skjermcyan er #00ffff, langt lysere enn mange forventer. Den viktigste ferdigheten er derfor å bestemme hvor ordene skal stå. Her følger koder du kan kopiere til hvert uttrykk, med kontrasttallene som betyr noe.

Cyan, blågrønt og turkis er forskjellige

Disse tre forveksles stadig, og forskjellen betyr noe når du briefer en designer eller velger en kode. CSS har navn på alle tre, og de er tydelig ulike. Cyan er klarest og mest balansert mellom grønt og blått. Turkis er mykere og litt grønnere, som edelsteinen. Blågrønt er mye mørkere og roligere.

Se blågrønn gradient og turkisgradient for de roligere slektningene. Denne artikkelen holder seg i den klare enden.

Koder for is- og bassenggradienter i cyan

Den lyse enden av cyan minner om kaldt vann og ren luft. Is er nesten hvitt med et snev av farge. Isbre og basseng går dypere, gjennom klar cyan til en blågrønn som kan bære hvit skrift nederst. De passer til sommertilbud, hudpleie med et kjølende budskap, drikke og alt som skal virke forfriskende.

Elektrisk cyan på mørke bakgrunner

Cyan blir elektrisk når den står mot mørke. Et lite cyanlys på nesten svart eller marineblå bunn minner om en skjerm, en laser eller en datavisualisering. Derfor finnes det overalt i programvare, spill og vitenskap. Hold det meste av rammen mørkt og la cyan fylle et hjørne eller en kant. Den cyanblå gradienten i dette settet er mest allsidig: klar i én ende og tydelig blå i den andre.

Teknologipaletter har flere hele fargesett bygget rundt uttrykket, og neongradienter dreier det videre mot natteliv.

Cyan med lime og magenta

Cyan til lime går gjennom mint og virker sporty, friskt og optimistisk. Cyan med magenta er cyberpunk-paret: to av de tre primærfargene i trykk, begge med full styrke. La blandingen gå gjennom mørk indigo, så minner den om en neongate om natten fremfor et barneleketøy. Artikkelen om magentagradient dekker den andre siden av paret.

Kontrastfellen: ord på cyan

Cyan er en av de lyseste mettede fargene en skjerm kan vise. Hvit skrift på ren #00ffff har bare omtrent 1,3 til 1 i kontrast og er uleselig, mens svart på samme cyan når omtrent 16,7 til 1. Hvitt begynner å virke når cyan blir dypere, rundt #0e7490, der det når omtrent 5,4 til 1. Fargekontrast og tilgjengelighet forklarer forholdene og målene.

Dette er vurderingene Gradiently gjør for deg. Auto-tekstfarge velger lys eller mørk skrift per linje fra Markens egen palett. Marken flytter det roligste området med best kontrast bak ordene, så en klar cyanbakgrunn aldri lar hvit tekst bli stående uten støtte.

En cyangradientkant i CSS

På mørke grensesnitt fungerer cyan vakkert som kant fremfor flate. En gradientkant holder kortet lesbart og tilfører det elektriske uttrykket. Dette bruker to bakgrunner, én klippet til det indre området og én til kanten, så avrundede hjørner beholdes.

.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, inkludert animerte kanter, finnes i CSS-gradientkant.

Hvor en cyangradient passer

Cyan er et naturlig valg til programvarelanseringer, utviklerverktøy, spill, badetøy, drikke og alt som skal virke raskt eller kaldt. På lanseringsdagen holder du ett cyanuttrykk gjennom kunngjøringen, lenkeforhåndsvisningen og endringsloggbanneret, så folk kjenner det igjen i hver strøm. Merkevarebygging for SaaS-oppstarter viser hvordan du bygger en hel identitet rundt én slik klar farge.