# Magenta liukuväri: sähköiset sävyt pinkin ja purppuran välissä

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

Magenta on näytön voimakkaimpia ja vaikeimmin hallittavia värejä. Nämä koodit näyttävät sen paikan pinkin ja purppuran välissä, hyvät parit ja muutokset painettaessa.

## The short version

- Magenta on HSL-väriympyrässä 300 asteen kohdalla punaisen ja sinisen puolivälissä, joten se ei tunnu pinkiltä eikä purppuralta.
- Näytöllä puhdas magenta on `#ff00ff`, sama arvo jota CSS kutsuu fuksiaksi.
- Magenta sekoittuu puhtaasti violettiin, siniseen, oranssiin ja syaaniin, mutta suora sekoitus vihreään kulkee harmaan kautta.
- Painomagenta on paljon näyttömagenta-väriä himmeämpi, joten kirkkaat magentaliukuvärit näyttävät paperilla himmeämmiltä.
- Valkoinen teksti puhtaalla magentalla saavuttaa vain noin 3,1:1-kontrastin. Se riittää isoihin otsikoihin mutta ei pieneen tekstiin.

**Magenta liukuväri** yhdistää pinkin ja purppuran välisen voimakkaan värin naapuriväriin: violetti tuo sähköisyyttä, oranssi lämpöä, syaani kybertunnelmaa ja lähes musta syvyyttä. Puhdas näyttömagenta on `#ff00ff`, ja se on niin voimakas, että magenta toimii yleensä parhaiten liukuvärin toisena päätepisteenä koko pinnan sijaan. Alla olevat koodit kattavat eri suunnat sekä tekstin ja painatuksen huomiot.

## Magentan, pinkin ja purppuran rajat

HSL-väriympyrässä magenta on 300 asteen kohdalla, täsmälleen punaisen ja sinisen välissä. Punaiseen päin se muuttuu kirkkaaksi pinkiksi, siniseen päin purppuraksi ja violetiksi. Magenta tunnetaan myös siitä, ettei sitä ole sateenkaaressa: sillä ei ole yhtä valon aallonpituutta. Silmä havaitsee sen saadessaan punaista ja sinistä valoa yhdessä. Siksi se näyttää niin keinotekoiselta ja sähköiseltä.

| Väri | Hex | Taittuu | Tunnelma |
| --- | --- | --- | --- |
| Violetti | `#7c3aed` | Siniseen | Rauhallinen, luova |
| Purppura | `#a21caf` | Hieman siniseen | Täyteläinen, kuninkaallinen |
| Magenta | `#ff00ff` | Ei kumpaankaan | Sähköinen, äänekäs |
| Voimakas magenta | `#e6007e` | Hieman punaiseen | Rohkea, muodikas |
| Kirkas pinkki | `#ff4fa3` | Punaiseen | Leikkisä, lämmin |

Magentan lähisävyt. Magentaliukuväri lainaa yleensä jonkin näistä toiseksi väripisteekseen.

- Näyttömagenta: #ff00ff
- Sähköinen magenta: #e600e6
- Syvä magenta: #a3006f
- Viini: #5c0045
- Orkidea: #f3a6f0
- Ultravioletti: #6a00f4
- Mandariini: #ff8a3d
- Syaani: #00e5ff

Magenta ja sen parhaat parit. Ultravioletti, mandariini ja syaani vievät sen täysin eri suuntiin.

Jos haluat pehmeämpää ja lämpimämpää, lähempänä purukumia tai ruusua kuin neonia, [pinkit liukuvärit](https://gradiently.design/fi/guide/pink-gradient) ovat parempi lähtökohta. Magenta sopii, kun haluat värin, jonka ohi ei vain vieritetä.

## Sähköisen magentaliukuvärin koodit

Magenta ja violetti tai sininen on klassinen sähköinen yhdistelmä. Se kulkee väriympyrää pitkin ilman sameita kohtia, joten väri säilyy elävänä. Yhdistelmät sopivat musiikkiin, yöelämään, pelaamiseen ja luoviin työkaluihin. Jos haluat enemmän sinistä kuin magentaa, jatka [purppuraliukuvärien](https://gradiently.design/fi/guide/purple-gradient) koodeihin.

- Magentasta ultraviolettiin: `linear-gradient(135deg, #ff00ff 0%, #b100e8 50%, #6a00f4 100%)`
- Magentasta sähkönsiniseen: `linear-gradient(135deg, #ff1fd1 0%, #a83cff 50%, #3a5bff 100%)`
- Magentasta syaaniin: `linear-gradient(135deg, #ff00ff 0%, #8f6bff 50%, #00e5ff 100%)`
- Orkideapastelli: `linear-gradient(135deg, #ffd6fb 0%, #f3a6f0 50%, #d68cf5 100%)`

Viileät magentat. Magentasta syaaniin kulkeva liukuväri käy keskellä pehmeän sinivioletin kautta, joten se ei muutu harmaaksi.

## Lämpimän magentan ja auringonlaskun koodit

Toiseen suuntaan väriympyrällä magenta lämpenee: kirkkaan pinkin kautta koralliin ja oranssiin. Tämä on 1980-luvun lopun grafiikan, synthwaven, vaporwaven ja monien kesäfestivaalijulisteiden ilme. Tumma yläpiste tekee siitä iltahämärän. [Vaporwave-värit](https://gradiently.design/fi/guide/vaporwave-colors) käsittelee tätä maailmaa lisää.

- Magentasta mandariiniin: `linear-gradient(135deg, #e600e6 0%, #ff2e8a 45%, #ff8a3d 100%)`
- Magentan iltahämärä: `linear-gradient(180deg, #2a0a4a 0%, #a3007d 45%, #ff3d8b 75%, #ffb36b 100%)`

Lämpimät magentat. Pidä oranssi vaaleampana päätepisteenä, jotta kirkkain kohta on lämmin ja syvin magenta.

## Syvä magenta tummilla pohjilla

Magenta näyttää arvokkaimmalta hohtaessaan pimeästä koko kehyksen täyttämisen sijaan. Viinin- tai luumunvärinen pohja ja yksi magentavalo tuntuvat luksusmuodilta tai yöbaarilta. Koko julisteelle levitetty sama magenta näyttää tarjouslehtiseltä. Tummalla pohjalla myös valkoinen teksti toimii helposti.

- Syvä magenta: `linear-gradient(160deg, #1a0012 0%, #5c0045 50%, #a3006f 100%)`
- Magentan hohde mustalla: `radial-gradient(circle at 70% 30%, #ff3df5 0%, #a1009b 35%, #3d0040 70%, #12000f 100%)`

Tummat magentat. Valitse hohtava versio, kun haluat magentan tuntuvan laadukkaalta äänekkyyden sijaan.

> **Vältä magentasta vihreään liukumista** Vihreä on magentan vastapäätä, ja suora sekoitus kulkee keskellä harmaan kautta. Jos haluat molemmat, käytä kovaa rajaa tai pidä vihreä pienenä korostuksena. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää syyn.

## Magenta näytöllä ja painettuna

Näyttömagenta syntyy valosta, painomagenta taas on yksi CMYK:n neljästä painoväristä. Painomagenta on paljon himmeämpi, ja näytöllä sen likimääräinen arvo on yleensä `#ec008c`. Näytöllä hehkuva magentaliukuväri voi siis näyttää lehtisessä tasaiselta ja pinkiltä. [RGB ja CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) selittää eron ja [painettavat liukuvärit](https://gradiently.design/fi/guide/print-gradients) koevedostuksen.

### Näyttömagenta

- Syntyy punaisesta ja sinisestä valosta
- Puhdas arvo `#ff00ff`, erittäin voimakas
- Hohtaa tummilla taustoilla
- Sopii neonilmeisiin ja sähköiseen tunnelmaan

### Painomagenta

- Syntyy musteesta paperilla
- Lähempänä arvoa `#ec008c`, selvästi himmeämpi
- Tummat pohjat voivat painua sameiksi
- Aidolle neonille painotalot tarjoavat fluoresoivia spottivärejä

## Teksti magentaliukuvärillä

Magenta on kirkkaampi kuin näyttää. Valkoinen teksti puhtaalla `#ff00ff`-värillä saavuttaa vain noin 3,1:1-kontrastin, joka riittää isoihin otsikoihin mutta ei pieneen tekstiin. Musta saavuttaa noin 6,7:1, mutta tuntuu raskaalta. Aseta valkoinen teksti liukuvärin syvempään päähän tai tummenna magentaa pienten sanojen takana esimerkiksi arvoon `#a3006f`.

Verkkosivulla magenta toimii myös näyttävänä liukuväriotsikkona. Käytä vain isoja otsikkokokoja, joissa kontrasti riittää, kuten oppaassa [CSS-liukuväriteksti](https://gradiently.design/fi/guide/css-gradient-text) neuvotaan.

```css
.headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #ff00ff 0%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Magentasta ultraviolettiin liukuva otsikko. Käytä valkoisella tai hyvin vaalealla sivulla: magentan kontrasti on noin 3,1:1 ja ultravioletin noin 7:1, mutta violetti pää katoaa lähes kokonaan mustalla.

Pystytarina kirkkaalla magenta-violetilla taustalla ja valkoisella tekstillä Ovet kymmeneltä

Klubi-illan tarina magentalla Markilla. Teksti on tummemmalla alueella, jossa valkoinen erottuu helposti.

Voimakkaissa väreissä tekstiin reagoiva tausta auttaa eniten. Gradientlyssä magenta Mark syventää väriä kirjainten lähellä ja pitää rauhallisimman alueensa otsikon takana, jolloin hohde säilyy ja sanat erottuvat. Magentan viileämmän sisarvärin löydät [syaaniliukuvärien](https://gradiently.design/fi/guide/cyan-gradient) koodeista.

## FAQ

### Mikä on magentan hex-koodi?

Näytöllä puhdas magenta on #ff00ff, jota CSS kutsuu myös fuksiaksi. Painomagenta on himmeämpi ja esitetään näytöllä yleensä arvolla noin #ec008c.

### Onko magenta pinkki vai purppura?

Ei kumpikaan. Se on väriympyrässä täsmälleen punaisen ja sinisen välissä. Kirkas pinkki taittuu punaiseen ja purppura siniseen.

### Mitkä värit sopivat magentaliukuväriin?

Violetti, sähkönsininen, syaani, oranssi ja lähes musta sekoittuvat magentaan puhtaasti. Vältä suoraa liukua vihreään, joka kulkee harmaan kautta.

### Voiko magentalla käyttää valkoista tekstiä?

Puhtaalla #ff00ff-värillä valkoinen saavuttaa noin 3,1:1-kontrastin, joten käytä sitä vain isoihin otsikoihin. Pienen valkoisen tekstin taakse tarvitaan syvempi magenta.

### Miksi magenta näyttää painettuna himmeältä?

Painovärit eivät toista näyttömagenta-värin voimakkuutta. Varaudu pehmeämpään väriin, tilaa koevedos tai kysy painotalolta fluoresoivasta pinkistä painoväristä.