Farvevælger

Hvad Farvevælger gør

Farvevælger hjælper dig med at vælge en præcis farve og læse den samme farve i flere formater. Som color picker viser den den aktive farve visuelt, samtidig med at koderne kan sammenlignes som HEX, RGB, HSL, HSV, OKLCH, CMYK og RGBA. Det gør resultatet brugbart både i CSS, designfiler, dokumentation og små visuelle justeringer, hvor én forkert værdi kan ændre hele udtrykket.

Farvevælger er mest nyttig, når en farve ikke kun skal se rigtig ud, men også kunne afleveres korrekt. Den aktive farve kan kopieres direkte, og de afledte paneler giver et bredere billede af, hvordan farven kan bruges. Varianter kan hjælpe med tints og shades, harmonier kan give forslag til ledsagende farver, og kontrastkontrollen kan vise, om farven bør bruges til tekst, baggrund eller kun som dekorativ accent.

Den synlige brugerflade er bygget til at holde valg og kontrol samlet. Du kan vælge farven i farvefeltet, justere farvetonen, ændre antallet af gemte farver, skifte format i menuen, kopiere den aktuelle værdi, dele et link og eksportere et farvesæt. Farvevælger ændrer ikke formålet med farven for dig; den giver de værdier og kontroller, der gør beslutningen lettere at kontrollere.

Sådan bruger du Farvevælger

1. Vælg en farve i farvefeltet ved at klikke eller trække markøren til det ønskede område.
2. Juster farvetonen, hvis farven skal flyttes mod en anden grundfarve uden at starte forfra.
3. Brug paletkontrollen til at vælge, hvor mange farver du vil gemme og sammenligne i paletstriben.
4. Åbn formatmenuen, og vælg det output du vil arbejde med, for eksempel HEX, RGB, HSL, HSV, OKLCH, CMYK eller RGBA.
5. Kopiér den aktive værdi, når den viste kode matcher det format, du skal bruge i CSS, dokumentation eller et designværktøj.
6. Brug Farvevarianter til at se lysere og mørkere versioner af samme farve.
7. Brug Farveharmonier, Farveblindhed, Farvekonvertering og Kontrastkontrol, når farven skal vurderes i flere sammenhænge før eksport.
8. Brug Eksportér farver, når et samlet farvesæt skal kopieres i et format, der passer til næste trin.

Farveformater du kan sammenligne

En farve kan være den samme visuelt, selv om den skrives på forskellige måder. Det er grunden til, at Farvevælger viser flere formater på én gang. HEX er ofte den korteste værdi til CSS. RGB gør kanalværdierne tydelige. HSL er lettere at læse, når farvetone, mætning og lyshed skal justeres. OKLCH og CMYK kan være nyttige i mere specialiserede design eller konverteringsarbejder, men de bør stadig vurderes i den kontekst, hvor farven skal bruges.

Vælg format efter modtageren af værdien. Hvis en udvikler skal indsætte en farve i CSS, er HEX eller RGB ofte hurtigst. Hvis en designer skal justere lyshed, kan HSL være nemmere at læse. Hvis et farvesystem allerede bruger nyere CSS farver, kan OKLCH være relevant. Farvevælger gør sammenligningen synlig, så formatet vælges bevidst i stedet for tilfældigt.

Brug variationer og harmonier med omtanke

Farvevarianter er nyttige, når én valgt farve skal blive til flere roller. En lysere variant kan fungere som baggrund eller hoverflade, mens en mørkere variant kan fungere som kant, overskrift eller aktiv tilstand. Det er bedre end at gætte en ny farve manuelt, fordi varianterne stadig hænger sammen med den oprindelige farve.

Farveharmonier kan bruges som inspiration til støttende farver, men de bør ikke indsættes ukritisk. En harmonifarve kan se stærk ud i et lille felt og samtidig være for dominerende i en stor brugerflade. Sammenlign derfor harmonierne med den rolle, de skal have: accent, baggrund, ikon, kant, diagramfarve eller dekorativ detalje.

• Brug tints til rolige flader, badges og sekundære baggrunde.
• Brug shades til fokus, kanter, aktive elementer og stærkere tekst.
• Brug harmonier som forslag, ikke som automatisk facit.
• Kontroller altid kontrast, hvis farven skal bruges sammen med tekst.

Kontroller farven før kopiering

En farve kan virke god isoleret og stadig fejle i et layout. Farvevælger giver flere kontroller, der hjælper med at fange den slags problemer før kopiering. Den aktive swatch viser hovedindtrykket, konverteringstabellen viser de tekniske værdier, og kontrastkontrollen viser, hvordan farven klarer sig mod sort eller hvid afhængigt af den konkrete kombination.

Farveblindhedssimuleringen kan også være relevant, når farven skal bære betydning. En statusfarve, en graf eller en knap må ikke kun forstås gennem en farveforskel, der forsvinder for nogle brugere. Brug simuleringen til at opdage farver, der bliver for ens, og brug derefter variationer eller kontrast til at skabe tydeligere adskillelse.

Når en valgt farve skal bruges i CSS

En kopieret farvekode bliver mere holdbar, når den får en rolle i stedet for kun et tal. I CSS kan værdier gemmes som navne som --color-accent, --color-surface, --color-border eller --color-focus. Det gør senere ændringer nemmere, fordi en rolle kan justeres uden at lede efter den samme kode i mange komponenter.

Hvis farven skal bruges på tværs af flere elementer, bør du først beslutte, om den er en hovedfarve, en sekundær accent, en baggrund, en kant eller en tilstandsfarve. Derefter kan du kopiere det format, projektet bruger. Det reducerer risikoen for, at den samme farve gemmes som HEX ét sted, RGB et andet sted og HSL et tredje sted uden klar grund.

Arbejd med farver som roller

En valgt farve bør normalt ikke gemmes som en løs kode uden forklaring. Den bliver lettere at vedligeholde, når den knyttes til en funktion i designet. En accentfarve kan bruges til primære handlinger, en surface farve kan bruges til kort og paneler, og en border farve kan bruges til diskret adskillelse. Den samme HEX værdi kan derfor være teknisk korrekt, men organisatorisk uklar, hvis ingen ved, hvad den skal betyde.

Farvevælger kan hjælpe i denne del af arbejdet, fordi format, varianter og kontrast ligger tæt på hinanden. Når en farve er valgt, kan du vurdere om den bør være hovedaccent, sekundær accent, baggrund, kant, fokusfarve eller kun dekorativ detalje. Brug en lysere variant til store flader og en mørkere variant til elementer, der skal have mere vægt. Det giver et mere stabilt system end at vælge nye, uafhængige farver for hver komponent.

Hvis farven skal bruges i et team, bør du eksportere eller kopiere værdien sammen med en kort rollebeskrivelse. Det forhindrer, at en farve valgt til hover tilstand senere bliver brugt som brødtekst eller diagramværdi. En tydelig rolle er især vigtig, når flere formater vises samtidig, fordi værdierne ellers kan blive blandet uden grund.

Eksport og deling uden formatfejl

Eksport er mest værdifuld, når farvesættet allerede er ryddet op. Før du bruger Eksportér farver, bør du fjerne farver, der kun gentager samme visuelle rolle, og sikre at den aktive palette indeholder de værdier, der faktisk skal videre. En eksport med ti næsten ens farver skaber mere arbejde for modtageren, mens et mindre sæt med tydelige roller er lettere at gennemgå.

Del link kan være nyttigt, når en farve skal kontrolleres af en anden person uden at sende en løs kode i en besked. Brug dog stadig formatmenuen og kopieringsknapperne til den endelige aflevering. Linket hjælper med visuel reference, mens den kopierede værdi er det, der skal ind i CSS, designfilen eller dokumentationen.

Når du eksporterer, bør formatet vælges efter destinationen. HEX passer godt til almindelige webfarver. RGB er nyttigt, når modtageren arbejder med kanaler. HSL er bedre, når næste person skal justere lyshed eller mætning. OKLCH bør kun vælges, når projektet eller værktøjet faktisk forventer moderne farvenotation. På den måde bliver eksporten ikke bare stor, men praktisk.

En sidste praktisk kontrol er at sammenligne den valgte farve med de farver, der allerede findes i projektet. Hvis den nye værdi næsten svarer til en eksisterende accent, kan det være bedre at genbruge den gamle token i stedet for at oprette en ny. Hvis forskellen er tydelig, bør årsagen dokumenteres, for eksempel bedre kontrast, en anden interaktionstilstand eller et nyt visuelt hierarki. På den måde bliver Farvevælger en del af en kontrolleret farvebeslutning og ikke kun en hurtig kopieringshandling.

Typiske fejl at undgå

• At kopiere for tidligt: gennemgå swatch, format og kontrast før værdien bruges i produktion.
• At blande formater uden plan: vælg HEX, RGB eller HSL efter projektets eksisterende mønster.
• At bruge en accent som tekstfarve: en stærk accent kan være dårlig til små bogstaver.
• At stole på én skærm: farver kan opfattes forskelligt afhængigt af lys, panel og nabofarver.
• At ignorere farveblindhed: vigtige tilstande bør også have tekst, ikon, mønster eller tydelig lyshedsforskel.

Hvis den valgte farve skal bruges til tekst eller vigtige UI elementer, kan næste kontrol være Kontrast Checker. Hvis du allerede har RGB kanalværdier og skal aflevere en kompakt kode, kan RGB til HEX bruges til den direkte konvertering.