Färgkodsgenerator för HEX, RGB och HSL
Färgkodsgeneratorn hjälper dig att välja en webbfärg och se den i flera format samtidigt. Du kan använda färgväljaren eller skriva en HEX-kod i formatet #RRGGBB. Sidan visar motsvarande HEX, RGB, HSL, eventuell CSS-namnmatchning och en komplementfärg. Varje resultat kan kopieras separat. Verktyget är praktiskt för CSS, designsystem, varumärkesmanualer, prototyper, presentationer och felsökning när samma färg behöver anges i olika program eller kodbaser.
HEX, RGB och HSL
HEX är den vanligaste kortformen i CSS och består av tre hexadecimala färgkanaler: rött, grönt och blått. RGB visar samma värden som heltal mellan 0 och 255, vilket passar när du arbetar med JavaScript, canvas eller äldre designverktyg. HSL beskriver färgen som hue, saturation och lightness: färgvinkel 0-360 grader, mättnad i procent och ljushet i procent. HSL är ofta enklare när du vill skapa ljusare, mörkare eller mer dämpade varianter av samma grundfärg.
Hur sidan räknar
När en HEX-kod är giltig läser verktyget de tre kanalparen med parseInt(..., 16). Därefter räknas RGB om till HSL med normaliserade kanalvärden mellan 0 och 1. Komplementfärgen tas fram genom att rotera HSL-färgvinkeln 180 grader och sedan konvertera tillbaka till HEX. CSS-namn visas bara när den exakta HEX-koden finns i sidans tabell över namngivna färger; annars visas ett streck. Det betyder att två visuellt lika färger inte nödvändigtvis får samma namn.
Tillgänglighet och kontrast
En snygg färg är inte automatiskt läsbar. När färgen ska användas för text, knappar, diagram eller statusmarkeringar bör du kontrollera kontrasten mot bakgrunden. WCAG AA kräver normalt minst 4,5:1 för brödtext och 3:1 för stor text. Använd inte enbart färg för att förmedla fel, framgång eller kategori; kombinera med text, ikon eller form. Komplementfärgen kan ge hög visuell kontrast, men den är inte en garanti för läsbar text.
Arbetsflöde
För designarbete kan du börja med en basfärg, kopiera HEX till CSS och använda HSL-värdet för att skapa hoverlägen eller bakgrundstoner. För utveckling är RGB användbart när du behöver lägga till alfa i rgba() eller arbeta med canvas. Spara alltid den slutliga färgkoden i ett gemensamt designsystem eller en variabel, annars riskerar små manuella variationer att spridas över projektet.
Dokumentera färgbeslut
När en färg är vald bör du spara både HEX och användningsområde, till exempel primär knapp, länk, bakgrund eller varning. Det minskar risken att samma blå, gröna eller röda nyans får flera nästan identiska varianter i projektet.
Kontrollera färgen i flera format
HEX, RGB och HSL beskriver samma färg på olika sätt. Använd HEX för CSS och designöverlämning, RGB när transparens och skärmvisning är viktig och HSL när du vill justera nyans, mättnad och ljushet systematiskt.
Kommentarer