Färgkonvertering
#e24826
≈ Cinnabar
Variationer
Syftet med detta avsnitt är att exakt producera nyanser (rent vitt tillsatt) och skuggor (rent svart tillsatt) av den valda färgen i steg om 10%.
Proffstips: Använd nyanser för svävartillstånd och skuggor, toningar för högdagrar och bakgrunder.
Nyanser
Mörkare varianter skapas genom att lägga till svart till din basfärg.
Toningar
Ljusare variationer skapas genom att lägga till vitt till din basfärg.
Vanliga användningsfall
- • UI-komponentens tillstånd (svävande, aktiv, inaktiverad)
- • Skapa djup med hjälp av skuggor och högdagrar
- • Skapa konsekventa färgsystem
Design System Tips
Dessa variationer utgör grunden för en sammanhängande färgpalett. Exportera dem för att upprätthålla enhetlighet i hela projektet.
Färgkombinationer
Varje harmoni har sin egen stämning. Använd harmonier för att brainstorma fram färgkombinationer som fungerar bra tillsammans.
Hur man använder
Klicka på en färg 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 framkallar specifika känslor i din design.
Komplettering
En färg och dess motsats i färghjulet, +180 grader i nyans. Hög kontrast.
Delad-komplementär
En färg och två intilliggande komplement, +/-30 grader i nyans från värdet mittemot huvudfärgen. Djärvt som ett rakt komplement, men mer mångsidigt.
Triadisk
Tre färger jämnt fördelade längs färgcirkeln, med 120 graders nyans mellan varje. Det ä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 ligger intill varandra på färghjulet, 30 grader från varandra. Mjuka övergångar.
Enfärgad
Tre färger med samma nyans med luminansvärden +/-50 %. Subtil och raffinerad.
Tetradisk
Två uppsättningar komplementfärger, separerade med 60 grader nyans.
Principer för färgteori
Balans
Använd en dominerande färg, stöd med en sekundär och accentuera sparsamt.
Kontrast
Säkerställ tillräcklig kontrast för läsbarhet och tillgänglighet.
Harmoni
Färgerna ska fungera tillsammans för att skapa en enhetlig visuell upplevelse.
Kontroll av färgkontrast
Testa färgkombinationer för att se till 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 och mer
Alla är genier. Men om du bedö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.