Farvekonvertering
#f7f5fa
Whisper
Variationer
Formålet med denne sektion er at præcist producere nuancer (rent hvidt tilføjet) og toner (rent sort tilføjet) af din valgte farve i 10% trin.
Pro Tip: Brug toner til hover-tilstande og skygger, nuancer til highlights og baggrunde.
Toner
Mørkere variationer skabt ved at tilføje sort til din basisfarve.
Nuancer
Lysere variationer skabt ved at tilføje hvid til din basisfarve.
Almindelige anvendelsestilfælde
- • UI-komponenttilstande (hover, aktiv, deaktiveret)
- • Skabe dybde med skygger og highlights
- • Bygge konsistente farvesystemer
Designsystem Tip
Disse variationer danner grundlaget for en sammenhængende farvepalette. Eksporter dem for at opretholde konsistens i hele dit projekt.
Farvekombinationer
Hver harmoni har sin egen stemning. Brug harmonier til at brainstorme farvekombinationer, der fungerer godt sammen.
Sådan bruger du
Klik på en hvilken som helst farve for at kopiere dens hex-værdi. Disse kombinationer er matematisk bevist til at skabe visuel harmoni.
Hvorfor det er vigtigt
Farveharmonier skaber balance og fremkalder specifikke følelser i dine designs.
Komplementær
En farve og dens modsatte på farvehjulet, +180 grader af nuance. Høj kontrast.
Split-komplementær
En farve og to tilstødende til dens komplement, +/-30 grader af nuance fra værdien modsat hovedfarven. Fed som en lige komplementær, men mere alsidig.
Triadisk
Tre farver jævnt fordelt langs farvehjulet, hver 120 grader af nuance fra hinanden. Bedst at lade én farve dominere og bruge de andre som accenter.
Analoge
Tre farver med samme luminans og mætning med nuancer, der er tilstødende på farvehjulet, 30 grader fra hinanden. Glidende overgange.
Monokromatisk
Tre farver med samme nuance med luminansværdier +/-50%. Subtilt og raffineret.
Tetradisk
To sæt komplementære farver, adskilt af 60 graders farvetone.
Farveteori principper
Balance
Brug én dominerende farve, støt med sekundære, og brug accenter sparsomt.
Kontrast
Sørg for tilstrækkelig kontrast for læsbarhed og tilgængelighed.
Harmoni
Farverne skal arbejde sammen for at skabe en samlet visuel oplevelse.
Farvekontrastkontrol
Test farvekombinationer for at sikre, at de opfylder WCAG-tilgængelighedsstandarder for tekstlæsbarhed.
Tekstfarve
Baggrundsfarve
Kontrast
WCAG-standarder
Avanceret kontrastkontrol
Finjuster med skyder, flere forhåndsvisninger & mere
Alle er et geni. Men hvis du bedømmer en fisk på dens evne til at klatre i et træ, vil den leve hele sit liv i troen på, at den er dum.