# Cyangradient: skarpe, elektriske fargekoder

[Canonical HTML page](https://gradiently.design/nb/guide/cyan-gradient)

Cyan er fargen på skjermer, svømmebasseng og is: ren, klar og litt futuristisk. Den er også mye lysere enn den ser ut, noe som påvirker hvordan du plasserer ord på den.

## The short version

- En cyangradient blander den klare fargen midt mellom grønt og blått med hvitt, blått, lime, magenta eller dyp marineblå.
- Ren skjermcyan er `#00ffff`, også kalt aqua i CSS, og er lysere og klarere enn blågrønt eller turkis.
- Hvit tekst på ren cyan har bare omtrent 1,3 til 1 i kontrast. Cyan trenger derfor mørk skrift eller mye dypere bakgrunn bak ordene.
- Cyan virker mest elektrisk på nesten svart eller marineblå bunn, der en liten mengde ser ut til å gløde.
- Cyan glir rent inn i blått og lime fordi begge er naboene i fargesirkelen.

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.

| Farge | CSS-navn og hex | Karakter |
| --- | --- | --- |
| Cyan | `aqua` / `cyan`, `#00ffff` | Klarest, elektrisk, syntetisk |
| Elektrisk cyan | `#00e5ff` | Cyan med litt mer blått, behageligere for øynene |
| Turkis | `turquoise`, `#40e0d0` | Mykere og grønnere, tropisk |
| Blågrønt | `teal`, `#008080` | Mørkt, rolig, modent |

Fire naboer. Hvis gradienten skal virke rolig fremfor klar, er det trolig blågrønt du ønsker.

Se [blågrønn gradient](https://gradiently.design/nb/guide/teal-gradient) og [turkisgradient](https://gradiently.design/nb/guide/turquoise-gradient) for de roligere slektningene. Denne artikkelen holder seg i den klare enden.

- Is: #f0fdff
- Bassenglys: #a5f3fc
- Ren cyan: #00ffff
- Elektrisk cyan: #00e5ff
- Dyp cyan: #0891b2
- Lagune: #0e7490
- Nattmarineblå: #082f49
- Limeaksent: #b6f73a

En cyanfamilie fra is til marineblått, med lime som partneren som holder den frisk.

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

- Is: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Isbre: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Svømmebasseng: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Lyse cyantoner. Sett mørk skrift på øvre del av hver. Bare det dypeste stoppet nederst i isbre og basseng tåler hvitt.

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

- Cyan til elektrisk blått: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Cyanlys på svart: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Kretskortnatt: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Mørke bunner med cyanlys. Kretskortnatt stiger fra svart til cyan, perfekt til et toppfelt med overskrift i den mørke øvre halvdelen.

[Teknologipaletter](https://gradiently.design/nb/guide/tech-color-palettes) har flere hele fargesett bygget rundt uttrykket, og [neongradienter](https://gradiently.design/nb/guide/neon-gradients) 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](https://gradiently.design/nb/guide/magenta-gradient) dekker den andre siden av paret.

- Cyan til lime: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

To dristige kombinasjoner. Begge er høylytte, så gi dem korte tekster og mye plass.

## 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](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer forholdene og målene.

### Vanskelig å lese

- Hvit skrift på klar cyan
- Cyanskrift på en hvit side
- Liten tekst over den lyse midten av en gradient
- Lys blå skrift på is

### Lett å lese

- Marineblå eller nesten svart skrift på klar cyan
- Cyanskrift på en marineblå eller svart side
- Liten tekst bare på det dypeste stoppet
- Hvit skrift på lagune #0e7490 eller mørkere

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.

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

Et mørkt kort med kant fra cyan til blått. Bytt den andre gradienten til cyan mot lime for et friskere uttrykk.

Flere teknikker, inkludert animerte kanter, finnes i [CSS-gradientkant](https://gradiently.design/nb/guide/css-gradient-border).

## 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](https://gradiently.design/nb/guide/saas-startup-branding) viser hvordan du bygger en hel identitet rundt én slik klar farge.

Et bredt sosialt innlegg med mørk marineblå bakgrunn, klart cyanlys langs én kant og teksten Utrulling på sekunder i hvitt

Et lanseringsinnlegg til X på 1600×900. Hvit skrift på den mørke siden, med cyanlyset holdt unna ordene.

## FAQ

### Hva er hex-koden for cyan?

Ren skjermcyan er #00ffff, også kalt aqua i CSS. En litt blåere og mer behagelig elektrisk cyan er #00e5ff.

### Hva er forskjellen på cyan og blågrønt?

Cyan er klart og lyst, midt mellom grønt og blått. Blågrønt, #008080 i CSS, er en mye mørkere og roligere blågrønn farge.

### Hvilken tekstfarge virker på cyanbakgrunn?

Marineblått eller nesten svart på klar cyan. Hvitt virker bare på dype cyantoner som #0e7490 eller mørkere.

### Hvilke farger passer med en cyangradient?

Blått og lime blandes rent fordi de er naboer til cyan. Magenta gir et dristig cyberpunk-par, og marineblått eller svart får cyan til å gløde.