Pretvorba barv
#f1e9ff
Blue Chalk
Različice
Namen tega razdelka je natančno ustvariti odtenke (dodana čista bela) in sence (dodana čista črna) izbrane barve v 10% korakih.
Nasvet za profesionalce: Uporabi sence za hover stanja in sence, odtenke za poudarke in ozadja.
Sence
Temnejše različice, ustvarjene z dodajanjem črne k osnovni barvi.
Odtenki
Svetlejše različice, ustvarjene z dodajanjem bele k osnovni barvi.
Pogosti primeri uporabe
- • Stanja UI komponent (hover, aktivno, onemogočeno)
- • Ustvarjanje globine s sencami in poudarki
- • Izgradnja doslednih barvnih sistemov
Nasvet za oblikovanje sistema
Te različice tvorijo osnovo za usklajeno barvno paleto. Izvozi jih, da ohraniš doslednost v celotnem projektu.
Barvne kombinacije
Vsaka harmonija ima svoje razpoloženje. Uporabi harmonije za iskanje barvnih kombinacij, ki dobro delujejo skupaj.
Kako uporabiti
Klikni na katero koli barvo, da kopiraš njeno hex vrednost. Te kombinacije so matematično dokazano ustvarjajo vizualno harmonijo.
Zakaj je pomembno
Barvne harmonije ustvarjajo ravnovesje in vzbujajo specifična čustva v tvojih dizajnih.
Komplement
Barva in njeno nasprotje na barvnem krogu, +180 stopinj odtenka. Visok kontrast.
Razdeljeni komplement
Barva in dve sosednji njenemu komplementu, +/-30 stopinj odtenka od vrednosti nasproti glavni barvi. Drzno kot neposreden komplement, a bolj vsestransko.
Triadična
Tri barve enakomerno razporejene po barvnem krogu, vsaka 120 stopinj odtenka narazen. Najbolje je, da ena barva prevladuje, druge pa se uporabljajo kot poudarki.
Analogna
Tri barve z enako svetlostjo in nasičenostjo z odtenki, ki so sosednji na barvnem krogu, 30 stopinj narazen. Gladki prehodi.
Monokromatska
Tri barve z enakim odtenkom in svetlostjo +/-50%. Nežno in prefinjeno.
Tetradična
Dva kompleta komplementarnih barv, ločena za 60 stopinj barvnega odtenka.
Načela barvne teorije
Ravnovesje
Uporabi eno dominantno barvo, podpri z sekundarno in poudari zmerno.
Kontrast
Zagotovi zadosten kontrast za berljivost in dostopnost.
Harmonija
Barve naj delujejo skupaj za ustvarjanje enotne vizualne izkušnje.
Preverjalnik kontrasta barv
Preizkusi barvne kombinacije, da zagotoviš, da ustrezajo WCAG standardom dostopnosti za berljivost besedila.
Barva besedila
Barva ozadja
Kontrast
WCAG standardi
Napredni preverjevalnik kontrasta
Natančno prilagajanje s drsniki, več predogledi in več
Vsakdo je genij. Ampak če sodiš ribo po njeni sposobnosti plezanja na drevo, bo celo življenje verjela, da je neumna.