Farvevælger Online
Vælg en farve på hjulet, finjustér den på mætnings-lærredet, og aflæs den i alle de formater, dit projekt taler – fra #RRGGBB til oklch(). Denne farvevælger klarer også de dele, andre værktøjer springer over: tre hjulgeometrier, inklusive malerens RYB-hjul, harmoniovertegninger der bygger en palet for dig, en alfakanal og eksport af hele paletten med ét klik som CSS-variabler, SCSS eller JSON. Alt sammen beregnet lokalt i din browser.
Tre hjul, ikke ét
Vælgeren Tilstand (hjul) ændrer selve hjulets geometri:
- HSV og HSL er de digitale hjul – farvetoner fordelt, som RGB-skærme blander lys. De adskiller sig i, hvordan den firkantede flade opfører sig: HSV’s lyseste hjørne er den rene farvetone, HSL placerer rene farvetoner ved 50 % lysstyrke med hvidt ovenover.
- RYB (maler) ordner farvetoner, sådan som kunstnere lærte det: rød, gul og blå som primærfarver, med orange, grøn og lilla imellem. Den praktiske værdi viser sig i harmonierne – på RYB-hjulet er komplementærfarven til rød grøn, og komplementærfarven til blå er orange, de klassiske pigmentpar, mens et digitalt hjul parrer rød med cyan. Hvis en “komplementær” palet fra en almindelig farvevælger nogensinde har set forkert ud for dit øje, er det derfor.
Harmonier, der bygger paletten for dig
Vælg en regel under Farveharmoni, og hjulet markerer de matchende farver, som samtidig fremstår som en klar palet:
- Komplementær – én modsatliggende farve. Den stærkeste kontrast; brug den til en enkelt accent mod en dominerende brandfarve.
- Split-komplementær – de to naboer til komplementærfarven. Næsten lige så meget kontrast, meget lettere at balancere.
- Triadisk – tre jævnt fordelte farvetoner. Livlig, men stabil; lad én dominere, og brug de to andre sparsomt.
- Tetradisk (kvadrat) – fire farvetoner. Rige skemaer til illustrationer og datavisualisering; svær at balancere i UI-arbejde.
- Analog – de nærmeste naboer. Lav spænding, godt til baggrunde og gradienter.
- Monokrom – én farvetone i trinvis lysstyrke. Det sikreste valg til interface-tilstande (hover, aktiv, deaktiveret).
Palet-panelet kopierer hele sættet med ét klik, i det format du vælger: almindelig HEX, RGB, HSL, OKLCH, klar-til-indsætning CSS custom properties (--color-1: …), SCSS-variabler eller JSON til brug i kode.
Indsæt hvad som helst, aflæs alt
Inputfelterne accepterer stort set enhver farvenotation, du kaster efter dem: #f80, #ff8800, 8-cifret hex med alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, eller CSS-farvenavne som rebeccapurple. Uanset hvad der kommer ind, kommer syv synkroniserede outputs tilbage: HEX, RGB, HSL, HSV, LCH, OKLCH og CMYK, hver med sin egen kopiknap.
To hjælpechips under forhåndsvisningen navngiver farven for dig: den nærmeste navngivne CSS-farve (praktisk til hurtige prototyper og til at tale om farver) og det nærmeste Tailwind-token (f.eks. orange-500), så du kan blive inden for dit designsystem i stedet for at opfinde værdier på stedet.
Træk i alfa-skyderen under forhåndsvisningen, og outputtene skifter til deres transparente former – #RRGGBBAA, rgba(), hsla() – med forhåndsvisningen vist over et skakternet mønster, så du kan bedømme gennemsigtigheden.
Hvilket format skal du bruge?
| Format | Fulde navn | Hvornår bruges det? |
|---|---|---|
| HEX | Hexadecimal | Standarden på nettet. Kompakt, universelt understøttet, nem at kopiere. 8 cifre tilføjer alfa. |
| RGB | Rød, Grøn, Blå | Sådan tænker skærme. Tre lyskanaler, 0–255. Formatet de fleste API’er og canvas-kode forventer. |
| HSL | Farvetone, Mætning, Lysstyrke | Til mennesker, der redigerer manuelt. “Lidt lysere” eller “mindre mættet” er blot ét tal, der ændres. |
| HSV | Farvetone, Mætning, Værdi | Grafisk software. Modellen bag farvevælgerne i Photoshop og GIMP. |
| LCH | Lyshed, Farvemæthed, Farvetone | Perceptuelt ensartet. Ens numeriske trin ser ud som ens visuelle trin – det, HSL foregiver at være. |
| OKLCH | OK Lyshed, Farvemæthed, Farvetone | Det moderne CSS-valg. Retter LCH’s farvetoneskift i blåtoner; understøttes i alle nuværende browsere og ideel til designtoken-systemer. |
| CMYK | Cyan, Magenta, Gul, Sort (Key) | Til print. En tilnærmet omregning til dialog med printdesignere – de endelige værdier kommer altid fra printerens farveprofil. |
Små ting, der sparer tid
- Historikken passer sig selv. De sidste 24 farver, du har arbejdet med, overlever en genindlæsning af siden – gemt kun i din browsers lokale lager, aldrig uploadet nogen steder.
- Eyedropper. I browsere med EyeDropper-API’et (Chrome og Edge) kan du plukke en farve fra hvor som helst på din skærm, også uden for browservinduet.
- Tastaturstyring. Hjulet og mætnings-fladen reagerer på piletaster for pixelpræcise justeringer.
- Forudindstillinger dækker de gængse basisfarver, når du bare har brug for et hurtigt udgangspunkt.
Ofte stillede spørgsmål (FAQ)
Er oklch() sikkert at bruge i produktions-CSS?
Ja. Alle nuværende versioner af Chrome, Edge, Firefox og Safari understøtteroklch(), og det er blevet den foretrukne notation til designtokens (Tailwind CSS 4 definerer hele sin palet i den). Til meget gamle browsere kan du levere et HEX-fallback på linjen før – dette værktøj giver dig begge værdier.