# Sinivioletti liukuväri: 20 puhtaasti sekoittuvaa koodia

[Canonical HTML page](https://gradiently.design/fi/guide/blue-purple-gradient)

Sininen ja violetti ovat naapurivärejä, joten ne sekoittuvat lähes kaikkia pareja helpommin. Siksi moni sinivioletti liukuväri näyttää samalta. Tässä kaksikymmentä erilaista.

## The short version

- Sinivioletti liukuväri sekoittaa naapurivärejä, kuten sinistä #3b82f6, indigoa #4f46e5 ja violettia #7c3aed, joten siirtymä pysyy puhtaana ilman yhdistävää väriä.
- Siniviolettien liukujen tavallisin ongelma ei ole sameus vaan samanlaisuus, koska indigon ja violetin oletusdiagonaalia käytetään kaikkialla.
- Syaanin ja pinkin tai himmeän sinisen ja himmeän violetin liu’ut voivat harmaantua keskeltä. OKLCH-interpolointi pitää ne kirkkaina.
- Valkoinen teksti erottuu indigolla ja violetilla, mutta usein huonosti keskisinisellä ja laventelilla, joilla syvä indigomuste toimii paremmin.
- Tumma pohja, säästeliäästi käytetty kolmas väri ja pieni rae tekevät sinivioletista liukuväristä harkitun oletusvalinnan sijaan.

**Sinivioletti liukuväri** kulkee väriympyrän naapurivärien välillä: sininen `#3b82f6`, indigo `#4f46e5`, violetti `#7c3aed` ja niiden ympärillä olevat pehmeät sinililat ja laventelit. Vierekkäiset sävyt pitävät liu’un puhtaana lähes automaattisesti. Vaikeampaa on tehdä liukuväri, joka ei näytä tuhansilta samaa yhdistelmää käyttäviltä sovelluskuvakkeilta ja konferenssikalvoilta. Alla on kaksikymmentä koodia neljässä tunnelmassa, sameaksi muuttuvat poikkeukset ja kullekin sopivat tekstivärit.

## Miksi sininen ja violetti sekoittuvat niin hyvin

Violetti on sinistä, jossa on hieman punaista. Niiden välillä jokainen askel on aito kylläinen väri: sininen, indigo, violetti. Vertaa tätä sinisen ja oranssin sekoittamiseen, jossa puoliväli on tasaisen harmaa. [Lähivärit](https://gradiently.design/fi/guide/analogous-colors) selittää periaatteen ja [väriympyrä](https://gradiently.design/fi/guide/color-wheel) näyttää kunkin sävyn sijainnin.

- Keskiyö: #0f0a2e
- Syvä indigo: #1e1b4b
- Kuninkaansininen: #1d4ed8
- Sininen: #3b82f6
- Indigo: #4f46e5
- Violetti: #7c3aed
- Laventeli: #a78bfa
- Sinilila usva: #c7d2fe

Sinivioletti väriperhe. Valitse kolme tai neljä vierekkäistä värinäytettä, niin liukuväri pysyy eloisana koko matkan.

## Tummat sinivioletit liukuvärit: yö ja syvyys

Aloita tummasta, niin liukuväri näyttää heti vähemmän tavanomaiselta. Keskiyön pohja indigon ja violetin valolla tuntuu yötaivaalta, konserttisalilta tai laadukkaalta sovellukselta. Nämä viisi kantavat vaaleaa tekstiä kauniisti.

- Keskiyön indigo: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Violetti kuunnousu: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Laivastonsinisestä luumuun: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Horisontin hohde: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Syvä virta: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Tummat sinivioletit liukuvärit. Raidoittuminen näkyy juuri näissä eniten, joten lisää rae ennen vientiä.

## Pehmeät sinivioletit liukuvärit: sinilila ja laventeli

Vaalenna väriperhettä, niin se muuttuu rauhalliseksi, unenomaiseksi ja hieman nostalgiseksi. Nämä sopivat hyvinvointiin, uneen, paperituotteisiin ja lempeään tunnelmaan. Pidä muste tummana, sillä valkoinen katoaa useimmilla näistä. Lisää löydät oppaasta [pastelliliukuvärit](https://gradiently.design/fi/guide/pastel-gradients).

- Sinilila utu: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Aamulaventeli: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Syreenipilvi: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Ruiskaunokkipelto: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Paperista violettiin: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Pehmeät sinililan ja laventelin liu’ut. Syvän indigoinen teksti erottuu jokaisella.

## Sähköiset sinivioletit liukuvärit

Nosta kylläisyyttä, niin pari muuttuu äänekkääksi, synteettiseksi ja hyvin digitaaliseksi. Nämä sopivat pelaamiseen, musiikkiin, teknologiajulkistuksiin ja kaikkeen yölliseen. Käytä niitä kaistoina tai hohteina koko julisteen sijaan. Yhdistä lähes mustaan, jotta niillä on pohja, jota vasten hehkua. [Neonliukuvärit](https://gradiently.design/fi/guide/neon-gradients) kertoo koko tekniikan.

- Sähkövioletti: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Taivaasta orkideaan: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Indigopulssi: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Ultraviolettipyörre: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Mustasta ultraviolettiin: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Kylläiset sinivioletit liukuvärit. Ensimmäinen on klassikko, muut sen yllättävämpiä versioita.

## Sinivioletit liukuvärit kolmannella värillä

Nopein tapa tehdä sinivioletista liukuväristä oma on yksi ylimääräinen väri säästeliäästi käytettynä. Pinkki vie kohti iltahämärää, sinivihreä revontulia, kulta luksusta ja persikka pehmeää auringonnousua.

- Iltahämärä pinkillä: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Revontulten sinivihreä: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo kullalla: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Laventeliauringonnousu: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Sininen, violetti, karmiini: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Yhteensä kaksikymmentä koodia. Pinkki, sinivihreä ja karmiini ovat sinisen tai violetin vieressä väriympyrässä. Kulta pysyy pienenä valona ja persikka vaaleana, joten mikään liuku ei kulje harmaan kautta.

## Milloin sinivioletti liukuväri samenee

Sinisestä violettiin on turvallinen liuku. Kaksi sukulaisyhdistelmää eivät ole. Syaani pinkkiin kulkee pitkän matkan väriympyrässä, ja himmeän harmahtava sininen himmeään violettiin tuottaa elottoman keskikohdan. Korjaus on sama: interpoloi OKLCH:ssa, joka pitää kirkkauden ja kylläisyyden tasaisina liu’un läpi. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) ja [liukuvärien interpolointi](https://gradiently.design/fi/guide/gradient-interpolation) kertovat lisää.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

`in oklch` muuttaa selaimen tapaa sekoittaa väripisteet. Vanhemmat selaimet ohittavat koko määrittelyn, joten säilytä taustaväri varavaihtoehtona.

## Näin teet sinivioletista liukuväristä omannäköisen

Violetista siniseen kulkeva diagonaali on niin tuttu, että se tulkitaan oletusvalinnaksi jo ennen sen päälle kirjoitettua tekstiä. Et tarvitse eksoottisia värejä välttääksesi tämän. Pienet harkitut päätökset riittävät ja vahvistavat toisiaan.

- **Valitse ensin pohja.** Keskiyön tai paperin sävy määrittää tunnelmaa enemmän kuin sininen tai violetti ja erottaa sinut heti kirkkaasta oletusilmeestä.
- **Siirrä valo pois diagonaalilta.** Aseta kirkkain violetti yhteen kulmaan säteittäisellä liukuvärillä sen sijaan, että se kulkisi reunasta reunaan 135 asteen kulmassa.
- **Käytä epätasaisia väripisteitä.** Anna indigon hallita 60 prosenttia pinnasta ja violetin vain loppuosaa. Tasaiset kolmannekset näyttävät koneen tekemiltä.
- **Lisää yksi korostus yhteen paikkaan.** Pinkin, sinivihreän tai kullan suikale, kuten yllä, muistetaan perusvärejä paremmin.
- **Viimeistele rakeella.** Hieno kohinakerros peittää raidoittumisen ja muuttaa näyttöliu’un pinnaksi. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) antaa koodin.
- **Renderöi jokainen koko erikseen.** Valon pitää sijoittua järkevästi tarinaan ja banneriin eikä siihen, mihin rajaus sattuu jättämään sen.

Tunnelmanimetkin auttavat. ”Keskiyön indigo kultareunalla” on päätös, jonka voit toistaa koko vuoden postauksissa. ”Sinivioletti liukuväri” ei ole.

## Teksti sinivioletilla liukuvärillä

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | Valkoinen | 6,3:1 | Hyvä |
| Violetti `#7c3aed` | Valkoinen | 5,7:1 | Hyvä |
| Sininen `#3b82f6` | Valkoinen | 3,7:1 | Vain suuret otsikot |
| Laventeli `#a78bfa` | Valkoinen | 2,7:1 | Ei riitä |
| Laventeli `#a78bfa` | Syvä indigo `#1e1b4b` | 5,9:1 | Hyvä |
| Sinilila usva `#c7d2fe` | Syvä indigo `#1e1b4b` | 10,7:1 | Erinomainen |

WCAG-kontrastisuhteet. Keskisininen on vaaleampi kuin näyttää, mikä yllättää monen sinivioletin suunnitelman sinisessä päässä.

LinkedIn-neliöpostaus kertoo versiosta 3 valkoisella tekstillä tumman indigon ja violetin liukuvärillä

LinkedIn-postaus tummalla indigopohjalla. Vaalea teksti ja violetti hohde vain toisella puolella.

Pystytarina, jossa on tumman indigoinen teksti vaalealla sinililan ja laventelin liukuvärillä

Tarina pehmeällä sinililalla ja syvällä indigomusteella.

Kun sanat kulkevat saman liukuvärin tummasta päästä vaaleaan, yksi muste ei toimi kaikkialla. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) esittelee vaihtoehdot. Gradientlyssä Automaattinen muste hoitaa tämän rivikohtaisesti ja valitsee vaalean tai tumman tekstin Markin omasta paletista. Sinivioletti tausta ei siis niele otsikkoa.

## FAQ

### Mikä on hyvä sinivioletin liukuvärin koodi?

Varma vaihtoehto on `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. Jos haluat yllättävämmän ilmeen, aloita tummasta pohjasta: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Sopivatko sininen ja violetti yhteen liukuvärissä?

Kyllä. Ne ovat väriympyrän naapureita, joten jokainen väliaskel on puhdas kylläinen väri, kuten indigo.

### Miksi sinisestä pinkkiin kulkeva liukuväri on keskeltä harmaa?

Selain sekoittaa oletuksena sRGB:ssä, joka voi himmentää kaukana toisistaan olevien sävyjen liu’ut. Lisää kulman jälkeen `in oklch`, niin keskikohta säilyy kirkkaana.

### Mikä tekstiväri sopii sinivioletille liukuvärille?

Valkoinen erottuu hyvin indigolla ja violetilla. Keskisinisellä, laventelilla ja sinililalla syvä indigo, kuten `#1e1b4b`, on turvallisempi.

### Mikä väri on sinisen ja violetin välissä?

Indigo. Tavallinen designissa käytetty indigo on `#4f46e5`, ja tummemmat indigot ovat lähellä sävyä `#312e81`.