Färgkonvertering
#565758
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.
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.
Tekniska format
Utforska avancerade färgrumsrepresentationer och professionella färgmodeller som används inom videoproduktion, fotografi, vetenskapliga applikationer och färghanteringssystem. Dessa tekniska format ger exakta färgspecifikationer för specialiserade industrier och applikationer.
Praktiska format
Konvertera färger till praktiska format för verkliga applikationer inklusive trycksimulering, LED-skärmar, terminalutmatning och dataenkodning. Dessa format hjälper dig att implementera färger över olika medier, plattformar och fysiska enheter.
Färganalys
Analysera färgegenskaper med avancerade mätvärden inklusive spektralsammansättning, färgrenthet, metamerieffekter och perceptuella egenskaper. Dessa verktyg ger djupgående insikter i färgbeteende och utseende under olika visningsförhållanden.
Blindhetssimulator
Kontrollera hur en färg uppfattas av personer med olika typer av färgblindhet för att skapa mer tillgängliga designer. Att förstå färguppfattning hjälper till att säkerställa att ditt innehåll är tillgängligt för alla.
Kreativa aspekter
Utforska de konstnärliga och psykologiska dimensionerna av färger inklusive säsongsassociationer, emotionell påverkan, naturliga förekomster, historiska pigment och färgblandningsrecept för kreativa tillämpningar.