Pinkki-sininen liukuväri: hattarasta neoniin

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.

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.

Lisää pehmeitä värejä tarjoavat pastelliliukuvärit ja pastelliväripaletit.

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ä.

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 ja synthwave-värit käsittelevät tyyliä tarkemmin.

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.

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 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ä

.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;
}

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.