Ingen uppladdning, 100% lokalt, inget konto

Färgkonverterare

Konvertera mellan HEX, RGB, HSL, HSV och CMYK. Liveförhandsvisning. WCAG-kontrastkontroll för tillgänglighet. Ingenting lämnar din webbläsare.

Så fungerar Färgkonverterare

Färgkonverteraren översätter vilken färg som helst mellan HEX, RGB, HSL, HSV och CMYK-format direkt medan du skriver. Den kör också en WCAG-kontrastkontroll mellan två färger du väljer, och visar kontrastförhållandet och AA/AAA-resultat för normal text, stor text och UI-komponenter. Alla beräkningar sker i webbläsaren utan att data skickas någonstans; inget du skriver lämnar din enhet.

Att förstå hur samma färg ser ut i olika färgmodeller är användbart vid designöverlämningar. En designer kan ange en varumärkesfärg som HEX #1A4F8C; en CSS-utvecklare behöver HSL-motsvarigheten för temainställning; ett tryckteam behöver CMYK-uppdelningen. Det här verktyget gör konverteringen i alla riktningar på en gång så att du aldrig behöver köra flera separata konverterare.

Skrivet av Bastien Sulyan

Så här använder du Färgkonverterare, steg för steg

  1. Skriv ett HEX-värde, klicka på ett färgprov eller ange RGB, HSL, HSV eller CMYK-värden i respektive fält.
  2. Alla andra formatrepresentationer uppdateras omedelbart för att visa motsvarande färg.
  3. För en kontrastkontroll, välj en förgrundsfärg och en bakgrundsfärg med de två färgväljarna.
  4. Läs WCAG-kontrastförhållandet och pass/fail-märkena för AA- och AAA-efterlevnadsnivåer.
  5. Kopiera valfritt färgvärde med kopieringsikonen bredvid varje fält.

Vanliga användningsområden

  • En UI-designer konverterar en varumärkes-HEX-kod till HSL för att skriva en CSS-anpassad egenskap för ett temainställningssystem.
  • En webbutvecklare kontrollerar kontrastförhållandet mellan textfärg och bakgrund innan en komponent skickas för att bekräfta WCAG AA-efterlevnad.
  • En tryckerdesigner tar emot en webb-HEX-färg och behöver CMYK-motsvarigheten för att matcha den i en tryckt broschyr.
  • En utvecklare behöver RGB-uppdelningen av en designtoken för att skicka enskilda kanalvärden till en Canvas-ritningsfunktion.

Vanliga frågor

Stöder verktyget alfa (transparens) värden?

Den aktuella konverteraren arbetar med helt ogenomskinliga färger (alfa = 1). HEXA (8-siffrig hex) och RGBA är ännu inte i omfånget. För opacitet, ange alfakanalen i din CSS separat med rgba()- eller oklch()-notationen.

Lagras eller skickas färgerna jag anger någonstans?

Nej. Färgkonvertering är ren aritmetik (kanalomsättning och omfångsskalning) som körs helt i webbläsarens JavaScript-motor. Inget du skriver här når någon server eller extern tjänst.

Vilka WCAG-kontrastnivåer stöder kontrollern?

Verktyget rapporterar mot WCAG 2.1-framgångskriterier: AA kräver ett minsta kontrastförhållande på 4,5:1 för normal text (under 18pt eller 14pt fet) och 3:1 för stor text och UI-komponenter. AAA kräver 7:1 för normal text och 4,5:1 för stor text.

Varför skiljer sig CMYK-värden mellan det här verktyget och professionell designprogramvara?

RGB-till-CMYK-konverteringen det här verktyget utför är en matematisk formel utan en färgprofil. Professionella designprogram tillämpar ICC-färgprofiler som tar hänsyn till bläckpunktsvinst och substratens egenskaper. CMYK-värdena här är användbara för approximation; för produktionstryck, tillämpa alltid din tryckprofil i dedikerad programvara.

Kan jag konvertera ett CSS-färgnamn som 'cornflowerblue' här?

CSS-namngivna färger skrivs inte direkt i konverterarens fält. För att konvertera en namngiven färg, hitta först dess HEX-värde i en CSS-referens (cornflowerblue är #6495ED) och klistra sedan in det HEX i HEX-fältet för att se alla andra format.

Fungerar verktyget offline efter att sidan har laddats?

Ja. Färgkonvertering är aritmetik utan externa beroenden. När sidan finns i din webbläsarcache kan du öppna den utan nätverksanslutning och alla konverteringar fungerar normalt.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla utvecklarverktyg