Värimuunnos
#ff69b4
Muunnelmat
Tämän osion tarkoitus on tuottaa tarkasti valitun värisi sävyjä (lisätty puhdasta valkoista) ja varjostuksia (lisätty puhdasta mustaa) 10% välein.
Ammattilaisen vinkki: Käytä varjostuksia hover-tiloihin ja varjoihin, sävyjä korostuksiin ja taustoihin.
Varjostukset
Tummemmat muunnelmat luodaan lisäämällä mustaa perusväriisi.
Sävyt
Vaaleammat muunnelmat luodaan lisäämällä valkoista perusväriisi.
Yleiset käyttötapaukset
- • Käyttöliittymäkomponenttien tilat (hover, aktiivinen, pois käytöstä)
- • Syvyyden luominen varjoilla ja korostuksilla
- • Yhtenäisten värijärjestelmien rakentaminen
Design System -vinkki
Nämä muunnelmat muodostavat yhtenäisen väripaletin perustan. Vie ne säilyttääksesi johdonmukaisuuden koko projektissasi.
Väriyhdistelmät
Jokaisella harmonia on oma tunnelmansa. Käytä harmonioita ideoidaksesi väriyhdistelmiä, jotka toimivat hyvin yhdessä.
Kuinka käyttää
Klikkaa mitä tahansa väriä kopioidaksesi sen hex-arvon. Nämä yhdistelmät on matemaattisesti todistettu luomaan visuaalista harmoniaa.
Miksi se on tärkeää
Väriharmoniat luovat tasapainoa ja herättävät tiettyjä tunteita suunnittelussasi.
Komplementti
Väri ja sen vastaväri väripyörässä, +180 astetta sävyä. Korkea kontrasti.
Jako-komplementti
Väri ja kaksi sen komplementin viereistä väriä, +/-30 astetta sävyä päävärin vastakkaiselta puolelta. Rohkea kuten suora komplementti, mutta monipuolisempi.
Triadinen
Kolme väriä tasaisesti väripyörällä, jokainen 120 astetta sävyä erillään. Paras antaa yhden värin hallita ja käyttää muita korostuksina.
Analoginen
Kolme väriä, joilla on sama luminanssi ja kylläisyys, ja jotka ovat vierekkäin väripyörällä, 30 astetta erillään. Pehmeät siirtymät.
Monokromaattinen
Kolme väriä, joilla on sama sävy ja luminanssiarvot +/-50%. Hienovarainen ja hienostunut.
Tetradinen
Kaksi sarjaa toisiaan täydentäviä värejä, erotettuna 60 asteen sävyllä.
Väriteorian periaatteet
Tasapaino
Käytä yhtä hallitsevaa väriä, tue toissijaisella ja korosta säästeliäästi.
Kontrasti
Varmista riittävä kontrasti luettavuuden ja saavutettavuuden takaamiseksi.
Harmonia
Värien tulisi toimia yhdessä luodakseen yhtenäisen visuaalisen kokemuksen.
Värikontrastin tarkistin
Testaa värikombinaatioita varmistaaksesi, että ne täyttävät WCAG:n saavutettavuusstandardit tekstin luettavuudelle.
Tekstin väri
Taustaväri
Kontrasti
WCAG-standardit
Edistynyt kontrastintarkistin
Hienosäädä liukusäätimillä, useilla esikatseluilla ja muulla
Jokainen on nero. Mutta jos arvioit kalaa sen kyvystä kiivetä puuhun, se elää koko elämänsä uskoen olevansa tyhmä.