CodeKitHubHva er dette verktøyet?
Farger på nettet skrives i flere likeverdige formater, alle definert av CSS Color-spesifikasjonen på MDN. HEX (#4f46e5) er den kompakte formen som brukes overalt i CSS og designoverleveringer. RGB (rgb(79, 70, 229)) angir de røde, grønne og blå komponentene direkte, noe kode ofte trenger. HSL (hsl(243, 75%, 59%)) beskriver fargetone, metning og lyshet — det mest intuitive formatet når du skal justere en farge, for eksempel gjøre den mørkere eller mindre mettet.
Alle tre beskriver nøyaktig samme farge; verktøyet konverterer mellom dem uten avrundingstap og viser en forhåndsvisning slik at du kan bekrefte at det er fargen du mente.
Hvorfor bruke det?
- Godtar alle formater som input — HEX (3 eller 6 sifre), RGB eller HSL — og gir alle formater tilbake.
- Live forhåndsvisning så du ser fargen, ikke bare tall.
- Visuell fargevelger når du heller vil velge med øyet.
- Kopiering med ett klikk for hvert format, klart for CSS eller kode.
- Gratis, umiddelbart, ingen opplasting.
Slik bruker du det
- Skriv eller lim inn en farge: #4f46e5, rgb(79, 70, 229) eller hsl(243, 75%, 59%) fungerer alle.
- Eller klikk på fargevelgeren og velg visuelt.
- Les av alle tre formatene i resultatet og sjekk forhåndsvisningen.
- Klikk «Kopier» ved siden av formatet du trenger.
Eksempel
Inndata
#4f46e5Resultat
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tre notasjoner, én identisk farge.
Hvilket format bør du bruke?
Alle tre beskriver nøyaktig samme farge — valget handler om hva som er enklest å jobbe med for oppgaven, ikke om nøyaktighet.
| Format | Best for | Hvorfor |
|---|---|---|
| HEX (#4f46e5) | CSS, designoverleveringer, rask kopiering | Kortest å skrive og lime inn; det universelle formatet i designverktøy som Figma. |
| RGB (rgb(79,70,229)) | Kode som håndterer kanaler direkte, canvas-/bildearbeid | Matcher hvordan grafikk-API-er og bildepikseldata faktisk lagrer farge. |
| HSL (hsl(243,75%,59%)) | Justere en farge — lysere, mørkere, mer/mindre mettet | Lyshet og metning er egne tall du kan justere direkte, i motsetning til HEX/RGB hvor alle kanaler endres samtidig. |
Vanlige bruksområder
- Velge en farge visuelt i et designverktøy, og deretter konvertere den til nøyaktig HEX- eller RGB-verdi du trenger i CSS eller kode.
- Generere et sett med relaterte nyanser (lysere/mørkere varianter) ved å konvertere til HSL, justere lysheten, og konvertere tilbake.
- Matche en merkevarefarge på tvers av ulike verktøy som hver forventer et annet format — en logofil i RGB, en stilguide i HEX, en CSS-variabel som trenger HSL for temavalg.
- Bekrefte at en farge hentet fra et skjermbilde eller en designfil (ofte gitt som RGB) samsvarer med HEX-verdien i et stilark.
Ofte stilte spørsmål
Når bør jeg bruke HSL i stedet for HEX eller RGB?
Når du vil resonnere rundt en farge. Å gjøre en farge 10 % mørkere i HSL betyr bare å senke lysheten med 10 poeng; i HEX eller RGB må du regne om alle kanalene på nytt. Designsystemer definerer ofte paletter i HSL av nettopp denne grunnen.
Støtter verktøyet 3-sifret HEX som #fff?
Ja. #fff er en forkortelse for #ffffff — hvert siffer dobles. Begge formene godtas, og resultatet vises alltid i full 6-sifret form.
Hva med alfa (gjennomsiktighet)?
Dette verktøyet konverterer ugjennomsiktige farger (RGB/HSL-verdiene). Trenger du gjennomsiktighet, legger du til alfa selv: rgba(79, 70, 229, 0.5) eller #4f46e580 — selve fargedelen forblir uendret.
Hvorfor avviker HSL-verdiene mine med 1 fra et annet verktøy?
Avrunding. Konvertering mellom HSL og RGB gir desimalverdier, og ulike verktøy runder av forskjellig. Et avvik på ±1 i fargetone eller prosent er usynlig for øyet og helt normalt.
Støttes fargenavn som «red»?
Ikke i fase 1 — verktøyet fokuserer på de tre numeriske formatene utviklere konverterer mest. Skriv inn fargens HEX-, RGB- eller HSL-verdi, eller velg den visuelt med fargevelgeren.
Når bør jeg bruke HEX, RGB eller HSL?
Trenger du gjennomsiktighet, bruk 8-sifret HEX (#RRGGBBAA) eller rgba() — 6-sifret HEX har ingen alfakanal. Vil du ha lysere eller mørkere varianter av samme farge, er HSL enklest: behold fargetone og metning uendret og juster bare lyshetstallet. For ren kopiering inn i CSS eller designverktøy er 6-sifret HEX fortsatt den mest universelt aksepterte formen.