Generator barvnih kod in Picker

Ustvarite barvne kode, različice, harmonije in preverite kontrastna razmerja.

Pretvorba barv

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Različice

Namen tega oddelka je natančno izdelati odtenke (dodana čista bela) in odtenke (dodana čista črna) izbrane barve v 10-odstotnih korakih.

Nasvet za strokovnjake: Odtenke uporabljajte za stanja preklopa in sence, odtenke pa za poudarke in ozadja.

Odtenki

Temnejše različice ustvarite tako, da osnovni barvi dodate črno.

Odtenki

Svetlejše različice ustvarite tako, da osnovni barvi dodate belo.

Pogosti primeri uporabe

  • Stanja komponent uporabniškega vmesnika (namestitev, aktivna, onemogočena)
  • Ustvarjanje globine s sencami in svetlimi točkami
  • Vzpostavitev doslednih barvnih sistemov

Nasvet za oblikovanje sistema

Te različice so temelj skladne barvne palete. Izvozite jih, da ohranite doslednost v celotnem projektu.

Kombinacije barv

Vsaka harmonija ima svoje razpoloženje. S pomočjo harmonij si lahko zamislite barvne kombinacije, ki se dobro ujemajo.

Kako uporabljati

Kliknite na katero koli barvo, da kopirate njeno šestnajstiško vrednost. Te kombinacije so matematično dokazane in ustvarjajo vizualno harmonijo.

Zakaj je to pomembno

Barvne harmonije ustvarjajo ravnovesje in v vaših modelih vzbujajo določena čustva.

Dopolnitev

Barva in njeno nasprotje na barvnem kolesu, +180 stopinj odtenka. Visok kontrast.

#ca4e4e
Najboljši za: Visoko učinkoviti dizajni, CTA, logotipi

Razdeljeno-komplementarno

Barva in dve sosednji barvi, ki jo dopolnjujeta, +/-30 stopinj odtenka od vrednosti, ki je nasprotna glavni barvi. Drzno kot ravno dopolnilo, vendar bolj vsestransko.

Najboljši za: Živahne, a uravnotežene postavitve

Triadični

Tri barve, ki so enakomerno razporejene po barvnem kolesu, vsaka v razmaku 120 stopinj odtenka. Najbolje je, da ena barva prevladuje, druge pa uporabite kot poudarke.

Najboljši za: Igrivi, energični vzorci

Analogično

Tri barve enake svetilnosti in nasičenosti z odtenki, ki so sosednji na barvnem krogu, 30 stopinj narazen. Gladki prehodi.

Najboljši za: Vmesniki, ki jih navdihuje narava in pomirjajo

Enobarvni

Tri barve istega odtenka z vrednostmi svetilnosti +/-50 %. Subtilno in prefinjeno.

Najboljši za: Minimalistični, prefinjeni modeli

Tetradični

Dva niza komplementarnih barv, ki sta med seboj ločena za 60 stopinj odtenka.

Najboljši za: Bogate in raznolike barvne sheme

Načela barvne teorije

Bilanca

Uporabite eno prevladujočo barvo, podprite jo s sekundarno barvo in jo le malo poudarite.

Kontrast

Zagotovite zadosten kontrast za berljivost in dostopnost.

Harmonija

Barve morajo delovati skupaj in ustvariti enotno vizualno izkušnjo.

Preverjanje barvnega kontrasta

Preizkusite barvne kombinacije in preverite, ali izpolnjujejo standarde dostopnosti WCAG za berljivost besedila.

Barva besedila
Barva ozadja
Kontrast
Fail
Majhno besedilo
✖︎
Veliko besedilo
✖︎
Standardi WCAG
AA:Najmanjše kontrastno razmerje 4,5:1 za običajno besedilo in 3:1 za veliko besedilo. Zahteva se za večino spletnih mest.
AAA:Izboljšano kontrastno razmerje 7:1 za običajno besedilo in 4,5:1 za veliko besedilo. Priporočljivo za optimalno dostopnost.

Vsak je genij. Če pa ribo ocenjujete po tem, ali je sposobna splezati na drevo, bo vse življenje živela v prepričanju, da je neumna.

- Albert Einstein

Tehnični formati

Praktični formati

Analiza barv

Simulator slepote

Ustvarjalni vidiki