Du fant den perfekte fargen i HEX-format, men designverktøyet du bruker krever RGB. Eller en klient sendte en farge i RGB og du trenger HSL-verdien for CSS-en. Fargeformatkonvertering er en daglig oppgave for designere og utviklere. Fargekonverteringsverktøyet gjør det øyeblikkelig.
Hva du trenger
- En fargeverdi i et format (HEX, RGB, HSL eller andre)
- En nettleser (Chrome, Firefox, Safari eller Edge)
- Ingen konto eller installasjon nødvendig
Trinn-for-trinn-guide
Skriv inn farverdien din
Åpne fargekonverteringsverktøyet. Skriv eller lim inn farverdien din i et format som støttes. Skriv for eksempel #3B82F6 som en HEX-verdi, rgb(59, 130, 246) som RGB, eller hsl(217, 91%, 60%) som HSL. Verktøyet gjenkjenner formatet automatisk.
Se alle formatkonverteringer
Verktøyet viser øyeblikkelig fargen din i alle støttede formater: HEX, RGB, HSL og mer. Du ser en direkteforhåndsvisning av fargen ved siden av alle ekvivalente verdier. Hvis du vil justere fargen, bruk fargevalget for å finjustere den visuelt.
Kopier formatet du trenger
Klikk på kopieringsknappen ved siden av et format for å kopiere verdien til utklippstavlen. Lim inn direkte i CSS-filen, designverktøyet eller der du trenger det. Ingen manuell omskriving nødvendig.
Greit å vite Fargekonverteringsverktøyet kjører helt i nettleseren din. Det fungerer offline når det er lastet, og krever ingen konto eller installasjon.
Forstå fargeformater
Ulike verktøy og kontekster bruker ulike fargeformater. Her er når du bruker hvert:
HEX
Det vanligste formatet på nettet. En HEX-farge starter med # etterfulgt av seks tegn (bokstaver og tall), som #FF5733.
- Brukes i: CSS, HTML, designverktøy (Figma, Sketch, Photoshop)
- Format:
#RRGGBBder hvert par er en heksadesimal verdi fra 00 til FF - Eksempel:
#3B82F6(en mellomblå)
RGB
Beskriver en farge ved hjelp av rød-, grønn- og blåkomponentene, der hver varierer fra 0 til 255.
- Brukes i: CSS (
rgb()-funksjonen), programmeringsspråk, LED-belysning - Format:
rgb(rød, grønn, blå) - Eksempel:
rgb(59, 130, 246)
HSL
Beskriver en farge ved hjelp av Fargetone (0–360 grader på fargehjulet), Metning (0–100 %) og Lyshet (0–100 %).
- Brukes i: CSS (
hsl()-funksjonen), fargeteori, designsystemer - Format:
hsl(fargetone, metning%, lyshet%) - Eksempel:
hsl(217, 91%, 60%)
Tips HSL er det mest intuitive formatet for å justere farger. Vil du ha en lysere nyanse? Øk lyshetsverdien. Vil du ha en mer dempet tone? Reduser metningen. Dette gjør HSL ideelt for å bygge fargesystemer og lage varianter av en basisfarge.
Når du bruker hvilket format
| Situasjon | Anbefalt format |
|---|---|
| Skrive CSS for hånd | HEX (kort og kjent) eller HSL (lett å justere) |
| Designspesifikasjoner | HEX (bransjestdard) |
| Dynamisk fargemanipulering i kode | HSL (lettest å justere programmatisk) |
| Kommunisere farger til klienter | HEX (mest universelt anerkjent) |
| Utskriftsdesign | CMYK (separat fra skjermformater) |
Gå videre med enkeltfarger
Når du har konvertert fargen din, kan det hende du vil utforske relaterte verktøy:
- Gradientgenerator: Lag jevne CSS-gradienter med fargene dine. Skriv inn to eller flere farger og få gradientkoden klar til å lime inn i stilarket ditt.
- Fargepalettgenerator: Generer harmoniske fargepaletter basert på startfargen din. Få komplementære, analoge, triadiske og andre fargekombinasjoner automatisk.
Disse verktøyene fungerer hånd i hånd med fargekonverteringsverktøyet for å hjelpe deg med å bygge et komplett fargesystem for prosjektet ditt.
Viktig Farger kan se forskjellige ut på ulike skjermer på grunn av skjermkalibrering, fargeprofiler og lysstyrkeinnstillinger. Når fargenøyaktighet er kritisk (merkevarebygging, utskriftsdesign), verifiser alltid fargene på det tiltenkte mediet, ikke bare på skjermen din.
Ofte stilte spørsmål
Hva er forskjellen mellom HEX og RGB?
De representerer den samme informasjonen i ulike notasjoner. HEX bruker heksadesimalt (grunntall 16) og RGB bruker desimalt (grunntall 10). #FF0000 og rgb(255, 0, 0) er begge ren rød.
Kan jeg konvertere til CMYK for utskrift? Skjermfargeformater (HEX, RGB, HSL) og utskriftsformater (CMYK) er fundamentalt forskjellige fargemodeller. En matematisk konvertering finnes, men for nøyaktige utskriftsfarger bør du bruke et profesjonelt fargehåndteringsverktøy.
Hva med gjennomsiktighet (alfa)?
HEX støtter alfa med to ekstra tegn (#3B82F680). RGB og HSL støtter det som rgba() og hsla()-funksjoner. Fargekonverteringsverktøyet håndterer disse formatene også.
Neste steg
Med fargene konvertert, prøv gradientgeneratoren for å lage vakre CSS-gradienter, eller bruk fargepalettgeneratoren for å bygge et komplett fargevalg rundt den valgte fargen.