# Sinivihreän merkitys ja miksi brändit rakastavat sitä

[Canonical HTML page](https://gradiently.design/fi/guide/teal-color-meaning)

Sinivihreä tekee kahta työtä: rauhoittaa kuin sininen ja raikastaa kuin vihreä. Kaksoismerkitys ja ero tavalliseen siniseen houkuttelevat terveys-, raha- ja teknologiabrändejä.

## The short version

- Sinivihreän merkitys yhdistää sinisen rauhan, selkeyden ja luottamuksen vihreän uudistumiseen, terveyteen ja tasapainoon.
- Sinivihreän englanninkielinen nimi teal tulee tavista, pienestä sorsasta, jonka koiraalla on silmän ympärillä hohtavan vihreä laikku.
- CSS:n nimetty väri teal on #008080, keskisyvä sinivihreä, jossa on yhtä paljon vihreää ja sinistä eikä lainkaan punaista.
- Brändit valitsevat sinivihreän, koska se tuntuu sinisen tavoin luotettavalta mutta erottuu monista jo sinistä käyttävistä brändeistä.
- Oranssi ja koralli ovat sinivihreän luontaiset vastavärit. Siksi sinivihreän ja oranssin pari on yleinen elokuvissa ja suunnittelussa.

**Sinivihreän merkitys** on elävä rauhallisuus: se yhdistää sinisen luottamuksen, selkeyden ja levollisuuden vihreän uudistumiseen, terveyteen ja tasapainoon. Sinivihreä tuntuu raikkaalta mutta vakavalta, harkitulta mutta ei kylmältä. Se myös erottuu joukosta. Brändille, joka haluaa sinisen vakuuttavuuden näyttämättä jokaiselta pankilta ja ohjelmistoyritykseltä, sinivihreä on valmis vastaus. Siksi se näkyy niin usein terveydenhuollossa, rahoituksessa, hyvinvoinnissa ja teknologiassa.

## Mistä sinivihreän nimi tulee

Värin englanninkielinen nimi teal tulee tavista, pienestä puolisukeltajasorsasta, jonka koiraalla on leveä hohtavan vihreä juova silmästä taaksepäin. Sana tuli englannissa värinimeksi 1900-luvun alussa. Näytöllä sinivihreä tarkoittaa yhtä paljon vihreää ja sinistä valoa ilman punaista. CSS-avainsana `teal` on juuri tämä.

```css
:root {
  /* The CSS named colour */
  --teal: teal; /* #008080, rgb(0 128 128) */

  /* A practical brand scale */
  --teal-100: #ccfbf1;
  --teal-300: #5eead4;
  --teal-500: #14b8a6;
  --teal-700: #0f766e;
  --teal-900: #134e4a;
}
```

Avainsana `teal` ja viisiportainen asteikko, jonka voit liittää tyylitiedostoon. 700-porras toimii hyvin valkoisen tekstin taustana.

## Sinivihreän väripsykologia

Useimmat sinivihreän mielleyhtymät tulevat vedestä ja luonnosta: matalasta trooppisesta merestä, laguuneista, mineraalialtaista ja vanhan kuparin patinasta. Nämä kuvat saavat sen tuntumaan puhtaalta, viileältä, elvyttävältä ja hieman arvokkaalta. Kuten kaikki värimerkitykset, ne ovat opittuja mielleyhtymiä eivätkä sääntöjä. [Väripsykologia](https://gradiently.design/fi/guide/color-psychology) selittää, miksi asiayhteys muuttaa niitä.

| Siniseltä | Vihreältä | Sinivihreän oma |
| --- | --- | --- |
| Luottamus | Uudistuminen | Selkeys ja lämpö |
| Rauhallisuus | Terveys | Raikas mutta aikuinen |
| Osaaminen | Tasapaino | Ei yritysmäinen eikä maalaismainen |
| Syvyys | Kasvu | Moderni ja sukupuolineutraali |

Sinivihreä lainaa molemmilta lähtöväreiltään ja saa oman luonteensa.

## Sinivihreän sävyt ja niiden viestit

- Merivaahto: #ccfbf1
- Vedensinivihreä: #5eead4
- Kirkas sinivihreä: #14b8a6
- CSS-sinivihreä: #008080
- Syvä sinivihreä: #0f766e
- Tumma sinivihreä: #134e4a
- Syvänne: #042f2e
- Murrettu sinivihreä: #5f8f8a

Vaaleat sinivihreät tuntuvat ilmavilta ja kliinisiltä, tummat täyteläisiltä ja hiljaisilta, murrettu sinivihreä tuo mieleen sisustukset ja käsityöt.

- **Merivaahto ja vedensinivihreä:** raikkaus, kylpylä, kesä ja lähestyttävyys.
- **Kirkas sinivihreä:** energiaa ja optimismia teknisellä vivahteella, hyvä sovelluksiin ja koontinäkymiin.
- **Syvä ja tumma sinivihreä:** itsevarmuus, syvyys ja ylellisyys, vahva vaihtoehto laivastonsiniselle.
- **Murrettu sinivihreä:** rauhallisuus, vintage ja käsintehty tuntu, sopii kodintuotteisiin, keramiikkaan ja kahviloihin.

## Miksi brändit rakastavat sinivihreää

Sinivihreä ratkaisee yleisen brändäysongelman. Sininen on turvallinen valinta rahaan, terveyteen tai dataan liittyvissä asioissa, joten monet kilpailijat käyttävät sitä jo. Sinivihreä säilyttää suurimman osan sinisen uskottavuudesta ja lisää välittämisen ja raikkauden tuntua, juuri sellaista sävyä, jota klinikka, eläkesovellus tai hyvinvointipalvelu haluaa. Siinä ei myöskään ole pinkin ja joidenkin sinisten vahvaa sukupuolisidonnaisuutta.

Joihinkin tilanteisiin sinivihreä sopii heikommin. Jos koko tuoteryhmäsi käyttää jo sinivihreää, kuten jotkin hyvinvointi- ja hammashoitomarkkinat, se lakkaa erottumasta ja tarvitset toisen tunnusomaisen elementin. Hyvin kirkas sinivihreä voi myös tuntua nuorekkaalta ja tekniseltä, mikä voi riidellä perinteikkään asianajotoimiston tai hautaustoimiston kanssa. Näissä tapauksissa murrettu tai hyvin tumma sinivihreä säilyttää rauhan ilman startup-tuntua. [Brändivärien valinta](https://gradiently.design/fi/guide/how-to-choose-brand-colors) antaa kattavamman menetelmän.

Klinikan neliöjulkaisu rauhallisella sinivihreällä liukuvärillä, joka ilmoittaa saman päivän ajanvarauksesta

Sinivihreää klinikalle: rauhallinen, puhdas ja luotettava ilman sairaalansinisen kylmyyttä.

Rahoitussovelluksen neliöjulkaisu syvällä sinivihreällä taustalla tekstillä Säästösi yhdellä silmäyksellä

Syvä sinivihreä rahasovellukselle: uskottava kuin pankki, mutta lämpimämpi ja modernimpi.

## Miten rakennat brändin sinivihreän ympärille

1. **Päätä vaaleus tai syvyys** Vaaleat sinivihreät tuntuvat avoimilta ja ystävällisiltä, syvät vakiintuneilta. Valitse yksi pääsinivihreä ja kirjoita sen hex-koodi muistiin, jotta jokainen tiedosto käyttää täsmälleen samaa väriä.
2. **Anna sille tekstiväri** Tarkista, mikä muste erottuu pääsinivihreälläsi. Kirkkaat sinivihreät tarvitsevat lähes mustan tekstin, syvät toimivat valkoisella.
3. **Lisää lämmin tehoste** Yksi koralli, oranssi tai kulta pieninä annoksina estää sinivihreää palettia tuntumasta kliiniseltä. Säästä se painikkeisiin, hintoihin tai yhteen muotoon.
4. **Testaa painossa ajoissa** Näytöllä hyvin kirkkaat sinivihreät voivat painua selvästi sameampina. Pyydä vedos ennen pakkausten tai kylttien tilaamista. [RGB vai CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) selittää syyn.
5. **Vie väri taustoihin** Somejulkaisuissa ja dioissa brändi nähdään useimmin. Niissä toistuva sinivihreä tausta tekee tunnistettavuuden eteen enemmän kuin logo yksin.

## Sinivihreään sopivat värit

Sinivihreän vastaväri on oranssin ja korallin alueella, joten lämpimät tehosteet saavat sen hehkumaan. Sama vastakkaisuus selittää elokuvien tutun sinivihreän ja oranssin värimäärittelyn, jossa viileät varjot korostavat lämmintä ihoa. Rauhallisemmissa paleteissa yhdistä sinivihreä naapureihinsa, laivastonsiniseen ja salviaan, kuten artikkelissa [lähivärit](https://gradiently.design/fi/guide/analogous-colors).

- Sinivihreästä oranssiin: `linear-gradient(135deg, #134e4a 0%, #0f766e 50%, #f97316 100%)`
- Merivaahdosta syvään sinivihreään: `linear-gradient(160deg, #ccfbf1 0%, #5eead4 50%, #0f766e 100%)`
- Laguuni yöllä: `radial-gradient(circle at 70% 30%, #14b8a6 0%, #134e4a 50%, #042f2e 100%)`
- Sinivihreä ja koralli: `linear-gradient(135deg, #0f766e 0%, #fb7185 100%)`

Sinivihreä lämpimien vastaväriensä ja omien syvempien sävyjensä kanssa. Lisää artikkelissa [sinivihreät liukuvärit](https://gradiently.design/fi/guide/teal-gradient).

### Vältä

- Valkoinen teksti kirkkaalla sinivihreällä `#14b8a6`: noin 2,5:1
- Valkoinen teksti värillä `#0d9488`: noin 3,7:1, alle vaaditun 4,5:1:n
- Sinivihreä suoraan punaiseen, jolloin keskikohta samenee

### Tee näin

- Lähes musta teksti kirkkaalla sinivihreällä, noin 8:1
- Valkoinen teksti syvällä sinivihreällä `#0f766e`, noin 5,5:1
- Sekoita sinivihreä laivastonsinisen tai vihreän kautta, älä väriympyrän poikki

Tarkista omat parisi artikkelin [värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) menetelmällä. Katso [turkoosit liukuvärit](https://gradiently.design/fi/guide/turquoise-gradient), jos haluat saman perheen kirkkaamman, aurinkoisemman version. Kun haluat vain sinulle kuuluvan sinivihreän ilmeen, hae Gradientlyn Markkinoilta ”deep teal”. Jokaisella Markilla on kerrallaan yksi omistaja, ja se pitää tekstisi luettavana liikkuessaan.

## FAQ

### Mitä sinivihreä väri tarkoittaa?

Sinivihreä tarkoittaa sinisen rauhaa, selkeyttä ja luottamusta yhdistettynä vihreän uudistumiseen, terveyteen ja tasapainoon. Se tuntuu raikkaalta ja modernilta mutta yhä vakavalta.

### Mikä on sinivihreän hex-koodi?

CSS:n nimetty väri teal on #008080. Brändit käyttävät usein vaaleampia tai syvempiä versioita, kuten #14b8a6 tai #0f766e.

### Onko teal sininen vai vihreä?

Molempia. Teal on sinivihreä, joka syntyy näytöllä yhtä suuresta määrästä vihreää ja sinistä valoa ilman punaista.

### Mikä väri sopii parhaiten sinivihreään?

Oranssi ja koralli ovat sen vastavärit ja saavat sen hehkumaan. Laivastonsininen, salvia, kerma ja kulta antavat rauhallisempia, elegantimpia pareja.

### Mitä tumma sinivihreä symboloi?

Tumma sinivihreä viittaa syvyyteen, itsevarmuuteen ja hiljaiseen ylellisyyteen. Monet brändit käyttävät sitä lämpimämpänä ja erottuvampana vaihtoehtona laivastonsiniselle.