Väripaletit

Väripaletit mobiilisovelluksiin

Sovelluksessa värit kertovat, mitä voi napauttaa, mikä on aktiivista ja mikä onnistui tai epäonnistui. Näissä 12 paletissa on tausta, pinnat, pääväri ja teksti erityyppisille sovelluksille. HEX-koodit voit viedä Figmaan, Flutteriin, SwiftUI:hin tai React Nativeen.

Fintech sinisellä ja vihreällä

Sininen luottamukseen ja vihreä saldoihin ja onnistuneisiin maksuihin.

Ruokalähettien oranssi

Oranssi nostaa tilauspainikkeet ja tarjoukset esiin.

Terveys ja hyvinvointi

Rauhallinen; ajanvaraukseen, tapoihin tai seurantaan.

Tumma tila violetilla

Hyvin tummanharmaa tausta täysmustan sijaan ja vaaleanvioletti korostus.

Sosiaalinen pinkki ja violetti

Sosiaalisiin verkostoihin, deittailuun tai sisällöntuottajille.

Minimalistinen tuottavuus

Erittäin luettava; tehtävälistoihin ja työkaluihin.

Opetuksen keltainen

Iloinen ja selkeä; kieli- tai oppimissovelluksiin.

Energinen treeni

Limeä ja punaista tummalla; treeneihin ja tilastoihin.

Meditaation laventeli

Pehmeä ja rauhallinen; uni-, meditaatio- tai päiväkirjasovelluksiin.

Matkailu turkoosilla ja hiekalla

Muistuttaa rannasta ja auringosta; varauksiin ja matkaoppaisiin.

Raikas ruoan vihreä

Ruokaostos-, resepti- tai ravitsemussovelluksiin.

Premium-ostokset

Neutraali ja tyylikäs; anna tuotekuvien olla pääosassa.

Napauta väriä, niin HEX-koodi kopioituu. Kynäkuvake avaa paletin editorissa, jossa voit muokata sitä.

Päätä tilojen värit alusta asti

Jokainen sovellus tarvitsee värit virheelle, onnistumiselle, varoitukselle ja tiedolle. Valitse palettiisi sopivat sävyt äläkä käytä virheväriä mihinkään muuhun, kuten brändin painikkeisiin. Yhdistä väriin kuvake tai teksti, jotta viesti on selvä eikä nojaa pelkkään väriin.

Suunnittele myös tumma tila

Useimmissa puhelimissa on tumma tila, ja monella se on päällä. Värien kääntäminen ei riitä: käytä täysmustan sijaan hyvin tummanharmaita sävyjä ja laske korostusvärien kylläisyyttä hieman, jotta ne eivät väreile taustaa vasten.

Tarkista kontrasti ja kosketusalueet

Tekstin kontrastin taustaan nähden pitää olla WCAG:n mukaan vähintään 4,5:1. Painikkeiden pitää näyttää erilaisilta aktiivisina, painettuina ja pois käytöstä. Testaa sovellusta ulkona ja himmeällä näytöllä, sillä niin moni sitä käyttää.

Näiden palettien värit

SavunvalkoinenValkoinenPellavaOranssiHiilenmustaMurrettu valkoinenMännynvihreäEebenpuuLumenvalkoinenPlatinaPreussinsininenNorsunluuMeripihkaNeonkeltainenSamppanjaTiffanynsininen

Usein kysytyt kysymykset

Montako väriä sovelluksessa pitäisi olla?

Yleensä yksi pääväri, valinnainen toissijainen väri, neutraalit sävyt taustoihin ja tekstiin sekä neljä tilaväriä: virhe, onnistuminen, varoitus ja tieto.

Minkä värinen sovelluksen pääpainikkeen pitäisi olla?

Brändin pääväri, kunhan se erottuu hyvin taustasta. Käytä sitä vain jokaisen näkymän tärkeimpään toimintoon.

Lisää väripaletteja: suunnittelu

Jatka tutkimista