# Cyan gradient: skarpe elektriske koder

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

Cyan er skærmenes, svømmebassinernes og isens farve: ren, klar og lidt futuristisk. Den er også meget lysere, end den ser ud til, hvilket ændrer, hvordan du sætter ord på den.

## The short version

- En cyan gradient blander den klare farve midt imellem grøn og blå med hvid, blå, lime, magenta eller en dyb marineblå.
- Ren skærmcyan er `#00ffff`, som CSS også kalder aqua, og den er lysere og klarere end blågrøn eller turkis.
- Hvid tekst på ren cyan har en kontrast på kun omkring 1,3 til 1, så cyan kræver mørk skrift eller en meget dybere baggrund bag ordene.
- Cyan ser mest elektrisk ud på en næsten sort eller marineblå bund, hvor en lille smule af den ser ud til at gløde.
- Cyan blander rent over i blå og lime, fordi begge er dens naboer på farvehjulet.

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.

| Farve | CSS-navn og hex | Karakter |
| --- | --- | --- |
| Cyan | `aqua` / `cyan`, `#00ffff` | Klarest, elektrisk, syntetisk |
| Elektrisk cyan | `#00e5ff` | Cyan med et strejf mere blå, mildere for øjnene |
| Turkis | `turquoise`, `#40e0d0` | Blødere og grønnere, tropisk |
| Blågrøn (teal) | `teal`, `#008080` | Mørk, rolig, voksen |

Fire naboer. Hvis din gradient skal føles rolig frem for klar, vil du sandsynligvis have teal, ikke cyan.

For de roligere slægtninge, se [blågrøn gradient](https://gradiently.design/da/guide/teal-gradient) og [turkis gradient](https://gradiently.design/da/guide/turquoise-gradient). Denne artikel bliver i den klare ende.

- Is: #f0fdff
- Poollys: #a5f3fc
- Ren cyan: #00ffff
- Elektrisk cyan: #00e5ff
- Dyb cyan: #0891b2
- Lagune: #0e7490
- Natmarine: #082f49
- Limeaccent: #b6f73a

En cyanfamilie fra is til marineblå, plus lime som den partner, der holder den frisk.

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

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

Lyse cyaner. Sæt mørk skrift på den øverste del af hver; kun det dybeste stop nederst i gletsjer og pool tager hvid.

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

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

Mørke bunde med cyan lys. Kredsløbsnat stiger fra sort til cyan, perfekt til en hero, hvor overskriften sidder i den mørke øvre halvdel.

Til fulde skemaer bygget omkring dette udtryk har [tech-farvepaletter](https://gradiently.design/da/guide/tech-color-palettes) flere, og [neon-gradienter](https://gradiently.design/da/guide/neon-gradients) 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](https://gradiently.design/da/guide/magenta-gradient) dækker den anden side af parringen.

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

To dristige parringer. Begge er højlydte, så giv dem korte ord og masser af plads.

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

### Svært at læse

- Hvid skrift på klar cyan
- Cyan skrift på en hvid side
- Lille tekst hen over gradientens klare midte
- Blegblå skrift på is

### Let at læse

- Marineblå eller næsten sort skrift på klar cyan
- Cyan skrift på en marineblå eller sort side
- Lille tekst kun på det dybeste stop
- Hvid skrift på lagune #0e7490 eller mørkere

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.

```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 en cyan-til-blå kant. Byt den anden gradient ud med cyan til lime for en friskere fornemmelse.

Flere teknikker, blandt andet animerede kanter, findes i [CSS gradientkant](https://gradiently.design/da/guide/css-gradient-border).

## 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](https://gradiently.design/da/guide/saas-startup-branding) viser, hvordan du bygger en hel identitet omkring én klar farve som denne.

Et bredt opslag til sociale medier med en mørk marineblå baggrund, et klart cyan lys i den ene kant og ordene Udrul på få sekunder i hvidt

Et lanceringsopslag til X i 1600×900. Hvid skrift i den mørke side, med cyan lyset holdt væk fra ordene.

## FAQ

### Hvad er hex-koden for cyan?

Ren skærmcyan er #00ffff, i CSS også kaldet aqua. En lidt blåere, mere behagelig elektrisk cyan er #00e5ff.

### Hvad er forskellen på cyan og teal?

Cyan er klar og lys, midt imellem grøn og blå. Teal, #008080 i CSS, er en meget mørkere og roligere blågrøn.

### Hvilken tekstfarve virker på en cyan baggrund?

Marineblå eller næsten sort på klar cyan. Hvid virker kun på dybe cyaner som #0e7490 eller mørkere.

### Hvilke farver passer godt til en cyan gradient?

Blå og lime blander rent, fordi de er cyans naboer. Magenta giver en dristig cyberpunk-parring, og marineblå eller sort får cyan til at gløde.