# Laivastonsininen liukuväri: tummat, luotettavat värikoodit

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

Laivastonsininen on univormujen, pankkien ja hyvien pukujen väri. Juuri siksi se voi näyttää jokaiselta muulta pankilta. Nämä koodit säilyttävät luottamuksen ja poistavat tylsyyden.

## The short version

- Laivastonsininen liukuväri yhdistää hyvin tummia sinisiä yleensä lähes mustasta laivastonsinisestä kirkkaampaan kuninkaansiniseen tai indigoon.
- Laivastonsininen tuntuu vakavalta, luotettavalta ja vakiintuneelta, minkä vuoksi rahoitus, juridiikka ja koulutus käyttävät sitä usein.
- Lisää valonlähde, taivuta sävyä hieman violettiin tai petrooliin tai yhdistä lämmin metallikorostus kuten kulta tai kupari, jotta sininen ei näytä yleiseltä.
- Valkoinen ja vaaleanharmaa teksti erottuvat helposti laivastonsinisellä. Myös kultainen teksti toimii riittävän vaaleana.
- Tummat laivastonsiniset liukuvärit raidoittuvat helposti pakatuissa kuvissa, joten lisää kevyttä rakeisuutta ja vie täydessä koossa.

**Laivastonsininen liukuväri** yhdistää syviä sinisiä, tavallisesti lähes mustasta `#0b1630`-sävystä kirkkaampaan kuninkaansiniseen tai indigoon. Se tuntuu rauhalliselta, vakavalta ja luotettavalta sekä tekee valkoisesta tekstistä terävää. Laivastonsinistä kuitenkin näkee kaikkialla rahoituksessa, juridiikassa ja yritysgrafiikassa. Siksi tasainen sininen häivytys näyttää usein oletusvalinnalta. Alla olevat koodit antavat sille valoa, lämpötilaa ja korostuksen, jotta se säilyttää luottamuksen ja saa persoonallisuutta.

## Klassiset laivastonsinisen liukuvärin koodit

Nämä ovat luotettavia vaihtoehtoja lähellä puhdasta laivastonsinistä. Muutosta on juuri riittävästi erottamaan ne tasaisesta täytöstä. Ne sopivat esitysdioihin, vuosikertomuksiin, sähköpostiotsakkeisiin ja verkkosivujen alatunnisteisiin.

- Klassinen laivastonsininen: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Musteen laivastonsininen: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Univormu: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Liituraita: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Valokaista: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Viisi lähes laivastonsinistä häivytystä. Tarkoituksella hienovaraisia: ne kantavat tekstin, logot ja kaaviot kilpailematta.

| Nimi | Heksakoodi | Käyttö |
| --- | --- | --- |
| Navy (CSS:n nimetty väri) | `#000080` | Vain vertailuun, näyttää näytöllä kovalta |
| Keskiyö | `#0b1630` | Tummin väripiste, lähes musta |
| Syvä laivastonsininen | `#172554` | Pohja valkoiselle tekstille |
| Kuninkaallinen laivastonsininen | `#1e3a8a` | Klassisen häivytyksen vaalea pää |
| Kuninkaansininen | `#1e40af` | Valo tai korostus |

Hyvin yhdistyvät laivastonsiniset heksakoodit. CSS:n nimetty navy on hyvin kylläinen. Pehmeämmät versiot näyttävät hienostuneemmilta.

## Laivastonsiniset liukuvärit värikorostuksella

Käännä laivastonsinistä muutama aste violettiin, niin se muuttuu illaksi ja ylellisyydeksi. Petrooliin päin se muuttuu mereksi ja teknologiaksi. Kumpikin siirto tuntuu tietoiselta valinnalta. Kirkkaamman pään pitää yhä olla riittävän syvä valkoiselle tekstille suurimmalla osalla pintaa.

- Laivastonsinisestä indigoon: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Kuninkaallinen violetti: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Laivastonsininen ja petrooli: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Sähkönsinisestä laivastonsiniseen: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Laivastonsininen toisella vivahteella. Indigo ja violetti tuntuvat laadukkailta, petrooli raikkaalta ja kirkkaansininen nurkka tekniseltä.

## Laivastonsininen ja kulta, kupari tai hopea

Harva pohja sopii metallikorostukseen laivastonsinistä paremmin. Kulta sillä on perinteinen ja juhlava, kupari lämpimämpi ja modernimpi, hopea viileä ja rauhallinen. Pidä metalli pienenä, nurkan valona tai ohuena viivana, jotta sininen tekee yhä päätyön. [Kultaiset liukuvärit](https://gradiently.design/fi/guide/gold-gradient-design) ja [hopeiset liukuvärit](https://gradiently.design/fi/guide/silver-gradient) näyttävät metallipuolen tarkemmin.

- Kultavalo laivastonsinisellä: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Kuparinurkka: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Hopeareuna: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Metalli pienenä yhdessä paikassa. Katse menee sinne ensin ja sitten sanoihisi.

- Keskiyö: #0b1630
- Syvä laivastonsininen: #172554
- Kuninkaallinen laivastonsininen: #1e3a8a
- Vanha kulta: #d4a64a
- Norsunluu: #f8f6f1
- Liuskekivi: #94a3b8

Laivastonsinisen ja kullan järjestelmä: kolme sinistä, kultakorostus, norsunluu tekstiin ja liuskekivi toissijaisiin tarkennuksiin.

## Keskiyönsiniset liukuvärit yöhön ja ylellisyyteen

Säteittäiset häivytykset tuntuvat auringonlaskun jälkeiseltä taivaalta tai hämärältä huoneelta. Ne sopivat gaalakutsuihin, hotellibaareihin, koruihin, kelloihin ja myöhäisillan radioon. Tähtisen version löydät artikkelista [yötaivaan liukuvärit](https://gradiently.design/fi/guide/night-sky-gradient).

- Auringonlaskun jälkeen: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Samettihuone: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Kaupungin hehku: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Laivastonsininen yhdellä pehmeällä valolla. Tummin väripiste on lähellä mustaa, mutta sininen estää sitä tuntumasta tyhjältä.

## Missä laivastonsiniset liukuvärit ansaitsevat paikkansa

Laivastonsininen on parhaimmillaan, kun sanat merkitsevät kuvaa enemmän. Se antaa tekstille rauhallisen, vahvakontrastisen pohjan. Tässä käyttöideoita lainattavaksi:

- **Diat 1920×1080:** Klassinen laivastonsininen osiojakajiin ja yksi kultaviiva kunkin otsikon alle.
- **LinkedIn-profiilibanneri 1584×396:** Laivastonsininen ja petrooli vasemmalta oikealle, tummin kohta kuvasi takana.
- **Sähköpostiotsake 1200×600:** Musteen laivastonsininen ja norsunluuotsikko, jolloin se sopii jo valmiiksi tumman tilan sähköpostiin.
- **Valmistujais- ja palkintokutsut:** Kultavalo laivastonsinisellä painettuna A5-esitteeksi.
- **Kaaviot ja koontinäkymät:** syvä laivastonsininen pohja tekee kirkkaista dataväreistä helposti erotettavia.

## Miten laivastonsinisestä tulee vähemmän yritysmäinen

### Näyttää jokaiselta pankilta

- Tasainen `#000080` ja valkoinen logo
- Suora häivytys ylhäältä alas
- Kirkkaat keskisiniset painikkeet
- Kuvapankkikuva kädenpuristuksesta

### Näyttää harkitulta

- Pehmennetty laivastonsininen violettiin tai petrooliin päin
- Valo yhdestä paikasta
- Yksi lämmin korostus: kulta, kupari tai koralli
- Hieno rakeisuus painetun pinnan tuntua varten

Mikään näistä muutoksista ei vähennä luottamusta. Ne tekevät brändistä tunnistettavan yhdellä silmäyksellä, mikä merkitsee kilpailijoiden käyttäessä samaa sinistä. [Erottuvat brändielementit](https://gradiently.design/fi/guide/distinctive-brand-assets) selittää, miksi tunnistettavuus syntyy omasta asiasta, jota muut eivät käytä. Hyödyllinen testi: peitä logo ja kysy, voisiko joku silti tunnistaa työn omaksesi. Tasaisella laivastonsinisellä häivytyksellä vastaus on lähes aina ei.

Taloussuunnitteluyrityksen LinkedIn-linkkikuva valkoisella tekstillä yhdestä nurkasta valaistulla laivastonsinisellä liukuvärillä

LinkedIn-linkkikuva syvällä laivastonsinisellä ja yhdellä lämpimällä valolla. Vakava mutta tunnistettava.

Sama taloussuunnittelun työ pystyjulkaisuna laivastonsinisellä liukuvärillä

Sama suunnitelma pystyjulkaisuna ja valo korkeampaan kehykseen siirrettynä.

## Laivastonsinisen liukuvärin CSS ilman raidoittumista

Tummissa, hienovaraisissa häivytyksissä raidoittuminen näkyy eniten: tasaisen liu’un sijaan näkyy askelia etenkin alustan pakattua kuvan uudelleen. Verkossa muutama lisäväripiste ja rakeisuuskerros peittävät sen. [Liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää syyn.

```css
.hero-navy {
  position: relative;
  background-color: #0b1630; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, rgb(212 166 74 / 0.35) 0%, transparent 35%),
    linear-gradient(160deg, #1e3a8a 0%, #172554 45%, #0f1d3a 75%, #0b1630 100%);
  color: #f8f6f1;
}

/* fine grain on top to break up banding */
.hero-navy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("/grain.png"); /* a small tiling noise image */
}
```

Lisäpisteet keskellä tasoittavat häivytystä, hento kultavalo lämmittää ja rakeisuuskerros peittää jäljelle jäävät askeleet.

Teksti on laivastonsinisellä helppo osa. Valkoinen ja norsunluu läpäisevät kontrastin hyvin kaikilla yllä olevilla sinisillä. Vanha kulta `#d4a64a` antaa keskiyöllä noin 8:1 ja toimii otsikoissa. Tarkkaile kirkasta sinistä: keskisininen kuten `#3b82f6` valkoisen tekstin takana laskee noin suhteeseen 3,7:1. Gradientlyn Automaattinen muste hoitaa tämän riveittäin valitsemalla tekstin Markin omasta paletista. [Designer](https://gradiently.design/fi/guide/what-is-gradiently) voi sommitella koko laivastonsinisen kampanjan brändipakettisi äänellä.

## FAQ

### Mikä on laivastonsinisen heksakoodi?

CSS:n nimetty väri `navy` on `#000080`. Pehmeämmät versiot kuten `#172554` tai `#0b1630` näyttävät yleensä näytöillä paremmilta.

### Mitkä värit sopivat laivastonsiniseen liukuväriin?

Kulta, kupari, norsunluu, liuskekivi ja koralli. Yksi lämmin korostus estää sinistä näyttämästä kylmältä tai yritysmäiseltä.

### Sopiiko laivastonsininen yritysbrändiin?

Se tuntuu vakavalta ja luotettavalta, joten se sopii rahoitukseen, juridiikkaan ja koulutukseen. Koska monet kilpailijat käyttävät sitä, lisää valo tai korostus tunnistettavuuden säilyttämiseksi.

### Miksi laivastonsinisessä liukuvärissäni on raitoja?

Se on raidoittumista, joka on yleistä tummissa, hienovaraisissa häivytyksissä. Lisää väripisteitä ja kevyt rakeisuuskerros sekä vältä voimakasta JPEG-pakkausta.

### Voinko käyttää kultaista tekstiä laivastonsinisellä?

Kyllä, jos kulta on riittävän vaalea. `#d4a64a` värillä `#0b1630` antaa noin 8:1 ja läpäisee sekä otsikoiden että leipätekstin vaatimukset.