# Korallinen liukuväri: koodit pinkin ja oranssin väliltä

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

Koralli sijoittuu pinkin ja oranssin rajalle ja yhdistää molempien lämmön ja viehätyksen. Se on elävä ja ystävällinen, mutta tekstille haastava. Tässä koodit ja ratkaisut.

## The short version

- Korallinen liukuväri yhdistää lämpimiä pinkinoransseja, usein ruusun sävyjä toisessa ja mandariinia tai persikkaa toisessa päässä.
- CSS:n nimetty väri coral on #ff7f50, kirkas oranssiin taittuva koralli.
- Koralli ja sinivihreä ovat lähes vastavärejä, joten suora sekoitus harmaantuu. Käytä sinivihreää erillisenä alueena tai korostuksena.
- Valkoinen teksti ei toimi kirkkaalla korallilla. Valitse tumma viininruskea kuten #3b0d0c tai siirrä valkoinen syvälle punakorallille.
- Koralli sopii kesäkampanjoihin, ruokaan ja juomaan, kauneuteen, liikuntaan ja ystävällisiin kuluttajasovelluksiin.

**Korallinen liukuväri** yhdistää lämpimiä pinkinoransseja juuri pinkin ja oranssin rajalta. Ruusuun kallistuva tuntuu viehättävältä ja raikkaalta, mandariiniin kallistuva aurinkoiselta ja energiseltä. Iloinen, näkyvä koralli sopii kesään, ruokaan, kauneuteen ja liikuntaan. Sen sudenkuopat ovat harmaa raita sinivihreän kanssa ja katoava teksti. Molemmat voi välttää helposti, kun ne tuntee.

## Koralli, lohi, persikka ja vesimeloni

Lämpimillä pinkinoransseilla on monta nimeä. Erottelu auttaa valitsemaan oikeat väripisteet ja kuvailemaan toivettasi suunnittelijalle tai Gradientlyn Designerille.

| Väri | Tyypillinen heksakoodi | Luonne |
| --- | --- | --- |
| Koralli | `#ff7f50` | Kirkas, lämmin, oranssiin taittuva |
| Living Coral | `#ff6f61` | Pinkimpi ja pehmeämpi koralli |
| Lohenpunainen | `#fa8072` | Vaaleampi ja pinkimpi, hieman murrettu |
| Persikka | `#ffcba4` | Selvästi vaaleampi, oranssimpi ja lempeä |
| Vesimeloni | `#fb7185` | Pinkimpi, viileämpi ja leikkisä |

Koralli on näistä kirkkain. Sen naapurit toimivat koralliliukuvärin väripisteinä.

## Kirkkaat koralliliukuvärit

Nämä näyttävät korallin elävimmillään. Ne erottuvat pikkukuvassakin ja sopivat alennusjulkaisuihin, lanseerauksiin, liikuntatunneille ja kaikkeen, jonka pitää näkyä vilkkaassa syötteessä.

- Klassinen koralli: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Elävä koralli: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Trooppinen hedelmäjuoma: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Korallikukinta: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Koralliauringonlasku: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Viisi kirkasta koralliyhdistelmää. Kumppanit ovat lähisävyjä, joten sekoitukset pysyvät kylläisinä.

Kokeile ”Klassista korallia” 1080×1920-tarinan yhden rivin ”Ovet auki keskipäivällä” taustalle, ”Trooppista hedelmäjuomaa” kesäjuomamenun kanteen ja ”Koralliauringonlaskua” 1000×1500-Pinterest-pinin lomavinkkeihin. Vahva koralli saa täyttää kuvan. Pidä muu sisältö yksinkertaisena: yksi otsikko, yksi yksityiskohta ja paljon tilaa.

## Koralliliukuvärit pinkistä oranssiin

### Pinkkiin taittuva koralli

Ruusuun ja heleään pinkkiin vietynä koralli pehmenee ja romantisoituu. Se sopii kauneuteen, kukkakaupoille, häihin ja lifestyle-brändeille. Pinkimpää päätä käsittelee [pinkit liukuvärit](https://gradiently.design/fi/guide/pink-gradient).

- Ruusukoralli: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Heleä lohenpunainen: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Vesimelonikoralli: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Pinkkiin taittuvat korallit ovat pehmeämpiä ja sopivat kauneus- ja lifestyle-brändeille.

### Oranssiin taittuva koralli

Aprikoosiin ja mandariiniin vietynä koralli on aurinkoisempi ja äänekkäämpi: kesämenut, smoothie-baarit ja lomat. [Oranssinpinkit liukuvärit](https://gradiently.design/fi/guide/orange-pink-gradient) kattaa koko välin.

- Aprikoosikoralli: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Korallista mandariiniin: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Rantabaari: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

Oranssiin taittuvat korallit ovat aurinkoisia, energisiä ja kesäisiä.

## Koralli ja sinivihreä ilman harmaata keskikohtaa

Koralli ja sinivihreä ovat hieno pari: lämmin vasten viileää, riutta vasten merta. Ne ovat kuitenkin lähes vastakkaiset väriympyrässä, joten suora sekoitus kulkee harmaan läpi. Pidä ne erillään: sinivihreä pohja ja korallinen valo, korallinen pohja ja sinivihreä korostus tai yhdistäminen hyvin vaaleiden sävyjen kautta. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää harmaantumisen.

- Vältä: harmaa keskikohta: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Koralliaurinko sinivihreällä: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Simpukanvalkoisen kautta: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

Ensimmäisen sekoituksen keskikohta harmaantuu. Muut erottavat värit toisistaan tai yhdistävät vaalean sävyn kautta.

Kokeile menuun tai julisteeseen tummaa sinivihreää `#042f2e` ja korallisia otsikoita sekä painikkeita. Korallin kontrasti on siinä noin 5,8:1, paljon parempi kuin valkoisella korallin päällä. Ilme on rohkea ja kesäinen. [Sinivihreät liukuvärit](https://gradiently.design/fi/guide/teal-gradient) käsittelee parin toista puolta.

## Koralli tummalla pohjalla

Koralli hehkuu syvää luumua, laivastonsinistä tai lähes mustaa vasten. Yksi korallinen valo muistuttaa neonkylttiä tai auringonlaskua merellä ja sopii baareihin, musiikkiin, yöelämään ja iltatapahtumiin. Pidä valo pois tekstin kohdalta ja kirjoita tummalle alueelle simpukanvaalealla tai valkoisella.

- Koralli viininpunaisella: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Auringonlasku lahdella: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Hiili ja koralli: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Yksi korallinen valo ja paljon tummaa. Koralli näyttää kirkkaammalta kuin valkoisella.

## Teksti koralliliukuvärillä

Koralli näyttää riittävän vahvalta valkoiselle tekstille, mikä johtaa moniin epäonnistuneisiin suunnitelmiin. Valkoisen kontrasti `#ff7f50`:llä on noin 2,5:1, alle leipätekstin vaatiman 4,5:1. Viininruskea `#3b0d0c` antaa noin 6,7:1 ja säilyttää lämmön. Valkoista varten syvennä koralli punaiseksi, kuten `#e11d48`, jolla kontrasti on noin 4,7:1. Menetelmä löytyy artikkelista [värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility).

Pilatesstudion tarjousjulkaisu, jossa vaalea teksti kulkee koralliliukuvärin kirkkaimmalla alueella

Vaaleat sanat kirkkaalla korallilla näyttävät rohkeilta, mutta niitä on vaikea lukea puhelimella päivänvalossa.

Sama pilatesjulkaisu selkeällä tekstillä koralliliukuvärin rauhallisemmalla tummalla alueella

Sama julkaisu rauhallisemmalla alueella ja sopivalla tekstivärillä.

Gradientlyn Mark mukautuu itsestään: rauhallisin ja parhaan kontrastin alue siirtyy sanojen taakse, ja Automaattinen muste valitsee vaalean tai tumman tekstin rivittäin Markin paletista. Laatikoita tai varjoja ei tarvita.

## Koralliliukuvärin CSS painikkeeseen

Koralli tekee toimintakehotuksesta ystävällisen. Pidä liukuväri niin vaaleana, että tumma teksti näkyy, ja siirrä taustaa osoittimen alla värien vaihtamisen sijaan. [CSS-liukuväripainikkeet](https://gradiently.design/fi/guide/css-gradient-button) antaa lisää malleja.

```css
.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}
```

Korallinen kapselipainike viininpunaisella tekstillä. Liukuväri liukuu osoittimen alla vaihtamatta väriä.

## FAQ

### Mikä on korallin heksakoodi?

CSS:n nimetty väri `coral` on `#ff7f50`. Pantonen Living Coral esitetään usein likiarvolla `#ff6f61`.

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

Persikka, ruusu, mandariini ja kulta sulautuvat siihen. Tumma sinivihreä, laivastonsininen ja luumu toimivat erillisinä alueina.

### Miksi korallin ja sinivihreän liukuväri harmaantuu?

Ne ovat lähes vastavärejä, joten välisävyt menettävät kylläisyyttä. Pidä värit erillään tai yhdistä ne vaalean sävyn kautta.

### Voinko käyttää valkoista tekstiä korallilla?

Et kirkkaalla korallilla, jolla kontrasti ei riitä. Käytä tummaa viininpunaista tai ruskeaa tai syvennä koralli punaiseksi ennen valkoisen käyttöä.

### Mitä eroa korallilla ja lohenpunaisella on?

Lohenpunainen on vaaleampi, pinkimpi ja murretumpi. Koralli on kirkkaampi, kylläisempi ja oranssimpi.