Värimuunnos
#ca4e4e
≈ Chestnut Rose
Variaatiot
Tämän osion tarkoituksena on tuottaa tarkasti valitsemastasi väristä tummennuksia (lisätty puhdasta mustaa) ja vaaleennuksia (lisätty puhdasta valkoista) 10 %:n askelin.
Ammattilaisten vinkki: Käytä sävyjä leijutustiloihin ja varjoihin, sävyjä korostuksiin ja taustoihin.
Tummennukset
Tummemmat variaatiot, jotka luodaan lisäämällä mustaa perusväriin.
Vaaleennukset
Vaaleammat muunnelmat, jotka luodaan lisäämällä valkoista perusväriin.
Yleiset käyttötapaukset
- • Käyttöliittymäkomponentin tilat (hover, aktiivinen, pois käytöstä)
- • Syvyyden luominen varjojen ja korostusten avulla
- • Yhdenmukaisten värijärjestelmien rakentaminen
Suunnittelujärjestelmän vinkki
Nämä vaihtelut muodostavat yhtenäisen väripaletin perustan. Vie ne, jotta koko projekti pysyy yhtenäisenä.
Väriyhdistelmät
Jokaisella harmonialla on oma tunnelmansa. Käytä harmonioita ideoidaksesi väriyhdistelmiä, jotka toimivat hyvin yhteen.
Kuinka käyttää
Kopioi värin heksanarvo napsauttamalla mitä tahansa väriä. Nämä yhdistelmät luovat matemaattisesti todistetusti visuaalista harmoniaa.
Miksi sillä on merkitystä
Väriharmoniat luovat tasapainoa ja herättävät tiettyjä tunteita malleissasi.
Vastaväri
Väri ja sen vastakohta väriympyrässä, +180 astetta värisävystä. Korkea kontrasti.
Jaettu vastaväri
Väri ja kaksi sen vastavärin vieressä olevaa väriä, +/-30 astetta päävärin vastakkaisesta sävystä. Rohkea kuten suora vastaväri, mutta monipuolisempi.
Kolmisointu
Kolme väriä, jotka on sijoitettu tasaisesti väriympyrään, kukin 120 asteen välein. On parasta antaa yhden värin hallita ja käyttää muita korostusväreinä.
Analogiset värit
Kolme väriä, joilla on sama luminanssi ja kylläisyys ja joiden sävyt ovat vierekkäin väripyörässä 30 asteen etäisyydellä toisistaan. Sujuvat siirtymät.
Yksivärinen
Kolme samaa sävyä olevaa väriä, joiden luminanssiarvot ovat +/-50 %. Hienovarainen ja hienostunut.
Nelisointu
Kaksi vastaväriparii, jotka on erotettu 60 sävyasteella.
Väriteorian periaatteet
Balance
Käytä yhtä hallitsevaa väriä, tue sitä toissijaisella värillä ja korosta väriä säästeliäästi.
Kontrasti
Varmista riittävä kontrasti luettavuuden ja saavutettavuuden varmistamiseksi.
Harmony
Värien tulisi toimia yhdessä yhtenäisen visuaalisen kokemuksen luomiseksi.
Värikontrastin tarkistusohjelma
Testaa väriyhdistelmiä varmistaaksesi, että ne täyttävät tekstin luettavuutta koskevat WCAG:n saavutettavuusstandardit.
Tekstin väri
Taustan väri
Kontrasti
WCAG-standardit
Kaikki ovat neroja. Mutta jos arvioit kalan sen kyvyn perusteella kiivetä puuhun, se elää koko elämänsä uskomalla, että se on tyhmä.