acento.io
Utvecklarverktyg

Färgkonverterare

Konvertera HEX, RGB, HSL och CMYK på ett ställe – 100 % klientbaserat, ingen data lämnar din webbläsare.

Av Carlos Suárez , Systemingenjör
Senast uppdaterad:

Vad färgkonverterare gör

Den här svenska sidan låter dig konvertera färgkoder mellan HEX, RGB, HSL och CMYK utan att installera något. Klistra in ett hex-värde som #1e90ff, ett RGB-värde som rgb(30,144,255) eller ett HSL-värde så räknar verktyget om alla format direkt. En live-förhandsgranskning visar färgen medan du skriver. Sverige antog standarden SS-EN 301 549 för digital tillgänglighet, vilket kräver Unicode-stöd i offentliga tjänster – ett skäl till att korrekta färgvärden i CSS spelar roll för kontrastregler. 100 % klientbaserat – dina data lämnar aldrig din webbläsare. Inga uppladdningar, ingen spårning, inga serverloggar.

Funktioner

  • HEX till RGB och tillbaka. Ange ett hexadecimalt färgvärde och få motsvarande RGB-tal direkt. Fungerar med förkortad form som #fff och fullt format som #ffffff.
  • HSL-konvertering. Konvertera till och från HSL där nyansen anges i grader (0–360) och mättnad samt ljushet i procent. Praktiskt när du justerar tillgängliga UI-färger i CSS.
  • CMYK-approximation. Verktyget beräknar CMYK från RGB med ren matematik. Observera att CMYK på skärm är en approximation – exakt tryck-CMYK kräver en ICC-profil och beror på bläck och papper.
  • Inbyggd färgväljare. Webbläsarens native färgväljare låter dig peka på en färg och få alla format beräknade omedelbart utan att skriva ett enda tecken.
  • Kopiera med ett klick. Varje format har en kopiera-knapp så att du snabbt kan klistra in värdet i CSS, Figma eller ett annat verktyg utan att markera texten manuellt.
  • Inga beroenden. Konverteringen sker med ren matematik direkt i webbläsaren, precis som MDN Web Crypto API är ett webbläsarinternt API – ingen extern kod behöver laddas.

Så här använder du färgkonverterare

Skriv eller klistra in ett färgvärde i inmatningsfältet, välj en färg med väljaren eller ange ett känt CSS-värde.

  1. Ange ett färgvärde. Skriv ett HEX-värde som #e63946, ett RGB-värde som rgb(230,57,70) eller ett HSL-värde som hsl(355,76%,56%) i fältet.
  2. Kontrollera förhandsvisningen. En färgruta uppdateras direkt och visar hur färgen ser ut. Alla format – HEX, RGB, HSL och CMYK – visas samtidigt.
  3. Kopiera önskat format. Klicka på kopiera-knappen bredvid det format du behöver. Värdet hamnar direkt i urklipp, redo att klistras in.
  4. Använd färgväljaren. Klicka på färgväljar-ikonen för att öppna webbläsarens inbyggda picker och välj en färg visuellt istället för att skriva ett värde.

Vanliga användningsområden

  • Designers som förbereder tryckfiler. Konvertera ett varumärkes HEX-färg till CMYK för att ge tryckteamet ett utgångsvärde. Kom ihåg att exakt matchning kräver ICC-profil och korrekturläsning mot fysiskt papper.
  • Frontendutvecklare med CSS-variabler. Plocka ut HSL-värden från en palett och bygg CSS-variabler där du enkelt kan justera ljushet för hover-tillstånd utan att byta hela färgkoden. Om du också arbetar med talbaser kan [Talbas Konverterare](/sv/number-base-converter/) hjälpa till med hexadecimala tal i andra sammanhang.
  • Tillgänglighetsarbete. Använd HSL-konverteringen för att snabbt höja eller sänka ljusheten på en färg tills kontrastkvoten mot bakgrunden uppfyller WCAG-krav.
  • Inspektera färger från skärmdumpar. Plocka en färg med färgväljaren direkt från ett designmockup och exportera alla format till ditt kodprojekt på sekunder.
  • Generera CSS från en palett. Kör igenom en lista med HEX-koder för att få RGB- och HSL-ekvivalenter att använda i ett designsystem eller en stilguide.

Vanliga frågor

Är CMYK-värdet exakt för tryck?

Nej. CMYK beräknas från RGB-värdet med en matematisk formel och är en approximation. Exakt färgmatchning i tryck kräver en ICC-profil anpassad till bläck, papper och tryckmaskin. Använd värdet som ett riktmärke, inte som en slutgiltig trychspecifikation.

Varför ändras HEX-värdet något efter en runda HEX→HSL→HEX?

HSL arbetar med decimaltal internt och HEX med heltal. Vid avrundning kan slutvärdet skilja sig med 1–2 steg, till exempel #1e90ff kan bli #1e8fff. Skillnaden är visuellt omärkbar men förklarar varför exakt round-trip inte alltid håller.

Lagras mina färger någonstans?

Nej. All beräkning sker lokalt i din webbläsare. Ingen färgdata skickas till någon server, ingen spårning sker och inga cookies sätts. Du kan använda verktyget offline när sidan väl är laddad.

Vad betyder HSL-värdena?

H är nyansen i grader på ett färghjul (0–360), S är mättnaden i procent och L är ljusheten i procent. En vanlig miss är att blanda ihop grader och procent, eller att förvänta sig ett 0–255-intervall som i RGB.

Kan jag använda RGB-värden i grafik-API:er?

CSS använder heltal 0–255 i rgb(), men många grafik-API:er och shadervarianter förväntar sig normaliserade värden mellan 0,0 och 1,0. Dividera varje kanal med 255 för att konvertera. Se Web Crypto API W3C Recommendation som ett exempel på hur webbstandarder specificerar exakta talformat för att undvika den typen av missförstånd.

Fungerar verktyget med förkortade HEX-koder?

Ja. Verktyget accepterar #fff, #abc och liknande tresiffriga förkortningar och expanderar dem automatiskt till sexsiffrigt format innan konverteringen sker.