# Siniset liukuvärit: 20 palettia jäästä keskiyöhön

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

Sininen on suunnittelun turvallisin väri, ja juuri siksi niin monet siniset liukuvärit näyttävät samoilta. Tässä on kaksikymmentä, jotka eivät näytä, vaaleimmasta tummimpaan ryhmiteltyinä, koodeineen ja ajatuksineen.

## The short version

- Sininen liukuväri häivyttää sinisiä sävyjä, usein viereisen petrooli-, syaani- tai violetin kanssa, vaaleasta jäästä syvään laivastonsiniseen.
- Sinisen mielletään laajasti viestivän rauhaa, luotettavuutta ja teknologiaa, minkä vuoksi se on suosittu ja sekoittuu helposti kaikkien muiden siniseen.
- Sininen häivytyy puhtaasti kohti petrooliä, syaania, indigoa ja violettia, mutta muuttuu helposti harmaaksi, kun se häivytetään suoraan kohti oranssia tai keltaista.
- Valkoinen teksti toimii syvillä ja keskisävyisillä sinisillä kuten #1e3a8a ja #2563eb, mutta ei vaaleammilla sinisillä kuten #3b82f6 leipätekstinä.
- Sinisen liukuvärin kallistaminen kohti petrooliä tai violettia, syvemmälle tai vaaleammalle meneminen ja lämpimän korostuksen lisääminen ovat nopeimmat keinot päästä eroon yritysilmeestä.

**Sininen liukuväri** häivyttää sinisen sävyjä, usein viereisen petrooli-, syaani- tai violetin kanssa. Se voi tuntua kirkkaalta taivaalta, syvältä merenpinnalta, yön näytöltä tai pankin vuosikertomukselta sen mukaan, mitä sinisiä valitset ja miten käytät niitä. Alla on kaksikymmentä sinistä liukuvärimallia kopioitavalla CSS:llä, vaaleimmasta tummimpaan ryhmiteltyinä, sekä niillä toimivat tekstivärit ja keinot estää sinistä tuntumasta tylsältä.

## Vaaleansiniset liukuvärit: jää ja taivas

Vaaleansiniset liukuvärit tuntuvat avoimilta, puhtailta ja hiljaisilta. Ne sopivat terveydenhuoltoon, matkailuun, hyvinvointiin ja tuotesivuille, jotka tarvitsevat tilaa. Käytä niillä tummaa mustetta ja lisää häivähdys lämpöä tai liliaa, jotta ne eivät näytä kylmiltä ja kliinisiltä.

- 1. Jää: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Aamutaivas: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Alppiruusun usva: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Jäätikkö: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Pilven puna: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Viisi vaaleansinistä liukuväriä. Malleissa 2, 3 ja 5 lämpimät tai liilat päät estävät niitä tuntumasta steriileiltä.

## Meren ja petrooliset siniset liukuvärit

Sinisen kallistaminen kohti vihreää tuo siihen eloa. Merenväriset liukuvärit tuntuvat raikkailta ja luonnollisilta, ja ne väistävät puhtaan sinisen yritysmielleyhtymät. Ne sopivat matkailu-, ruoka-, kestävyys- ja ulkoilubrändeille.

- 6. Avovesi: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Syväsukellus: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Laguuni: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Satama: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Matalikko: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Sinisestä petroolin ja akvan kautta. Naapurisävyt pitävät jokaisen häivytyksen puhtaana.

## Kirkkaat ja sähkönsiniset liukuvärit

Kylläiset siniset ovat energisiä ja teknisiä. Ne sopivat lanseerauksiin, sovelluksiin, urheiluun ja tapahtumiin. Ne ovat myös verkon yleisimpiä sinisiä, joten ne hyötyvät eniten yllättävästä muodosta tai lämpimästä korostuksesta.

- 11. Koboltista syaaniin: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Ultramariinista violettiin: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Sininen hehku: `radial-gradient(circle at 30% 20%, #60a5fa 0%, #1d4ed8 45%, #0b1437 100%)`
- 14. Koboltti kultareunalla: `linear-gradient(135deg, #0047ab 0%, #2563eb 86%, #fbbf24 86%, #f59e0b 100%)`
- 15. Nouseva signaali: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Eloisat siniset. Mallissa 14 lämmin korostus säilyy terävänä reunana, joten sininen ja kulta eivät koskaan sekoitu harmaaksi.

## Tummansiniset ja keskiyön liukuvärit

Syvät laivastonsiniset ja keskiyön liukuvärit tuntuvat vakavilta, premium-tasoisilta ja rauhallisilta. Ne ovat erinomaisia pohjia valkoiselle tekstille ja kirkkaille korostuksille. Varo juovittumista, joka näkyy helposti hitaissa, tummissa sinisissä. Hieno rakeisuus korjaa sen. Katso [liukuvärin juovittuminen](https://gradiently.design/fi/guide/gradient-banding).

- 16. Keskiyö: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Liuskeen yö: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Horisontin hehku: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. Laivastonsinisestä indigoon: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Hämärä veden yllä: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Viisi tummansinistä. Viimeinen päättyy lämpimään korallin sävyyn, kuin merelle jäävä viimeinen valo.

## Mikä sininen liukuväri mihinkin tehtävään

Kaksikymmentä palettia on paljon valittavaa. Aloita tehtävästä, jonka suunnitelman pitää hoitaa, ja sanoista, jotka sen pitää kantaa, ja valitse sitten sopivasta ryhmästä.

| Tehtävä | Kokeile | Miksi |
| --- | --- | --- |
| Rauhallinen tuote- tai terveyssivu | 1, 3, 4 | Vaalea, avoin ja helppo tumman tekstin alla |
| Matkailu, ruoka, ulkoilu | 6, 8, 10 | Vihreään kallistuva sininen tuntuu luonnolliselta |
| Sovelluksen lanseeraus tai teknologiatapahtuma | 11, 13, 15 | Kylläinen ja valaistu, näyttää energialta |
| Premium tai rahoitus | 16, 17, 19 | Syvät pohjat tuntuvat vakavilta ja kantavat valkoista tekstiä |
| Jotain mieleenpainuvaa | 2, 14, 20 | Lämmin sävel tekee sinisestä omanlaisen |

Lähtökohta jokaiselle suunnitelmatyypille. Numerot viittaavat yllä oleviin paletteihin.

## Mitä sininen viestii ja tylsyysongelma

Suuressa osassa maailmaa sininen yhdistetään rauhaan, luotettavuuteen ja syvyyteen, osin taivaan ja veden vuoksi. Siksi se on niin yleinen pankeissa, vakuutuksissa, terveydenhuollossa ja teknologiassa. Siksi myös keskisininen liukuväri auttaa harvoin ketään tunnistamaan sinut: se näyttää alalta eikä yritykseltä. [Värien psykologia](https://gradiently.design/fi/guide/color-psychology) selittää, miksi konventio vaikuttaa kumpaankin suuntaan.

### Yrityssininen

- Yksi keskisininen vaaleampaan siniseen 135 asteen kulmassa
- Puhdas, täysin kylläinen perussininen
- Sileä ja tasainen, ei tekstuuria
- Sinistä kaikkialla, ei mitään lämmintä

### Erottuva sininen

- Kallistettu kohti petrooliä, indigoa tai violettia
- Hyvin syvä tai hyvin vaalea, ei keskisävy
- Rakeisuutta, kiiltoa tai pehmeä hehku
- Yksi lämmin korostus: koralli, kulta tai aprikoosi

Sininen häivytyy hyvin kohti naapureitaan: petrooliä, syaania, indigoa ja violettia. Se häivytyy huonosti kohti vastakohtiaan. Sininen suoraan oranssiin tai keltaiseen kulkee harmahtavan keskikohdan kautta, joten pidä lämpimät korostukset lyhyinä tai kuljeta ne violetin tai pinkin kautta. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) selittää syyn.

## Teksti sinisillä liukuväreillä

| Teksti taustalla | Kontrasti | Arvio |
| --- | --- | --- |
| Valkoinen värillä `#0b1437` | 18,0:1 | Erinomainen |
| Valkoinen värillä `#1e3a8a` | 10,4:1 | Erinomainen |
| Valkoinen värillä `#2563eb` | 5,2:1 | Käy leipätekstille |
| Valkoinen värillä `#3b82f6` | 3,7:1 | Vain suurelle tekstille |
| `#0b1a33` värillä `#60a5fa` | 6,8:1 | Tumma muste toimii tässä |
| `#0b1a33` värillä `#bae6fd` | 13,1:1 | Erinomainen |

WCAG-kontrastisuhteet laskettuina. Leipäteksti tarvitsee 4,5:1, suuri teksti 3:1.

Ansa on sinisen alueen keskikohta: kirkas ruiskaunokki kuten `#3b82f6` näyttää riittävän vahvalta valkoiselle tekstille, mutta jää alle 4,5:1:n. Tarkista liukuvärillä kontrasti siitä kohdasta, jossa sininen on vaaleimmillaan sanojesi takana. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) esittelee koko menetelmän.

Pystykuvan tilastojulkaisu, jossa 98 % on isolla tekstillä syvällä liukuvärillä

Syvä kenttä antaa yhden luvun hoitaa kaiken puhumisen.

Pystysuora tarina, jossa sanat Hengitä ulos rauhallisella liukuvärillä

Rauhallisempi tarina, jossa on runsaasti avointa tilaa.

```css
.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}
```

Paletti 20, Hämärä veden yllä, hero-taustana. Pidä otsikot ylemmässä, tummemmassa osassa.

Sinisen liukuvärin vieminen kuvana someen vaatii yhden lisävaiheen. Alustat pakkaavat lataukset uudelleen, ja hitaat, tummat siniset ovat ensimmäisiä värejä, jotka hajoavat näkyviksi raidoiksi. Vie alustan suositellussa koossa, lisää hieno rakeisuus ennen tallennusta ja käytä PNG:tä, kun alusta sen hyväksyy. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) näyttää, kuinka paljon rakeisuutta riittää.

Sinisen naapurina olevista violeteista lisää oppaassa [violetit liukuvärit](https://gradiently.design/fi/guide/purple-gradient) ja vihreämmistä vaihtoehdoista oppaassa [vihreät liukuvärit](https://gradiently.design/fi/guide/green-gradient).

## FAQ

### Mitkä värit sopivat sinisen kanssa liukuväriin?

Petrooli, syaani, indigo ja violetti häivytyvät puhtaasti sinisen kanssa. Lämpimät värit kuten koralli ja kulta toimivat hyvinä korostuksina, jos ne pidetään lyhyinä, koska sinisen häivyttäminen suoraan oranssiin tai keltaiseen muuttuu harmaaksi.

### Mikä on hyvä CSS-koodi siniselle liukuvärille?

Syvälle, rauhalliselle siniselle kokeile linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Jokaisen tämän sivun paletin voi kopioida CSS:nä.

### Onko valkoinen teksti luettavaa sinisellä liukuvärillä?

Syvillä ja keskitummilla sinisillä on. Vaaleammilla sinisillä kuten #3b82f6 valkoinen teksti jää alle leipätekstille suositellun 4,5:1-suhteen.

### Miten teen sinisestä liukuvärista vähemmän yritysmäisen?

Kallista se kohti petrooliä tai violettia, valitse hyvin syviä tai hyvin vaaleita sinisiä keskisinisen sijaan, lisää rakeisuutta ja käytä pientä lämmintä korostusta.