Lyhyesti
- Liukuväripaletti on pieni nimetty liukuväriperhe, joka perustuu yhteen pohjapalettiin ja muutamaan yhteiseen sääntöön.
- Useimmat brändit tarvitsevat neljästä kuuteen liukuväriä: pääkuva, syvä versio, rauhallinen vaalea, säteittäinen hohto, korostus ja rauhallinen tekstitausta.
- Liukuvärit tuntuvat samalta perheeltä, kun pohjaväri, suunta, pysäkkien paikat ja vaaleusaskelten rytmi ovat yhteisiä.
- Nimetyt CSS-mukautetut ominaisuudet pitävät liukuvärit samoina verkkosivulla, sovelluksessa ja suunnittelutiedostoissa.
- Testaa liukuväripaletti oikeissa kuvamuodoissa oikeilla sanoilla ennen brändiohjeisiin kirjaamista.
Tällä sivulla
Liukuväripaletti on pieni nimetty liukuväriperhe yhdestä väripaletista ja muutamasta yhteisestä säännöstä, jolloin kaikki brändin liukuvärit näyttävät sukulaisilta. Aloita viidestä tai kuudesta pohjaväristä, anna jokaiselle liukuvärille tehtävä (pääkuva, syvä, rauhallinen, hohto, korostus, teksti) ja määritä sukulaisuus: sama pohja, kulma, pysäkkipaikat ja tasaiset vaaleusaskeleet. Tallenna ne nimetyiksi suunnitteluarvoiksi ja testaa oikeissa suunnitelmissa ennen muiden käyttöä.
Miksi brändi tarvitsee useamman liukuvärin
Yksittäinen liukuväri joutuu tehtäviin, joihin se ei sovi. Lanseerausjulkaisun kirkas pääliukuväri on liian äänekäs kappaleen taakse, liian tumma vaaleaan verkkosivuosioon ja liian levoton numerodiaan. Tiimit improvisoivat, joku valitsee läheisen sinisen ja vuoden päästä brändillä on viisitoista lähes yhteensopivaa liukuväriä. Paletti estää tämän päättämällä muunnelmat etukäteen.
Liukuvärikasa
- Jokainen tehty erikseen yhteen suunnitelmaan
- Eri kulmat joka sivulla
- Lähes brändiin sopivat värit
- Ei nimeä, joten kukaan ei osaa pyytää tiettyä
- Kopioitu silmämääräisesti vanhoista tiedostoista
Liukuväripaletti
- Rakennettu yhdestä pohjapaletista
- Yksi suunta kaikkialla
- Tarkat heksakoodit ja pysäkkipaikat
- Nimet tehtävän mukaan: pääkuva, syvä, rauhallinen
- Tallennettu suunnitteluarvoiksi koodiin ja tiedostoihin
Aloita pohjaväripaletista
Jokainen perheen liukuväri tehdään vain näistä väreistä tai niiden vaaleista ja tummista muunnelmista. Jos brändivärit eivät ole selvillä, aloita brändivärien valinnasta. Hyödyllinen pohja sisältää tumman pohjavärin, kaksi tai kolme pääsävyn askelta, lähes valkoisen ja yhden korostuksen muualta ympyrältä.
Anna jokaiselle liukuvärille tehtävä
Nimeä liukuvärit toiminnan, älä ulkonäön mukaan. ”Pääkuva” kestää väriuudistuksen, ”violetti auringonlasku” ei. Kuusi tehtävää kattaa lähes kaikki brändit.
Ero
Ero
Käyttö
Ero
Ero
Ero
Ero
Säännöt, jotka tekevät liukuväreistä perheen
- Yksi pohja. Jokainen tumma liukuväri päättyy samaan musteeseen, vaalea samaan simpukkaan. Silmä ryhmittelee ne pohjan mukaan.
- Yksi suunta. Valitse kulma, esimerkiksi 135 tai 160 astetta, ja pidä se. Eri kulmat saavat sivun tuntumaan sattumanvaraiselta. Liukuvärin kulma kertoo valinnasta.
- Yhteiset pysäkit. Käytä samoja sijainteja, esimerkiksi 0, 45, 75 ja 100 prosenttia, jotta siirtymien rytmi säilyy. Liukuväripysäkit käsittelee välejä.
- Tasaiset vaaleusaskeleet. Jokainen sekoituksen väri on selvästi viereistä vaaleampi tai tummempi. Epätasaiset askeleet tuottavat kirkkaan raidan keskelle.
- Yksi säästeliäs korostus. Korostusväri esiintyy vain yhdessä liukuvärissä. Kaikkiin levitettynä se ei enää korosta.
- Kiinteä interpolointi koodissa. Jos sivu sekoittaa oklch:ssa, kaikkien liukuvärien pitää, muuten samat koodit näyttävät eri osioissa erilaisilta.
Tallenna liukuväripaletti suunnitteluarvoiksi
Pelkässä PDF:ssä elävä paletti kirjoitetaan uudelleen ja muuttuu. Tallenna kukin liukuväri kerran nimettynä mukautettuna ominaisuutena ja viittaa siihen kaikkialla. Suunnittelijat voivat liittää samat arvot tiedostoihin, ja tuleva uudistus muuttaa yhtä riviä liukuväriä kohden. Suunnitteluarvot käsittelee laajempaa käytäntöä.
:root {
--ink: #14112b;
--plum: #4c1d95;
--violet: #7c3aed;
--orchid: #c084fc;
--shell: #faf5ff;
--ember: #f97316;
--gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
--gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
--gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
--gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
--gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
--gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}
.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }Testaa oikeissa kuvamuodoissa
Värinäytteet valehtelevat. Pienenä neliönä tasapainoinen liukuväri voi asettaa kirkkaimman kaistan otsikon taakse 1080×1920-tarinassa. Tee ennen paletin julkaisua kolme oikeaa suunnitelmaa oikeilla sanoilla: pystyjulkaisu, tarina ja verkkosivun pääkuva. Tarkista tekstitaustan luettavuus värikontrastin ja saavutettavuuden avulla sekä pääkuvan ja syvän version sukulaisuus rinnakkain.
Pääkuvarooli 1080×1350-pystyjulkaisussa.
Sama perhe 1080×1920-tarinassa. Tarkista, että kirkkain kaista pysyy pois otsikon alta korkeammassa kuvassa.
Gradiently Prossa brändipaketti säilyttää väripalettisi logon ja fonttien rinnalla, ja Designer käyttää niitä uusissa suunnitelmissa. Jos pääliukuväri on tunnistettava piirteesi, brändiliukuvärit kertoo sen muuttamisesta tunnusmerkiksi.
Usein kysyttyä
Mikä on liukuväripaletti?
Pieni nimetty liukuvärijoukko yhdestä väripaletista yhteisillä säännöillä, jolloin se näyttää yhdeltä perheeltä kaikkialla.
Montako liukuväriä brändi tarvitsee?
Neljästä kuuteen kattaa useimmat tarpeet: pääkuva, syvä ja rauhallinen versio, säteittäinen hohto, korostus ja rauhallinen tekstitausta. Pieni brändi voi aloittaa kolmesta.
Miten saan liukuvärit näyttämään yhteen kuuluvilta?
Käytä kaikissa samaa pohjaväriä, kulmaa, pysäkkipaikkoja ja tasaisia vaaleusaskeleita.
Miten tallennan brändiliukuvärit verkkosivulle?
Määritä värit ja jokainen liukuväri kerran CSS-mukautettuina ominaisuuksina ja viittaa nimiin jokaisessa komponentissa.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme