Farvevælger og farvehjul

Vælg en farve på hjulet, finjustér den på mætnings- og lysstyrke-fladen, og aflæs den i alle de formater, dit projekt bruger, fra #RRGGBB til oklch(). Værktøjet klarer også det, andre farvevælgere springer over: tre hjulgeometrier, inklusive det traditionelle malerhjul RYB, harmonier der bygger en palet for dig, en alfakanal og eksport af hele paletten med ét klik som CSS-variabler, SCSS eller JSON. Alt beregnes i din browser.

RYB eller RGB? Tre farvehjul i stedet for ét

Vælgeren Tilstand (hjul) ændrer, hvordan farvetonerne er fordelt på hjulet:

• HSV og HSL er digitale hjul. Farvetonerne ligger, som skærmens lys blander dem. De adskiller sig på den firkantede flade: i HSV er det lyseste hjørne den rene farvetone, mens HSL placerer rene farvetoner midt i lysstyrken med hvidt ovenover.
• RYB (maler) ordner farvetoner, som malere lærer dem: rød, gul og blå som primærfarver, med orange, grøn og lilla imellem (RYB-farvemodellen på Wikipedia, engelsk). Forskellen mærkes især i harmonierne. På RYB-hjulet er komplementærfarven til rød grøn, og komplementærfarven til blå er orange, de klassiske pigmentpar. Det digitale hjul parrer i stedet rød med cyan. Har en “komplementær” palet fra en almindelig farvevælger nogensinde set forkert ud, er det derfor.

Farveharmonier: en palet, der bygger sig selv

Vælg en regel under Farveharmoni. Hjulet markerer de matchende farver, og under det vises en færdig palet:

• Komplementær: én modsatliggende farve. Den stærkeste kontrast, god til en enkelt accent ved siden af din hovedfarve.
• Split-komplementær: de to naboer til komplementærfarven. Næsten lige så meget kontrast, men lettere at balancere.
• Triadisk: tre farvetoner jævnt fordelt på hjulet. Levende og stabilt, når én dominerer og de to andre bruges sparsomt.
• Tetradisk (kvadrat): fire farvetoner. Rige skemaer til illustrationer og grafer, svære at balancere i en apps grænseflade.
• Analog: de nærmeste naboer. En rolig kombination til baggrunde og overgange.
• Monokrom: én farvetone i flere lysstyrkeniveauer. Det sikreste valg til knap-tilstande (hover, aktiv, deaktiveret).

Kopiér hele paletten med ét klik i det format, du vælger: ren HEX, RGB, HSL, OKLCH, klar-til-indsætning CSS custom properties (--color-1: …), SCSS-variabler eller JSON til kode. Vil du tjekke, om paletten stadig holder kontrast for personer, der har svært ved at skelne farvetoner, kan du tage et screenshot og konvertere det til gråtoner.

Konverter HEX, RGB, HSL, OKLCH og CMYK: indsæt hvad som helst, få alt

Inputfelterne accepterer stort set enhver farvenotation: #f80, #ff8800, ottecifret hex med alfa, rgb() og rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 og navngivne CSS-farver som rebeccapurple. Uanset hvad du indtaster, får du syv sammenhørende outputs: HEX, RGB, HSL, HSV, LCH, OKLCH og CMYK, hver med sin egen kopiknap.

Skyderen Uigennemsigtighed (alfa) under forhåndsvisningen skifter outputtene til deres transparente former #RRGGBBAA, rgba() og hsla(). Forhåndsvisningen tegnes over et skakternet mønster, så du straks kan se gennemsigtigheden.

Nærmeste Tailwind CSS-token til enhver farve

To chips under forhåndsvisningen navngiver farven: den nærmeste navngivne CSS-farve (praktisk til hurtige prototyper) og det nærmeste Tailwind-token, for eksempel orange-500. Sådan bliver du i dit designsystem i stedet for at opfinde nye værdier på stedet. Klik på en chip for at kopiere den.

Det løser det spørgsmål, der dukker op ved enhver overlevering af et design: designeren har sendt en hex-kode, hvilken Tailwind-klasse svarer bedst til den? Matchet beregnes mod Tailwind CSS 4’s standardpalet (se Tailwind-dokumentationen, engelsk), så du kan indsætte tokenet direkte i et klassenavn.

Hvilket farveformat skal du bruge?

Format	Fulde navn	Hvornår bruges det
HEX	Hexadecimal	Standardvalget på nettet. Kort, understøttet overalt, nem at kopiere. Otte cifre tilføjer gennemsigtighed.
RGB	Red, Green, Blue	Sådan tænker skærme. Tre lyskanaler fra 0 til 255. Formatet de fleste API’er og canvas-kode forventer.
HSL	Hue, Saturation, Lightness	Til justering efter øjemål. “Lidt lysere” eller “mindre mættet” betyder at ændre ét tal.
HSV	Hue, Saturation, Value	Grafiske programmer. Modellen bag farvevælgerne i Photoshop og GIMP.
LCH	Lightness, Chroma, Hue	Perceptuelt ensartet. Ens numeriske trin ser ud som ens visuelle trin, hvilket HSL kun lader som om.
OKLCH	OK Lightness, Chroma, Hue	Det moderne CSS-valg. Retter de farvetoneskift i blå nuancer, som plager LCH. Understøttes af alle nuværende browsere og velegnet til designtokens.
CMYK	Cyan, Magenta, Yellow, Key	Vejledning til print. En tilnærmet omregning til dialog med trykkeriet, de endelige værdier afgøres af dets farveprofil.

Hvorfor OKLCH er mere perceptuelt ensartet end ældre modeller, forklarer Björn Ottosson, der designede Oklab-rummet, i sin oprindelige artikel (engelsk). Syntaks og browserstøtte er samlet på MDN (engelsk). Hvordan printmodellen fungerer, beskriver Wikipedia om CMYK.

Detaljer, der sparer tid

• Historikken gemmer sig selv. De seneste 24 farver overlever en genindlæsning af siden. De ligger kun i din browsers lager og bliver aldrig sendt nogen steder.
• Eyedropper. I browsere med EyeDropper-API’et (Chrome og Edge) kan du vælge en farve hvor som helst på skærmen, også uden for browservinduet. Skal du bruge farven fra et foto eller en logofil, så brug den online farvepipette.
• Tastaturstyring. Både hjulet og mætnings- og lysstyrke-fladen reagerer på piletaster, så du kan finjustere en farve i små trin.
• Forudindstillinger giver dig de gængse basisfarver, når du bare har brug for et hurtigt udgangspunkt.

Ofte stillede spørgsmål

Hvordan konverterer jeg OKLCH til HEX?

Indsæt en oklch()-værdi i OKLCH-feltet, og alle andre outputs, HEX inklusive, opdateres med det samme. Det virker også omvendt: indtast en HEX-kode, og aflæs den tilsvarende oklch(). Ét forbehold: OKLCH kan beskrive farver uden for sRGB-området, og de bliver klippet til det, sRGB kan vise. En meget mættet oklch() vil derfor ikke se ens ud som sin HEX-udgave på en skærm med bredt farverum.

Kan jeg bruge oklch() i produktions-CSS?

Ja. Alle nuværende versioner af Chrome, Edge, Firefox og Safari understøtter oklch(), og det er blevet en populær notation til designtokens (Tailwind CSS 4 definerer hele sin palet med den). Til meget gamle browsere kan du sætte en HEX-fallback på linjen før. Dette værktøj giver dig begge værdier.

Hvorfor ændrer harmonierne sig, når jeg skifter til RYB-hjulet?

Fordi det, der er "modsat", afhænger af, hvordan farvetonerne er fordelt rundt på cirklen. RYB-hjulet fordeler pigmenternes primærfarver jævnt, så komplementærparrene svarer til det, malere kender: rød og grøn, blå og orange, gul og lilla. HSV- og HSL-hjulene fordeler farvetoner efter, hvordan lys blandes, og parrer derfor rød med cyan. Ingen af delene er forkerte: RYB følger den klassiske kunstundervisning, HSV og HSL følger det, skærme gør.

Kan jeg stole på CMYK-værdierne til print?

Betragt dem som en vejledning. Den reelle omregning til print afhænger af trykkeriets ICC-profil, papir og blæk. Samme RGB-farve ser forskellig ud på coated og uncoated papir. Værdierne her beregnes med standardformlen, som bringer dig tæt på, men den endelige korrektur er trykkeriets ansvar.

Hvor er eyedropper-knappen i Firefox eller Safari?

Den er bevidst skjult. EyeDropper-API'et (MDN, engelsk), som knappen bygger på, findes indtil videre kun i Chromium-baserede browsere (Chrome, Edge, Opera). Alle værktøjets øvrige funktioner virker overalt, det er kun farvevalg fra skærmen, der mangler. Skal du bruge en farve fra et billede, så brug den online farvepipette, som virker i alle browsere.

Er min farvehistorik privat?

Ja. Historikken ligger i din browsers localStorage på din enhed. Intet af det, du vælger, indsætter eller kopierer, bliver sendt nogen steder. Hele værktøjet kører som JavaScript i browseren, hvilket du kan efterprøve under fanen Netværk i udviklerværktøjerne.