Lyhyesti
- Sininen liukuväri häivyttää sinisiä sävyjä, usein viereisen petrooli-, syaani- tai violetin kanssa, vaaleasta jäästä syvään laivastonsiniseen.
- Sinisen mielletään laajasti viestivän rauhaa, luotettavuutta ja teknologiaa, minkä vuoksi se on suosittu ja sekoittuu helposti kaikkien muiden siniseen.
- Sininen häivytyy puhtaasti kohti petrooliä, syaania, indigoa ja violettia, mutta muuttuu helposti harmaaksi, kun se häivytetään suoraan kohti oranssia tai keltaista.
- Valkoinen teksti toimii syvillä ja keskisävyisillä sinisillä kuten #1e3a8a ja #2563eb, mutta ei vaaleammilla sinisillä kuten #3b82f6 leipätekstinä.
- Sinisen liukuvärin kallistaminen kohti petrooliä tai violettia, syvemmälle tai vaaleammalle meneminen ja lämpimän korostuksen lisääminen ovat nopeimmat keinot päästä eroon yritysilmeestä.
Tällä sivulla
Sininen liukuväri häivyttää sinisen sävyjä, usein viereisen petrooli-, syaani- tai violetin kanssa. Se voi tuntua kirkkaalta taivaalta, syvältä merenpinnalta, yön näytöltä tai pankin vuosikertomukselta sen mukaan, mitä sinisiä valitset ja miten käytät niitä. Alla on kaksikymmentä sinistä liukuvärimallia kopioitavalla CSS:llä, vaaleimmasta tummimpaan ryhmiteltyinä, sekä niillä toimivat tekstivärit ja keinot estää sinistä tuntumasta tylsältä.
Vaaleansiniset liukuvärit: jää ja taivas
Vaaleansiniset liukuvärit tuntuvat avoimilta, puhtailta ja hiljaisilta. Ne sopivat terveydenhuoltoon, matkailuun, hyvinvointiin ja tuotesivuille, jotka tarvitsevat tilaa. Käytä niillä tummaa mustetta ja lisää häivähdys lämpöä tai liliaa, jotta ne eivät näytä kylmiltä ja kliinisiltä.
Meren ja petrooliset siniset liukuvärit
Sinisen kallistaminen kohti vihreää tuo siihen eloa. Merenväriset liukuvärit tuntuvat raikkailta ja luonnollisilta, ja ne väistävät puhtaan sinisen yritysmielleyhtymät. Ne sopivat matkailu-, ruoka-, kestävyys- ja ulkoilubrändeille.
Kirkkaat ja sähkönsiniset liukuvärit
Kylläiset siniset ovat energisiä ja teknisiä. Ne sopivat lanseerauksiin, sovelluksiin, urheiluun ja tapahtumiin. Ne ovat myös verkon yleisimpiä sinisiä, joten ne hyötyvät eniten yllättävästä muodosta tai lämpimästä korostuksesta.
Tummansiniset ja keskiyön liukuvärit
Syvät laivastonsiniset ja keskiyön liukuvärit tuntuvat vakavilta, premium-tasoisilta ja rauhallisilta. Ne ovat erinomaisia pohjia valkoiselle tekstille ja kirkkaille korostuksille. Varo juovittumista, joka näkyy helposti hitaissa, tummissa sinisissä. Hieno rakeisuus korjaa sen. Katso liukuvärin juovittuminen.
Mikä sininen liukuväri mihinkin tehtävään
Kaksikymmentä palettia on paljon valittavaa. Aloita tehtävästä, jonka suunnitelman pitää hoitaa, ja sanoista, jotka sen pitää kantaa, ja valitse sitten sopivasta ryhmästä.
| Tehtävä | Kokeile | Miksi |
|---|---|---|
| Rauhallinen tuote- tai terveyssivu | 1, 3, 4 | Vaalea, avoin ja helppo tumman tekstin alla |
| Matkailu, ruoka, ulkoilu | 6, 8, 10 | Vihreään kallistuva sininen tuntuu luonnolliselta |
| Sovelluksen lanseeraus tai teknologiatapahtuma | 11, 13, 15 | Kylläinen ja valaistu, näyttää energialta |
| Premium tai rahoitus | 16, 17, 19 | Syvät pohjat tuntuvat vakavilta ja kantavat valkoista tekstiä |
| Jotain mieleenpainuvaa | 2, 14, 20 | Lämmin sävel tekee sinisestä omanlaisen |
Mitä sininen viestii ja tylsyysongelma
Suuressa osassa maailmaa sininen yhdistetään rauhaan, luotettavuuteen ja syvyyteen, osin taivaan ja veden vuoksi. Siksi se on niin yleinen pankeissa, vakuutuksissa, terveydenhuollossa ja teknologiassa. Siksi myös keskisininen liukuväri auttaa harvoin ketään tunnistamaan sinut: se näyttää alalta eikä yritykseltä. Värien psykologia selittää, miksi konventio vaikuttaa kumpaankin suuntaan.
Yrityssininen
- Yksi keskisininen vaaleampaan siniseen 135 asteen kulmassa
- Puhdas, täysin kylläinen perussininen
- Sileä ja tasainen, ei tekstuuria
- Sinistä kaikkialla, ei mitään lämmintä
Erottuva sininen
- Kallistettu kohti petrooliä, indigoa tai violettia
- Hyvin syvä tai hyvin vaalea, ei keskisävy
- Rakeisuutta, kiiltoa tai pehmeä hehku
- Yksi lämmin korostus: koralli, kulta tai aprikoosi
Sininen häivytyy hyvin kohti naapureitaan: petrooliä, syaania, indigoa ja violettia. Se häivytyy huonosti kohti vastakohtiaan. Sininen suoraan oranssiin tai keltaiseen kulkee harmahtavan keskikohdan kautta, joten pidä lämpimät korostukset lyhyinä tai kuljeta ne violetin tai pinkin kautta. Vastavärit selittää syyn.
Teksti sinisillä liukuväreillä
| Teksti taustalla | Kontrasti | Arvio |
|---|---|---|
Valkoinen värillä #0b1437 | 18,0:1 | Erinomainen |
Valkoinen värillä #1e3a8a | 10,4:1 | Erinomainen |
Valkoinen värillä #2563eb | 5,2:1 | Käy leipätekstille |
Valkoinen värillä #3b82f6 | 3,7:1 | Vain suurelle tekstille |
#0b1a33 värillä #60a5fa | 6,8:1 | Tumma muste toimii tässä |
#0b1a33 värillä #bae6fd | 13,1:1 | Erinomainen |
Ansa on sinisen alueen keskikohta: kirkas ruiskaunokki kuten #3b82f6 näyttää riittävän vahvalta valkoiselle tekstille, mutta jää alle 4,5:1:n. Tarkista liukuvärillä kontrasti siitä kohdasta, jossa sininen on vaaleimmillaan sanojesi takana. Teksti liukuvärillä esittelee koko menetelmän.
Syvä kenttä antaa yhden luvun hoitaa kaiken puhumisen.
Rauhallisempi tarina, jossa on runsaasti avointa tilaa.
.hero {
background-color: #0b1437;
background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
color: #ffffff;
}Sinisen liukuvärin vieminen kuvana someen vaatii yhden lisävaiheen. Alustat pakkaavat lataukset uudelleen, ja hitaat, tummat siniset ovat ensimmäisiä värejä, jotka hajoavat näkyviksi raidoiksi. Vie alustan suositellussa koossa, lisää hieno rakeisuus ennen tallennusta ja käytä PNG:tä, kun alusta sen hyväksyy. Rakeiset liukuvärit näyttää, kuinka paljon rakeisuutta riittää.
Sinisen naapurina olevista violeteista lisää oppaassa violetit liukuvärit ja vihreämmistä vaihtoehdoista oppaassa vihreät liukuvärit.
Usein kysyttyä
Mitkä värit sopivat sinisen kanssa liukuväriin?
Petrooli, syaani, indigo ja violetti häivytyvät puhtaasti sinisen kanssa. Lämpimät värit kuten koralli ja kulta toimivat hyvinä korostuksina, jos ne pidetään lyhyinä, koska sinisen häivyttäminen suoraan oranssiin tai keltaiseen muuttuu harmaaksi.
Mikä on hyvä CSS-koodi siniselle liukuvärille?
Syvälle, rauhalliselle siniselle kokeile linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Jokaisen tämän sivun paletin voi kopioida CSS:nä.
Onko valkoinen teksti luettavaa sinisellä liukuvärillä?
Syvillä ja keskitummilla sinisillä on. Vaaleammilla sinisillä kuten #3b82f6 valkoinen teksti jää alle leipätekstille suositellun 4,5:1-suhteen.
Miten teen sinisestä liukuvärista vähemmän yritysmäisen?
Kallista se kohti petrooliä tai violettia, valitse hyvin syviä tai hyvin vaaleita sinisiä keskisinisen sijaan, lisää rakeisuutta ja käytä pientä lämmintä korostusta.
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
