Lyhyesti
- Väripalettigeneraattori luo värit säännöstä, satunnaissiemenestä, kuvasta tai tekstikehotteesta, mutta ei päätä kunkin värin tehtävää.
- Useimmat luodut paletit antavat väreille saman painon ja kylläisyyden, mikä näyttää hyvältä näytteissä mutta äänekkäältä suunnitelmassa.
- Käyttökelpoinen paletti tarvitsee vaalean tai tumman pohjan, tekstivärin, yhden tai kaksi pääväriä ja pienen korostuksen.
- Tarkista paletin laaja vaaleusjakauma, sillä lähellä toisiaan olevat vaaleudet sulautuvat ja epäonnistuvat kontrastitesteissä.
- Testaa luotu paletti aina oikealla asettelulla ja oikeilla sanoilla ennen sitoutumista.
Tällä sivulla
Väripalettigeneraattori ehdottaa yhteen sopivia värejä väriteorian, sattuman, kuvan tai kirjallisen kehotteen avulla. Käytä sitä päästäksesi alkuun ja muokkaa sitten tulosta: lisää neutraali pohja ja tekstiväri, anna jokaiselle värille tehtävä ja testaa oikeassa suunnitelmassa. Generaattorin viisi näytettä ovat lähtökohta. Toimiva paletti on niistä itse muotoilemasi.
Palettigeneraattorien päätyypit
Jokainen generaattori tekee taustalla yhtä neljästä asiasta. Tyypin tunteminen kertoo vahvuuden ja sen, mitä joudut korjaamaan.
Toiminta
Sopii
Huomioi
Toiminta
Sopii
Huomioi
Sopii
Huomioi
Toiminta
Sopii
Huomioi
Harmoniaympyrän säännöistä kertoo väriharmonia. Väripaletti kuvasta selittää parempien näytteiden poiminnan, ja tekoälyn väripalettigeneraattorit käsittelee kehotteita.
Miksi luodut paletit epäonnistuvat suunnitelmissa
Generaattori näyttää värit viitenä yhtä suurena raitana. Todellisessa suunnitelmassa yksi peittää eniten tilaa, yksi kantaa sanat ja loput näkyvät pieninä määrinä. Tässä on tyypillinen satunnaistulos ja sama ajatus muokattuna.
Viisi muutosta käyttökelpoiseen palettiin
- 1
Säilytä se yksi mieluisa väri
Lukitse se pääväriksi. Kaikki muu tukee sitä. Jos mikään ei erotu, luo uusi tulos tyytymisen sijaan.
- 2
Lisää pohja ja muste
Generaattorit sisältävät ne harvoin. Valitse vaalea pohja, lämmin tai viileä luonnonvalkoinen, tai tumma pohja ja vahvasti erottuva tekstiväri. Sävytä molempia hieman päävärillä yhdistääksesi ne.
- 3
Laajenna vaaleusjakaumaa
Muuta näytteet harmaaksi mielessäsi tai näytöllä. Tarvitset vaaleaa, keskisävyistä ja tummaa, et viittä keskisävyä. Säädä vaaleutta, kunnes värit erottuvat selvästi.
- 4
Vähennä kaikkien paitsi yhden kylläisyyttä
Jätä korostus kirkkaaksi ja rauhoita muut. Pääväriä pehmeämpi tukiväri saa päävärin tuntumaan rikkaammalta.
- 5
Määritä osuudet
Hyvä lähtöjako on 60 30 10 -sääntö: pohja noin 60 %, pääväri noin 30 % ja korostus noin 10 %. Säädä silmämääräisesti asettelun nähtyäsi.
Tee muutokset tarkasti muodossa, joka erottaa vaaleuden sävystä. HSL on helppo lukea; OKLCH pitää vaaleuden tasaisempana eri sävyjen välillä.
Testaa paletti oikealla asettelulla
Värinäytteet peittävät ongelmia, jotka ilmestyvät sanojen mukana. Käytä palettia oikeassa julkaisussa, ruokalistassa tai pääosiossa ja katso todellisessa näyttökoossa. Tarkista sitten jokainen tekstipari kontrastityökalulla.
Paletti ansaitsee paikkansa oikeassa muodossa oikeilla sanoilla. Jos otsikko ei erotu, muuta palettia, älä otsikkoa.
Liukuväri on nopea lisätesti. Sekoita pohja, pääväri ja tukiväri: jos keskelle syntyy harmaata, kaksi väriä riitelee. Mutaiset liukuvärit selittää miksi.
linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)Tallenna tokeneina, älä kuvakaappauksena
Kun paletti toimii, nimeä värit tehtävän, älä sävyn mukaan, jotta voit vaihtaa petroolin nimeämättä kaikkea uudelleen. Koodissa tämä tarkoittaa CSS-muuttujia, suunnittelutyökaluissa nimettyjä tyylejä ja Gradientlyssä brändipakettia, jossa paletit, fontit ja ääni elävät yhdessä ja Designer soveltaa niitä töihinsä.
:root {
--color-ground: #f7f3ec;
--color-ink: #1c2321;
--color-main: #2a6f68;
--color-support: #a8c5b8;
--color-accent: #e07a5f;
}
.button {
background: var(--color-main);
color: var(--color-ground);
}Värillä hakeminen luomisen sijaan
Joskus et tarvitse viittä koodia vaan valmiin taustan tietyssä väriperheessä. Gradientlyn Markkinoilla voit hakea Markeja värisanoilla, kuten ”deep teal” tai ”warm peach”, ja suodattaa ilmettä. Jokainen Mark on elävä liukuväri- ja materiaalitausta omalla paletilla ja typografisella äänellä. Se tarkistetaan kaikkia muita vasten, jotta kaksi ei näytä samalta, ja lunastamattomalla voit suunnitella ilmaiseksi. Se on eri reitti samaan tavoitteeseen: yhteen kuuluvat värit valmiissa tehtävissään.
Usein kysyttyä
Mikä on paras väripalettigeneraattori?
Se riippuu työskentelytavasta: harmoniaympyrät sopivat yhden värin ympärille rakentamiseen, lukittavat satunnaisgeneraattorit löytämiseen ja kuvapoiminta valokuvaan sovittamiseen. Kaikki tarvitsevat jälkimuokkausta.
Montako väriä paletissa pitäisi olla?
Useimmille brändeille sopivat pohja, muste, yksi tai kaksi pääväriä ja korostus, yhteensä neljä tai viisi. Suurempaa määrää on vaikea pitää yhtenäisenä.
Miksi luotu paletti näyttää huonolta suunnitelmassani?
Yleensä väreillä on samanlainen vaaleus ja kylläisyys eikä selkeitä rooleja. Lisää neutraali pohja ja tekstiväri, laajenna vaaleusjakaumaa ja pidä vain yksi kirkas korostus.
Miten tarkistan paletin saavutettavuuden?
Testaa jokainen tekstin ja taustan pari kontrastityökalulla tavoitellen leipätekstille vähintään 4,5:1. Katso paletti harmaasävyisenä varmistaaksesi värien erottumisen.
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