# Pinkki-sininen liukuväri: hattarasta neoniin

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

Pinkki ja sininen ovat liian kaukana toisistaan sekoittuakseen itsestään hyvin. Harkittu keskikohta luo hattarataivaan tai neonkyltin, huolimaton taas samean lilatahran.

## The short version

- Pinkki-sininen liukuväri yhdistää pinkkejä, kuten #f9a8d4 tai #ec4899, sinisiin, kuten #93c5fd tai #3b82f6. Keskellä on yleensä lila tai violetti.
- Pinkki ja sininen eivät ole suoria naapureita, joten suora sekoitus voi harmaantua keskeltä. Lila tai violetti väripiste korjaa sen.
- Vaaleat pinkki-siniset seokset tuntuvat hattaralta ja tarvitsevat tumman tekstivärin. Kylläinen pinkki ja syaani lähes mustalla tuntuvat neonilta.
- Kirkas pinkki tai keskisininen ei kanna pientä valkoista tekstiä hyvin. Käytä valkoista vain suurissa otsikoissa tai tummilla pohjilla.
- Pinkki ja sininen sopivat vauvajuhliin, makeiskauppoihin, sisällöntuottajille, pelaamiseen sekä vaporwaven ja Y2K:n kaltaisiin retroilmeisiin.

**Pinkki-sininen liukuväri** yhdistää pinkin, kuten `#f9a8d4` tai `#ec4899`, siniseen, kuten `#93c5fd` tai `#3b82f6`. Ne ovat väriympyrässä hieman liian kaukana sekoittuakseen oletuksena siististi. Parhaat versiot kulkevat siksi keskellä lilan tai violetin pisteen kautta. Vaaleana yhdistelmä on hattaraa, kylläisenä tummalla pohjalla neonia. Alla olevat koodit kattavat koko alueen sekä keskikohdan korjauksen ja toimivat tekstivärit.

## Miksi pinkki-sininen liukuväri harmaantuu keskeltä

Selaimet sekoittavat liukuvärit oletuksena sRGB-avaruudessa. Lämpimän pinkin ja viileän sinisen seos voi menettää kylläisyyttä ja näyttää hieman harmaalta tai pölyiseltä. Vaikutus ei ole yhtä voimakas kuin vastaväreissä, mutta näkyy etenkin pastelleissa. Korjaa se nimeämällä keskikohta itse: lisää lila tai talvionsininen piste, jotta seos pysyy kauttaaltaan kirkkaana.

- Kaksi pistettä, oletussekoitus: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Violetti siltaväri mukana: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

Samat pinkki ja sininen siltapisteellä ja ilman. Toinen säilyttää kylläisyyden keskellä. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää väritieteen.

CSS:ssä voit myös kirjoittaa `linear-gradient(90deg in oklch, #f472b6, #60a5fa)`, joka pitää vaaleuden ja kylläisyyden tasaisina seoksessa. Siltapiste toimii kuitenkin kaikkialla ja antaa sinun valita tarkan lilan sävyn.

## Hattaraliukuvärit: pastellipinkki ja sininen

Vaaleasta pinkistä vauvansiniseen liukuva väri tuntuu makealta, kevyeltä ja hieman nostalgiselta. Pidä välissä pehmeä lila tai kermanväri ja käytä sanoissa tummaa liuskeenharmaata valkoisen sijaan.

- Hattara: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Vauvanpeitto: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Sokeripilvi: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Persikkainen aamu: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Pastellipinkin ja sinisen seokset. Jokaisessa on lila, talvionsininen tai kermanvärinen vaihe, jotta keskikohta ei muutu pölyiseksi.

Lisää pehmeitä värejä tarjoavat [pastelliliukuvärit](https://gradiently.design/fi/guide/pastel-gradients) ja [pastelliväripaletit](https://gradiently.design/fi/guide/pastel-color-palettes).

> **Pastellipinkin ja sinisen painaminen** Hyvin vaaleat seokset voivat lähes kadota päällystämättömällä paperilla, ja kirkkaat näyttösiniset painuvat usein himmeämpinä. Syvennä kutsujen ja esitteiden väripisteitä hieman ja pyydä vedos. [Liukuvärit painossa](https://gradiently.design/fi/guide/print-gradients) kertoo yksityiskohdat.

## Taivas ja sorbetti: kirkkaampi pinkki ja sininen

Nosta kylläisyyttä hieman, ja pari muuttuu aurinkoiseksi ja leikkisäksi: kesätaivas päivän lopulla, sorbettikoju, allasjuhlien esite. Nämä tuntuvat yhä ystävällisiltä eivätkä äänekkäiltä.

- Iltataivas: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbetti: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Allasjuhlat: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Keskikylläiset pinkki-siniset liukuvärit. Sopivat kesäkampanjoihin ja sisällöntuottajien julkaisuihin.

## Neonpinkit ja siniset liukuvärit

Kuuma pinkki ja sähköinen syaani lähes mustalla ovat vaporwaven, synthwaven ja monen pelidesignin tunnusmerkkejä. Tumma pohja on välttämätön: juuri se saa värit hehkumaan. Pidä neon kaistoina, reunoina tai hehkuina ja jätä suurin osa kuvasta tummaksi. [Neonliukuvärit](https://gradiently.design/fi/guide/neon-gradients) ja [synthwave-värit](https://gradiently.design/fi/guide/synthwave-colors) käsittelevät tyyliä tarkemmin.

- Yöajo: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Neonkyltti: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Pinkki lamppu, syaani utu: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Pelihallin auringonnousu: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Neonpinkki ja sininen. Vaalea pinkki ja syaani toimivat myös erinomaisina tekstiväreinä tummilla alueilla.

## Tekstivärit pinkki-sinisillä liukuväreillä

Pastellipinkin ja sinisen liukuvärin molemmat päät ovat vaaleita, joten tumma liuskeenharmaa teksti toimii koko pinnalla. Tämä on yksi helpoimmista tekstin taustaväripareista. Kylläiset versiot ovat vaikeampia: kuuma pinkki ja keskisininen ovat kumpikin liian vaaleita pienelle valkoiselle tekstille. Alla olevat arvot käyttävät WCAG:n kontrastikaavaa.

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| Purukumi `#f9a8d4` | Liuskeenharmaa `#1e293b` | 8,1:1 | Erinomainen |
| Vauvansininen `#93c5fd` | Liuskeenharmaa `#1e293b` | 8,1:1 | Erinomainen |
| Karkkipinkki `#fbcfe8` | Valkoinen | 1,4:1 | Ei riitä |
| Kuuma pinkki `#ec4899` | Valkoinen | 3,5:1 | Vain suuret otsikot |
| Sininen `#3b82f6` | Valkoinen | 3,7:1 | Vain suuret otsikot |
| Yö `#0b0720` | Syaani `#67e8f9` | 13,6:1 | Erinomainen, neon tekstivärinä |

Liuskeenharmaa antaa saman kontrastin pastellin molemmissa päissä, joten yksi tekstiväri toimii koko hattaraseoksessa.

Vauvajuhlakutsu tummalla liuskeenharmaalla tekstillä pehmeällä pinkin, lilan ja vauvansinisen liukuvärillä

5×7 in kutsu hattarataustalla ja liuskeenharmaalla tekstillä.

Striimin vaakailmoitus vaalealla tekstillä tummalla neonpinkin ja syaanin valaisemalla taustalla

Striimi-ilmoitus neonpinkillä ja syaanilla lähes mustan päällä.

## Mihin pinkki-sininen liukuväri sopii

- **Vauvajuhlat ja sukupuolen paljastusjuhlat:** perinteisin käyttö, parhaiten vaaleimmissa pastelleissa.
- **Makeiskaupat, leipomot ja jäätelö:** sorbettisävyt näyttävät syötäviltä.
- **Sisällöntuottajat ja striimaajat:** neonversiot tummilla pohjilla sopivat peleihin ja myöhäisillan sisältöön.
- **Retroestetiikka:** vaporwave, synthwave ja [Y2K-estetiikka](https://gradiently.design/fi/guide/y2k-aesthetic) nojaavat kaikki tähän pariin.
- **Pride:** vaaleansininen, pinkki ja valkoinen ovat translipun värit, joten pari näkyy paljon Pride-kuukauden designissa.

## Pinkki-sininen liukuväri CSS:llä

```css
.cotton-candy {
  background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%);
  color: #1e293b;
}

.neon {
  background-color: #0b0720;
  background-image:
    radial-gradient(circle at 15% 85%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, #06b6d4 0%, transparent 40%);
  color: #fce7f3;
}
```

Pastelliosio liuskeenharmaalla tekstillä ja tumma neonosio kahdella värivalolla.

Neonkuviota, kahta säteittäistä valoa tummalla pohjalla, on helppo muokata: siirrä valoja, muuta niiden kokoa ja lisää kohtaamispaikkaan kolmas violettina. Pidä valot pieninä. Kun ne peittävät yli puolet kuvasta, tumma pohja katoaa ja hehku sen mukana. Gradientlyn Mark menee pidemmälle: sen valo liikkuu hitaasti ja teksti mukautuu alla olevaan seoksen osaan. Yksi design viedään kuvajulkaisuksi tai Prolla MP4- tai GIF-silmukaksi.

## FAQ

### Mikä on hyvä pinkki-sinisen liukuvärin koodi?

Hattaraan kokeile `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Neoniin `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Miksi pinkki-sininen liukuvärini näyttää harmaalta keskeltä?

Lämpimän pinkin ja viileän sinisen suora sRGB-seos menettää kylläisyyttä puolivälissä. Lisää keskelle lila tai violetti piste tai kirjoita kulman jälkeen `in oklch`.

### Mikä tekstiväri sopii pastellipinkin ja sinisen liukuvärille?

Tumma liuskeenharmaa, kuten `#1e293b`, erottuu molemmissa päissä noin 8:1-kontrastilla. Valkoinen ei erotu pastellipinkillä ja sinisellä.

### Mikä on hattaraliukuväri?

Pinkin ja vauvansinisen pastelliseos, jossa on yleensä lila välivaihe. Nimi tulee makeisesta.

### Miten teen neonpinkin ja sinisen liukuvärin?

Käytä kylläistä pinkkiä ja syaania lähes mustalla pohjalla hehkuina tai kaistoina koko pinnan täyttämisen sijaan. Tumma pohja saa värit näyttämään valaistuilta.