Färgkonvertering
#a3e3ed
Blizzard Blue
Variationer
Syftet med denna sektion är att noggrant producera nyanser (rent vitt tillagt) och skuggor (rent svart tillagt) av din valda färg i 10%-steg.
Proffstips: Använd skuggor för hover-tillstånd och skuggor, nyanser för highlights och bakgrunder.
Skuggor
Mörkare variationer skapade genom att lägga till svart till din basfärg.
Nyanser
Ljusa variationer skapade genom att lägga till vitt till din basfärg.
Vanliga användningsområden
- • UI-komponenttillstånd (hover, aktiv, inaktiverad)
- • Skapa djup med skuggor och highlights
- • Bygga konsekventa färgsystem
Designsystemtips
Dessa variationer utgör grunden för en sammanhängande färgpalett. Exportera dem för att behålla konsekvens i hela ditt projekt.
Färgkombinationer
Varje harmoni har sin egen stämning. Använd harmonier för att brainstorma färgkombinationer som fungerar bra tillsammans.
Hur man använder
Klicka på vilken färg som helst för att kopiera dess hex-värde. Dessa kombinationer är matematiskt bevisade för att skapa visuell harmoni.
Varför det är viktigt
Färgharmonier skapar balans och väcker specifika känslor i dina designer.
Komplement
En färg och dess motsats på färghjulet, +180 grader av nyans. Hög kontrast.
Delat komplement
En färg och två intill dess komplement, +/-30 grader av nyans från värdet mittemot huvudfärgen. Djärv som ett rakt komplement, men mer mångsidig.
Triadisk
Tre färger jämnt fördelade längs färghjulet, var och en 120 grader av nyans isär. Bäst att låta en färg dominera och använda de andra som accenter.
Analog
Tre färger med samma luminans och mättnad med nyanser som är intill varandra på färghjulet, 30 grader isär. Mjuka övergångar.
Monokromatisk
Tre färger med samma nyans med luminansvärden +/-50%. Subtil och förfinad.
Tetradisk
Två uppsättningar av komplementfärger, separerade med 60 graders nyans.
Färgteoriprinciper
Balans
Använd en dominerande färg, stöd med sekundära och accentuera sparsamt.
Kontrast
Säkerställ tillräcklig kontrast för läsbarhet och tillgänglighet.
Harmoni
Färger bör samverka för att skapa en enhetlig visuell upplevelse.
Färgkontrastkontroll
Testa färgkombinationer för att säkerställa att de uppfyller WCAG:s tillgänglighetsstandarder för textläsbarhet.
Textfärg
Bakgrundsfärg
Kontrast
WCAG-standarder
Avancerad kontrastkontroll
Finjustera med reglage, flera förhandsvisningar & mer
Alla är ett geni. Men om du dömer en fisk efter dess förmåga att klättra i träd, kommer den att leva hela sitt liv i tron att den är dum.