Färgformat Förklarade: HEX, RGB och HSL
Snabbt svar
HEX (#RRGGBB) och RGB (0–255 per kanal) kodar direkt röda, gröna och blå intensiteter. HSL (nyans 0–360°, mättnad/ljusstyrka 0–100%) kodar färg på ett sätt som matchar mänsklig perception. Konvertera mellan alla tre med vår Color Converter.
Introduktion
Webbfärger specificeras i tre dominerande format: HEX (base-16 röd, grön, blå), RGB (decimal 0–255 per kanal) och HSL (nyans, mättnad, ljusstyrka). Alla tre beskriver samma sRGB-färgrymd men exponerar olika axlar: HEX och RGB är hårdvaru-orienterade, medan HSL är mänskligt-orienterad. Modern CSS stöder också alpha via HEX8, rgba() och hsla().
Steg för steg
-
Förstå HEX notation
HEX skriver varje kanal som ett tvåsiffrigt bas-16 nummer: #RRGGBB. 00 är avstängd, FF (255) är full intensitet. #FF0000 är rent rött, #00FF00 rent grönt, #0000FF rent blått, #FFFFFF vitt, #000000 svart. En fyrsiffrig stenografi #RGB expanderar till #RRGGBB och #RRGGBBAA lägger till alfa (t.ex. #FF573380 är 50 % alfa).
-
Förstå RGB notation
RGB använder decimal 0—55 per kanal: rgb(255, 87, 51) är samma som #FF5733. Funktionen rgba() lägger till en 0— alpha: rgba(255, 87, 51, 0,5) är 50 % ogenomskinlig. RGB motsvarar HEX — det är bara decimal istället för bas-16.
-
Förstå HSL notation
HSL använder nyans (0—60° på färghjulet: 0=röd, 120=grön, 240=blå), mättnad (0% = grå, 100% = helfärg) och ljushet (0% = svart, 50% = normal, 100% = vit). hsl(11, 100%, 60%) är en levande orange. HSL gör det trivialt att bygga nyanser (höja ljushet) och nyanser (lägre ljushet) av samma nyans.
-
Konvertera mellan format
HEX→RGB: analysera varje par som bas-16. RGB→HEX: konvertera varje kanal till 2-siffrig bas-16. RGB→HSL: beräkna max/min för normaliserade kanaler, ljushet = (max+min)/2, mättnad beror på ljushet, nyans är vinkeln för den dominerande kanalen. Använd vår färgkonverterare för att göra allt detta direkt.
-
Välj rätt format för uppgiften
Använd HEX för kompakthet i designtokens och tillgångar. Använd RGB/rgba() när du behöver interpolera eller animera kanaler. Använd HSL/HSLA när du genererar paletter, nyanser eller temavarianter — att justera ljusstyrkan med 10 % är mycket lättare än att resonera om RGB deltas.
Exempel
Ren röd i alla tre formaten
Input: #FF0000
Produktion: rgb(255, 0, 0) = hsl(0, 100%, 50%)
En livlig orange
Input: #FF5733
Produktion: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Vitt och svart
Input: #FFFFFF och #000000
Produktion: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Bygg en 5-stegs nyans från en HSL nyans
Input: hsl(210, 70%, 50%) —variera ljusstyrka 30/40/50/60/70%
Produktion: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 —en sammanhängande blå palett
Vanliga problem
- Blanda 3-siffrigt och 6-siffrigt HEX: #F00 och #FF0000 har samma färg, men vissa parsers accepterar bara en form. Normalisera till 6-siffrig kod för att undvika överraskningar.
- Att glömma att HSL ljushet 50 % inte är "halv ljusstyrka": vid 100 % mättnad är 50 % ljushet den rena nyansen; över 50 % nyanser den mot vitt, under 50 % nyanser den mot svart. '50% grå' är hsl(0, 0%, 50%).
- Alfakanalförvirring: #RRGGBBAA (HEX8) stöds i moderna webbläsare men inte i äldre; rgba()/hsla() har bredare stöd. Testa alltid målmiljön.
- Färgrymdsfel överensstämmer: HEX, RGB och HSL beskriver alla sRGB. Om du konverterar till/från P3 eller Lab/OKLCH (används av moderna skärmar), ger en naiv kanalkopia fel färger — använd ett korrekt färgbibliotek.
Tips
- Använd HSL när du designar en palett: välj en nyans, variera sedan ljushet (t.ex. 30/50/70%) och mättnad (t.ex. 60/80/100%) för att skapa sammanhängande nyanser och nyanser.
- För tillgänglighet kontrollera kontrastförhållandet mot bakgrunden — WCAG AA kräver 4,5:1 för normal text, AAA 7:1. Använd vår färgomvandlare för att beräkna relativ luminans och kontrast.
- Föredrar modern CSS color-mix() eller oklch() för perceptuellt enhetlig interpolation —RGB interpolation kan passera genom leriga gråtoner när man blandar komplementära färger.
- När du genererar gradienter, konvertera slutpunkter till samma format först — att blanda HEX och HSL i en enda gradientdeklaration kan ge oväntade mittpunkter.