# Pinkki-violetti liukuväri: karkista iltahämärään

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

Pinkki ja violetti voivat olla sokerisia, loistokkaita tai hiljaisen tunnelmallisia vaaleuden ja kylläisyyden mukaan. Näillä koodeilla ja valintaohjeilla löydät oman kohtasi asteikolla.

## The short version

- Pinkki-violetti liukuväri sekoittaa vierekkäisiä sävyjä, kuten pinkkiä #ec4899, magentaa #c026d3 ja violettia #9333ea. Siirtymä pysyy kirkkaana ilman siltaväriä.
- Sama pari tuntuu karkilta vaaleana, loistokkaalta kylläisenä ja iltahämärältä tummana.
- Valkoinen teksti ei erotu kirkkaalla pinkillä tai vaalealla lilalla. Käytä niillä syvää luumua ja säästä valkoinen magentalle, violetille ja tummille pohjille.
- Pieni määrä oranssia, sinistä tai kultaa tekee pinkki-violetista liukuväristä paljon tavallista kahden värin seosta odottamattomamman.
- Pinkki ja violetti sopivat kauneuteen, yöelämään, musiikkiin, juhliin ja sisällöntuottajien brändeihin. Tumma pohja estää lapsellisen vaikutelman.

**Pinkki-violetti liukuväri** yhdistää kaksi väriympyrän naapuria, pinkin kuten `#ec4899` ja violetin kuten `#9333ea`, magentan ja orkidean kulkiessa välissä. Vierekkäisten sävyjen ansiosta seos pysyy kauttaaltaan eloisana. Vaaleus muuttaa kaiken: vaaleana saat hattaraa, kylläisyyttä nostamalla loistoa, tummentamalla iltahämärää. Alla olevat koodit kulkevat vaaleasta tummaan, jotta voit valita ensin tunnelman ja sitten hex-arvot.

## Pinkki-violetin liukuvärin tunnelmat yhdellä silmäyksellä

| Tunnelma | Tavalliset väripisteet | Vaikutelma | Sopii |
| --- | --- | --- | --- |
| Karkki | `#fbcfe8` → `#e9d5ff` | Makea, pehmeä, nuori | Leipomot, vauvajuhlat, paperituotteet |
| Orkidea | `#f0abfc` → `#c084fc` | Unenomainen, romanttinen | Kauneus, häät, hyvinvointi |
| Magenta | `#ec4899` → `#9333ea` | Rohkea, loistokas | Yöelämä, musiikki, sisällöntuottajat |
| Iltahämärä | `#2e0a2f` → `#9d174d` | Tunnelmallinen, aikuinen | Hajuvedet, cocktailit, iltatapahtumat |

Neljä tunnelmaa yhdestä parista. Jokainen alempi rivi on edellistä tummempi tai kylläisempi.

- Karkkipinkki: #fbcfe8
- Purukumi: #f9a8d4
- Kuuma pinkki: #ec4899
- Magenta: #c026d3
- Orkideanvioletti: #a855f7
- Violetti: #9333ea
- Lila: #e9d5ff
- Luumunvärinen teksti: #2e0a2f

Toimiva paletti tälle parille, mukana tekstin tarvitsemat vaaleat ja tummat päät.

## Karkkipinkit ja violetit liukuvärit

Vaalea pinkki ja lila yhdessä ovat niin pehmeitä kuin väri voi olla. Ne sopivat makeaan ja lempeään, mutta voivat muuttua nopeasti lapsellisiksi. Korjauksena on hieman lämmin pohja, persikka tai kermanväri toisessa päässä sekä vahva tumma typografia.

- Hattara: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Mansikkamaito: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Persikka, pinkki, lila: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Karkkiseokset syvän luumunvärisellä tekstillä. Kolmannen persikka estää sokerisen vaikutelman.

Lisää pehmeyttä tarjoaa [pastelliliukuvärien](https://gradiently.design/fi/guide/pastel-gradients) koko perhe. [Laventeliliukuvärit](https://gradiently.design/fi/guide/lavender-gradient) kallistuu enemmän violettiin.

## Orkidea- ja magentaliukuvärit

Nosta kylläisyyttä, niin pari muuttuu loistokkaaksi. Tämä on kynsilakan, festivaalirannekkeiden ja albuminkansien aluetta. Käytä loivaa kulmaa tai säteittäistä hehkua tavallisen vinoliukuvärin sijaan ja jätä sanoille rauhallisempi alue.

- Kuumasta pinkistä violettiin: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Orkidean kukinta: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Marjainen loisto: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Irisoiva pyörre: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Kylläiset pinkki-violetit liukuvärit. Kartiomainen näyttää hohteelta lähellä [holografisia liukuvärejä](https://gradiently.design/fi/guide/holographic-gradients).

## Iltahämärä: tummat pinkki-violetit liukuvärit

Tummenna pari, niin se aikuistuu heti. Luumunmusta pohja vadelman ja violetin valolla muistuttaa taivasta kaksikymmentä minuuttia auringonlaskun jälkeen tai hämärää cocktail-baaria. Nämä ovat sarjan monipuolisimpia ja kantavat valkoista tai vaaleanpunaista tekstiä helposti.

- Kaksikymmentä yli auringonlaskun: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Vadelmahehku: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- Luumusta ruusuun: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Violetti näyttämövalo: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Tummat pinkki-violetit liukuvärit. Lisää hienoa rakeisuutta, sillä tummat seokset raidoittuvat ensimmäisinä.

Nämä ovat lähellä [auringonlaskuliukuvärejä](https://gradiently.design/fi/guide/sunset-gradient) ja [galaksiliukuvärejä](https://gradiently.design/fi/guide/galaxy-gradient). Voit lainata kummastakin vapaasti.

## Kolmas väri ilman sameutta

Tavallinen kuumasta pinkistä violettiin kulkeva vinoliukuväri on kaikkialla. Yksi lisäväri tekee siitä nopeimmin omasi. Valitse pinkin tai violetin naapuri: oranssi ja koralli ovat pinkin vieressä, sininen ja indigo violetin. Vihreä on magentan vastapäätä, joten pinkistä vihreään kulkeva seos harmaantuu keskeltä.

- Violetti, pinkki, mandariini: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Sininen hetki: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta ja kulta: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Kolme pinkki-violettia liukuväriä viereisen kolmannen värin kanssa. Jokainen vaihe pysyy kylläisenä.

## Näin valitset pinkki-violetin liukuvärin brändillesi

1. **Päätä ensin vaalea vai tumma** Vaaleus luo suurimman osan tunnelmasta. Vaalea seos viestii lempeyttä, luumupohja iltaa. Valitse yksi ja säilytä se joka julkaisussa.
2. **Valitse johtava väri** Pinkin hallinta tuntuu lämpimämmältä ja leikkisämmältä. Violetin hallinta viileämmältä ja salaperäisemmältä. Anna johtavalle noin kaksi kolmasosaa pinnasta.
3. **Suunnittele sanojen paikka** Sijoita otsikko tummemman ja rauhallisemman pään päälle ja kirkkain pinkki kulmaan. Silloin et kilpaile taustan kanssa huomiosta.
4. **Testaa joka koossa** Neliöjulkaisussa toimiva seos voi tarinassa siirtää kirkkaimman alueen tekstin taakse. Tarkista julkaisu, tarina ja banneri ennen sitoutumista.

Jos julkaiset usein, kirjoita tulos lyhyeksi reseptiksi: pohja, pääväri, korostus ja valon paikka. Yksi rivi pitää koko syötteen yhtenäisenä, mikä merkitsee enemmän kuin yksittäinen kaunis liukuväri. [Brändin yhtenäisyys](https://gradiently.design/fi/guide/brand-consistency) kertoo lisää.

## Tekstivärit pinkillä ja violetilla

Kirkas pinkki on vaaleampi kuin näyttää, joten sen valkoiset otsikot erottuvat odotettua heikommin. Violetti ja magenta kantavat valkoista hyvin. Vaaleassa päässä syvä luumu pitää designin samassa väriperheessä. Suhteet ovat WCAG-kontrasteja: tavoittele pienessä tekstissä 4,5:1 ja suurissa otsikoissa vähintään 3:1. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää rajat.

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| Kuuma pinkki `#ec4899` | Valkoinen | 3,5:1 | Vain suuret otsikot |
| Syvä pinkki `#db2777` | Valkoinen | 4,6:1 | Hyvä |
| Magenta `#c026d3` | Valkoinen | 4,7:1 | Hyvä |
| Violetti `#9333ea` | Valkoinen | 5,4:1 | Hyvä |
| Purukumi `#f9a8d4` | Luumuteksti `#3b0a3f` | 8,9:1 | Erinomainen |
| Luumuteksti `#2e0a2f` | Purukumi `#f9a8d4` | 9,6:1 | Erinomainen, pinkki tekstivärinä |

Mittaa jokaisen tekstirivin takaa liukuvärin vaaleimmasta kohdasta.

Kynsisalongin pystyjulkaisu valkoisella tekstillä kylläisellä pinkin ja violetin liukuvärillä

Kynsisalongin julkaisu kylläisellä orkidealla, valkoinen teksti violetilla puolella.

Klubi-illan pystytarina vaaleanpunaisella tekstillä tummalla luumuliukuvärillä, alhaalla vadelmavalo

Klubi-illan tarina hämärällä luumupohjalla, vadelmavalo kuvan alaosassa.

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

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Hämärä osio vadelmahehkulla sekä pinkistä violettiin kulkeva otsikko, jossa tausta rajautuu tekstiin.

Liukuväriteksti on näyttävää, mutta käytä sitä vain lyhyissä otsikkosanoissa, älä leipätekstissä. [CSS-liukuväriteksti](https://gradiently.design/fi/guide/css-gradient-text) käsittelee vararatkaisut. Jos haluat pinkki-violetin ilmeen, jota kukaan muu ei voi julkaista, Gradientlyn Markkinoilla voit etsiä Markeja värisanoilla, kuten ”orchid”. Jokainen Mark on ainutlaatuinen. Lunastamisen jälkeen vain sinä voit viedä sillä tehtyjä designeja, ja se pitää tekstin itsestään luettavana seoksen molemmissa päissä.

## FAQ

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

Klassikko on `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. Tunnelmallisempaan kokeile `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Sopivatko pinkki ja violetti yhteen?

Kyllä. Ne ovat väriympyrän naapureita, magenta välissään, joten ne sekoittuvat siististi kaikissa vaaleusasteissa.

### Mikä tekstiväri sopii pinkki-violetille liukuvärille?

Valkoinen erottuu magentalla, violetilla ja tummalla luumulla. Kuumalla pinkillä käytä valkoista vain suurissa otsikoissa. Vaalealla pinkillä ja lilalla käytä syvää luumua, kuten `#3b0a3f`.

### Miten teen pinkki-violetista liukuväristä vähemmän lapsellisen?

Tummenna tai lisää kylläisyyttä, käytä luumupohjaa ja lisää pienelle alueelle aikuinen kolmas väri, kuten kulta tai syvä sininen.

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

Magenta, noin `#c026d3`, ja sen vaaleampi versio orkidea.