Fargekonvertering
#ca4e4e
≈ Chestnut Rose
Variasjoner
Formålet med denne delen er å nøyaktig produsere fargetoner (rent hvitt lagt til) og nyanser (rent svart lagt til) av den valgte fargen i trinn på 10 %.
Profftips: Bruk nyanser for svevetilstander og skygger, fargetoner for høylys og bakgrunner.
Nyanser
Mørkere variasjoner laget ved å legge til svart i basisfargen din.
Farger
Lysere variasjoner laget ved å legge til hvitt i basisfargen din.
Vanlige brukstilfeller
- • Status for brukergrensesnittkomponenter (hold musepekeren over, aktiv, deaktivert)
- • Skape dybde med skygger og høylys
- • Bygge konsistente fargesystemer
Tips for designsystem
Disse variasjonene danner grunnlaget for en helhetlig fargepalett. Eksporter dem for å opprettholde konsistens på tvers av hele prosjektet.
Fargekombinasjoner
Hver harmoni har sin egen stemning. Bruk harmonier til å brainstorme fargekombinasjoner som fungerer godt sammen.
Slik bruker du
Klikk på en hvilken som helst farge for å kopiere dens heksadesimale verdi. Disse kombinasjonene er matematisk bevist å skape visuell harmoni.
Hvorfor det er viktig
Fargeharmonier skaper balanse og vekker spesifikke følelser i designene dine.
Komplement
En farge og dens motsetning på fargesirkelen, +180 grader fargetone. Høy kontrast.
Splitt-komplementær
En farge og to ved siden av komplementet, +/-30 graders fargetone fra verdien motsatt av hovedfargen. Dristig som et direkte komplement, men mer allsidig.
Triadisk
Tre farger jevnt fordelt langs fargesirkelen, hver med 120 graders fargetone fra hverandre. Det er best å la én farge dominere og bruke de andre som aksenter.
Analog
Tre farger med samme lysstyrke og metning med nyanser som ligger ved siden av hverandre på fargehjulet, 30 grader fra hverandre. Jevne overganger.
Monokromatisk
Tre farger med samme nyanse med luminansverdier på +/- 50 %. Subtil og raffinert.
Tetradisk
To sett med komplementærfarger, atskilt med 60 grader fargetone.
Prinsipper for fargeteori
Balansere
Bruk én dominerende farge, støtt med sekundærfarge, og aksent sparsomt.
Kontrast
Sørg for tilstrekkelig kontrast for lesbarhet og tilgjengelighet.
Harmoni
Farger bør fungere sammen for å skape en enhetlig visuell opplevelse.
Fargekontrastkontroll
Test fargekombinasjoner for å sikre at de oppfyller WCAGs tilgjengelighetsstandarder for tekstlesbarhet.
Tekstfarge
Bakgrunnsfarge
Kontrast
WCAG-standarder
Alle er et geni. Men hvis du dømmer en fisk etter dens evne til å klatre i et tre, vil den leve hele livet ved å tro at den er dum.