CodeKitHubHvad er dette værktøj?
Farver på nettet skrives i flere ækvivalente formater, som alle er defineret af CSS Color-specifikationen på MDN. HEX (#4f46e5) er den kompakte form, der bruges overalt i CSS og ved designoverdragelser. RGB (rgb(79, 70, 229)) angiver de røde, grønne og blå komponenter direkte, hvilket kode ofte har brug for. HSL (hsl(243, 75%, 59%)) beskriver farvetone, mætning og lyshed — det mest intuitive format til at justere en farve, f.eks. gøre den mørkere eller mindre mættet.
De beskriver alle den samme farve; dette værktøj konverterer nøjagtigt mellem dem og viser en forhåndsvisning, så du kan bekræfte, at det er den farve, du mente.
Hvorfor bruge det?
- Accepterer ethvert format som input — HEX (3 eller 6 cifre), RGB eller HSL — og giver alle formater ud.
- Live forhåndsvisningsprøve, så du ser farven, ikke kun tallene.
- Visuel farvevælger, når du hellere vil vælge med øjet.
- Kopiér med ét klik pr. format, klar til CSS eller kode.
- Gratis, øjeblikkeligt, ingen upload.
Sådan bruger du det
- Skriv eller indsæt en farve: #4f46e5, rgb(79, 70, 229) eller hsl(243, 75%, 59%) fungerer alle.
- Eller klik på farvevælgeren og vælg visuelt.
- Læs alle tre formater i resultaterne, og tjek forhåndsvisningsprøven.
- Klik på "Kopiér" ud for det format, du har brug for.
Eksempel
Input
#4f46e5Output
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tre notationer, én identisk farve.
Hvilket format bør du bruge?
Alle tre beskriver nøjagtigt den samme farve — valget handler om, hvilket der er nemmest at arbejde med til opgaven, ikke om nøjagtighed.
| Format | Bedst til | Hvorfor |
|---|---|---|
| HEX (#4f46e5) | CSS, designoverdragelser, hurtig kopiér-indsæt | Hurtigst at skrive og indsætte; det universelle format i designværktøjer som Figma. |
| RGB (rgb(79,70,229)) | Kode, der manipulerer kanaler direkte, canvas-/billedarbejde | Matcher, hvordan grafik-API'er og billedpixeldata faktisk gemmer farve. |
| HSL (hsl(243,75%,59%)) | Justering af en farve — lysere, mørkere, mere/mindre mættet | Lyshed og mætning er separate tal, du kan justere direkte, i modsætning til HEX/RGB, hvor hver kanal skifter. |
Almindelige anvendelser
- At vælge en farve visuelt i et designværktøj og derefter konvertere den til den nøjagtige HEX- eller RGB-værdi, der kræves i CSS eller kode.
- At generere et sæt beslægtede nuancer (lysere/mørkere varianter) ved at konvertere til HSL, justere lysheden og konvertere tilbage.
- At matche en brandfarve på tværs af forskellige værktøjer, der hver forventer et andet format — en logofil i RGB, en styleguide i HEX, en CSS-variabel, der kræver HSL til theming.
- At verificere, at en farve hentet fra et screenshot eller en designfil (ofte angivet som RGB) matcher HEX-værdien i et stylesheet.
Ofte stillede spørgsmål
Hvornår bør jeg bruge HSL i stedet for HEX eller RGB?
Når du vil ræsonnere om en farve. At gøre en farve 10 % mørkere i HSL betyder at sænke lysheden med 10 point; i HEX eller RGB skal du genberegne alle kanaler. Designsystemer definerer ofte paletter i HSL af netop denne grund.
Understøtter værktøjet 3-cifret HEX som #fff?
Ja. #fff er en forkortelse for #ffffff — hvert ciffer fordobles. Begge former accepteres, og output viser den fulde 6-cifrede form.
Hvad med alpha (gennemsigtighed)?
Dette værktøj konverterer uigennemsigtige farver (RGB/HSL-værdierne). Har du brug for gennemsigtighed, tilføjer du selv alpha: rgba(79, 70, 229, 0.5) eller #4f46e580 — selve farvedelen forbliver den samme.
Hvorfor afviger mine HSL-værdier med 1 fra et andet værktøj?
Afrunding. HSL↔RGB-konvertering giver decimalværdier, og forskellige værktøjer runder forskelligt. En forskel på ±1 i farvetone eller procent er usynlig og normal.
Understøttes farvenavne som 'red'?
Ikke i første fase — værktøjet fokuserer på de tre numeriske formater, som udviklere oftest konverterer mellem. Indtast farvens HEX-, RGB- eller HSL-værdi, eller vælg den visuelt med vælgeren.
Hvornår bør jeg bruge HEX, RGB eller HSL?
Hvis du har brug for gennemsigtighed, brug 8-cifret HEX (#RRGGBBAA) eller rgba() — 6-cifret HEX har ingen alpha-kanal. Vil du have lysere eller mørkere varianter af samme farve, er HSL nemmest: hold farvetone og mætning fast, og ændr kun lyshedstallet. Til almindelig kopiér-indsæt i CSS eller designværktøjer er 6-cifret HEX stadig den mest universelt accepterede form.