Konvertering af farver
#ca4e4e
≈ Chestnut Rose
Variationer
Formålet med denne sektion er at fremstille nøjagtige toner (ren hvid tilsat) og nuancer (ren sort tilsat) af din valgte farve i trin på 10 %.
Et godt råd: Brug nuancer til svævetilstande og skygger, farvetoner til højdepunkter og baggrunde.
Nuancer
Mørkere variationer skabes ved at tilføje sort til din basisfarve.
Farvetoner
Lysere variationer skabes ved at tilføje hvid til din basisfarve.
Almindelige brugsscenarier
- • UI-komponenters tilstand (hover, aktiv, deaktiveret)
- • Skab dybde med skygger og højlys
- • Opbygning af konsistente farvesystemer
Tip til designsystem
Disse variationer danner grundlaget for en sammenhængende farvepalet. Eksporter dem for at bevare konsistensen i hele dit projekt.
Farvekombinationer
Hver harmoni har sin egen stemning. Brug harmonier til at brainstorme farvekombinationer, der fungerer godt sammen.
Hvordan man bruger
Klik på en farve for at kopiere dens hex-værdi. Det er matematisk bevist, at disse kombinationer skaber visuel harmoni.
Hvorfor det er vigtigt
Farveharmonier skaber balance og fremkalder specifikke følelser i dine designs.
Komplement
En farve og dens modsætning på farvehjulet, +180 grader af nuance. Høj kontrast.
Split-komplementær
En farve og to ved siden af dens komplement, +/-30 grader af nuance fra værdien modsat hovedfarven. Fedt som et lige komplement, men mere alsidigt.
Triadisk
Tre farver fordelt jævnt langs farvehjulet, hver med 120 graders forskel i nuance. Det er bedst at lade én farve dominere og bruge de andre som accenter.
Analogt
Tre farver med samme luminans og mætning med nuancer, der ligger ved siden af hinanden på farvehjulet, 30 grader fra hinanden. Jævne overgange.
Monokromatisk
Tre farver i samme nuance med luminansværdier +/-50%. Subtilt og raffineret.
Tetradisk
To sæt komplementærfarver, adskilt af 60 graders nuance.
Principper for farveteori
Balance
Brug en dominerende farve, understøt med sekundær, og accentuer sparsomt.
Kontrast
Sørg for tilstrækkelig kontrast til læsbarhed og tilgængelighed.
Harmoni
Farver skal arbejde sammen for at skabe en samlet visuel oplevelse.
Kontrol af farvekontrast
Test farvekombinationer for at sikre, at de opfylder WCAG-tilgængelighedsstandarderne for tekstlæsbarhed.
Tekstfarve
Baggrundsfarve
Kontrast
WCAG-standarder
Alle er genier. Men hvis du bedømmer en fisk ud fra dens evne til at klatre i et træ, vil den leve hele sit liv i den tro, at den er dum.