Farvekodegenerator og -vælger

Generer farvekoder, variationer, harmonier og tjek kontrastforhold.

Konvertering af farver

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

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.

#ca4e4e
Bedst til: Design, CTA'er og logoer med stor gennemslagskraft

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.

Bedst til: Levende, men afbalancerede layouts

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.

Bedst til: Legende, energiske designs

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.

Bedst til: Naturinspirerede, beroligende grænseflader

Monokromatisk

Tre farver i samme nuance med luminansværdier +/-50%. Subtilt og raffineret.

Bedst til: Minimalistiske, sofistikerede designs

Tetradisk

To sæt komplementærfarver, adskilt af 60 graders nuance.

Bedst til: Rige, forskelligartede farveskemaer

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
Fail
Lille tekst
✖︎
Stor tekst
✖︎
WCAG-standarder
AA:Kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. Påkrævet for de fleste hjemmesider.
AAA:Forbedret kontrastforhold på 7:1 for normal tekst og 4,5:1 for stor tekst. Anbefales for optimal tilgængelighed.

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.

- Albert Einstein

Tekniske formater

Praktiske formater

Farveanalyse

Simulator for blindhed

Kreative aspekter