CodeKitHubVad är detta verktyg?
Färger på webben skrivs i flera likvärdiga format, alla definierade av CSS Color-specifikationen på MDN. HEX (#4f46e5) är den kompakta form som används överallt i CSS och designöverlämningar. RGB (rgb(79, 70, 229)) anger de röda, gröna och blå komponenterna direkt, vilket kod ofta behöver. HSL (hsl(243, 75%, 59%)) beskriver nyans, mättnad och ljushet — det mest intuitiva formatet för att justera en färg, som att göra den mörkare eller mindre mättad.
Alla beskriver samma färg; det här verktyget konverterar mellan dem exakt och visar en förhandsvisning så du kan bekräfta att det är färgen du menade.
Varför använda det?
- Tar emot valfritt format — HEX (3 eller 6 siffror), RGB eller HSL — och ger ut alla format.
- Förhandsvisningsprov i realtid så du ser färgen, inte bara siffror.
- Visuell färgväljare när du hellre väljer med ögat.
- Kopiera med ett klick per format, redo för CSS eller kod.
- Gratis, direkt, ingen uppladdning.
Så använder du det
- Skriv eller klistra in en färg: #4f46e5, rgb(79, 70, 229) eller hsl(243, 75%, 59%) fungerar alla.
- Eller klicka på färgväljaren och välj visuellt.
- Läs alla tre formaten i resultatet och kontrollera förhandsvisningsprovet.
- Klicka på "Kopiera" bredvid det format du behöver.
Exempel
Inmatning
#4f46e5Resultat
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tre notationer, en identisk färg.
Vilket format bör du använda?
Alla tre beskriver exakt samma färg — valet handlar om vilket som är enklast att arbeta med för uppgiften, inte noggrannhet.
| Format | Bäst för | Varför |
|---|---|---|
| HEX (#4f46e5) | CSS, designöverlämningar, snabb kopiering-inklistring | Kortast att skriva och klistra in; det universella formatet i designverktyg som Figma. |
| RGB (rgb(79,70,229)) | Kod som manipulerar kanaler direkt, canvas-/bildarbete | Matchar hur grafik-API:er och bildpixeldata faktiskt lagrar färg. |
| HSL (hsl(243,75%,59%)) | Justera en färg — ljusare, mörkare, mer/mindre mättad | Ljushet och mättnad är separata siffror du kan justera direkt, till skillnad från HEX/RGB där varje kanal förskjuts. |
Vanliga användningsfall
- Att välja en färg visuellt i ett designverktyg och sedan konvertera den till exakt det HEX- eller RGB-värde som behövs i CSS eller kod.
- Att generera en uppsättning relaterade nyanser (ljusare/mörkare varianter) genom att konvertera till HSL, justera ljusheten och konvertera tillbaka.
- Att matcha en varumärkesfärg mellan olika verktyg som var och en förväntar sig ett annat format — en logotypfil i RGB, en stilguide i HEX, en CSS-variabel som behöver HSL för temahantering.
- Att verifiera att en färg hämtad från en skärmdump eller designfil (ofta given som RGB) matchar HEX-värdet i ett stilmallsdokument.
Vanliga frågor
När ska jag använda HSL istället för HEX eller RGB?
När du vill resonera kring en färg. Att göra en färg 10 % mörkare i HSL innebär att sänka ljusheten med 10 punkter; i HEX eller RGB skulle du behöva räkna om alla kanaler. Designsystem definierar ofta paletter i HSL av precis den anledningen.
Stöder verktyget 3-siffrig HEX som #fff?
Ja. #fff är en förkortning för #ffffff — varje siffra dubbleras. Båda formerna accepteras och utdatan visar den fullständiga 6-siffriga formen.
Hur är det med alfa (transparens)?
Det här verktyget konverterar opaka färger (RGB/HSL-värdena). Om du behöver transparens lägger du till alfan själv: rgba(79, 70, 229, 0.5) eller #4f46e580 — själva färgdelen förblir densamma.
Varför skiljer sig mina HSL-värden med 1 från ett annat verktyg?
Avrundning. HSL↔RGB-konvertering ger decimalvärden, och verktyg avrundar olika. En skillnad på ±1 i nyans eller procent är osynlig och normal.
Stöds färgnamn som "red"?
Inte i fas 1 — verktyget fokuserar på de tre numeriska format utvecklare konverterar mest. Ange färgens HEX/RGB/HSL-värde, eller välj den visuellt med väljaren.
När ska jag använda HEX, RGB eller HSL?
Om du behöver transparens, använd 8-siffrig HEX (#RRGGBBAA) eller rgba() — 6-siffrig HEX har ingen alfakanal. Om du vill ha ljusare eller mörkare varianter av samma färg är HSL enklast: håll nyans och mättnad fasta och ändra bara ljushetssiffran. För enkel kopiering-inklistring i CSS eller designverktyg förblir 6-siffrig HEX den mest allmänt accepterade formen.