# Cyan gradient: skarpa, eldiga koder

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

Cyan är färgen på skärmar, simbassänger och is: ren, klar och lite futuristisk. Den är också mycket ljusare än den ser ut, vilket ändrar hur du lägger ord på den.

## The short version

- En cyan gradient blandar den klara färgen halvvägs mellan grönt och blått med vitt, blått, lime, magenta eller en djup marinblå.
- Ren skärmcyan är `#00ffff`, som CSS också kallar aqua, och den är ljusare och klarare än blågrön eller turkos.
- Vit text på ren cyan har en kontrast på bara ungefär 1,3 till 1, så cyan behöver mörk text eller en mycket djupare bakgrund bakom orden.
- Cyan ser mest elektrisk ut på en nästan svart eller marinblå botten, där en liten mängd av den verkar glöda.
- Cyan blandas rent med blått och lime, eftersom båda är dess grannar på färghjulet.

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ärg | CSS-namn och hex | Karaktär |
| --- | --- | --- |
| Cyan | `aqua` / `cyan`, `#00ffff` | Klarast, elektrisk, syntetisk |
| Elektrisk cyan | `#00e5ff` | Cyan med en nypa mer blått, skonsammare för ögonen |
| Turkos | `turquoise`, `#40e0d0` | Mjukare och grönare, tropisk |
| Blågrön (teal) | `teal`, `#008080` | Mörk, lugn, vuxen |

Fyra grannar. Om din gradient ska kännas lugn snarare än klar vill du förmodligen ha teal, inte cyan.

För de lugnare släktingarna, se [blågrön gradient](https://gradiently.design/sv/guide/teal-gradient) och [turkos gradient](https://gradiently.design/sv/guide/turquoise-gradient). Den här artikeln stannar vid den klara änden.

- Is: #f0fdff
- Poolljus: #a5f3fc
- Ren cyan: #00ffff
- Elektrisk cyan: #00e5ff
- Djup cyan: #0891b2
- Lagun: #0e7490
- Nattmarin: #082f49
- Limeaccent: #b6f73a

En cyanfamilj från is till marinblått, plus lime som partnern som håller den frisk.

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

- Is: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Glaciär: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Simbassäng: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Ljusa cyaner. Lägg mörk text på den övre delen av varje; bara det djupaste stoppet längst ner i glaciär och pool tar vitt.

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

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

Mörka bottnar med cyanljus. Kretsnatt stiger från svart till cyan, perfekt för en hjältesektion där rubriken sitter i den mörka övre halvan.

För fullständiga scheman byggda kring den här looken har [techfärgpaletter](https://gradiently.design/sv/guide/tech-color-palettes) flera, och [neongradienter](https://gradiently.design/sv/guide/neon-gradients) 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](https://gradiently.design/sv/guide/magenta-gradient) tar upp andra sidan av det här paret.

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

Två djärva par. Båda är högljudda, så ge dem korta ord och mycket utrymme.

## 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](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar kvoterna och målvärdena.

### Svårläst

- Vit text på klar cyan
- Cyanfärgad text på en vit sida
- Liten text över den klara mitten av en gradient
- Blekblå text på is

### Lättläst

- Marinblå eller nästan svart text på klar cyan
- Cyanfärgad text på en marinblå eller svart sida
- Liten text bara på det djupaste stoppet
- Vit text på lagun #0e7490 eller mörkare

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.

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

Ett mörkt kort med en ram från cyan till blått. Byt den andra gradienten mot cyan till lime för en friskare känsla.

Fler tekniker, inklusive animerade ramar, finns i [CSS gradientram](https://gradiently.design/sv/guide/css-gradient-border).

## 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](https://gradiently.design/sv/guide/saas-startup-branding) visar hur du bygger en hel identitet kring en klar färg som den här.

Ett brett socialt inlägg med mörkt marinblå bakgrund, ett klart cyanljus i ena kanten och orden Deploy på sekunder i vitt

Ett lanseringsinlägg för X i 1600×900. Vit text på den mörka sidan, med cyanljuset hållet borta från orden.

## FAQ

### Vad är hexkoden för cyan?

Ren skärmcyan är #00ffff, som i CSS också kallas aqua. En något blåare, behagligare elektrisk cyan är #00e5ff.

### Vad är skillnaden mellan cyan och blågrön?

Cyan är klar och ljus, halvvägs mellan grönt och blått. Teal, #008080 i CSS, är ett mycket mörkare och lugnare blågrönt.

### Vilken textfärg fungerar på cyanbakgrund?

Marinblå eller nästan svart på klar cyan. Vitt fungerar bara på djupa cyaner som #0e7490 eller mörkare.

### Vilka färger passar till en cyan gradient?

Blått och lime blandas rent eftersom de är cyans grannar. Magenta ger ett djärvt cyberpunkpar, och marinblått eller svart får cyan att glöda.