Konvertera en färg mellan RGB, HSL och hexadecimal

Att arbeta med färg på webben innebär att man hela tiden växlar mellan flera notationer. En färgkonverterare undviker manuella fel och låter dig omedelbart växla från ett format till ett annat beroende på användningsområde. Varje format har sina styrkor, och att veta vilket man ska använda är en av frontendutvecklarens grundreflexer.

Här är de typiska användningsfallen som motiverar en färgkonvertering:

• RGB är inbyggt i CSS och JavaScript, läsbart för människor för att förstå en dominerande ton (kanalerna röd, grön, blå på 0-255).
• HSL gör det trivialt att ändra en nyans: det räcker att justera mättnaden eller ljusheten utan att räkna om varje kanal.
• HEX är det kanoniska formatet för kopiera och klistra: sex tecken, kompatibelt överallt, perfekt för Figma- eller Sketch-mockups och stilguider.
• Konverteringarna HEX till RGB, RGB till HEX, HEX till HSL och deras motsatser är de vanligaste operationerna i CSS och JavaScript.

RGB och RGBA (Red, Green, Blue, Alpha)

Varje kanal kodas som ett heltal mellan 0 och 255, vilket motsvarar en byte per komponent och ger 16 777 216 möjliga färger. Alfakanalen i RGBA går från 0 (transparent) till 1 (opak) och styr genomskinligheten.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX och HEX8 (hexadecimal notation)

Mycket spritt kompakt format: #RRGGBB på sex tecken, där varje par representerar en RGB-kanal i bas 16. Varianten #RRGGBBAA på åtta tecken lägger till alfakanalen i hexadecimal (00 transparent, FF opak). Den korta notationen #RGB finns också: #F53 motsvarar #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL och HSLA (Hue, Saturation, Lightness, Alpha)

HSL beskriver färg perceptuellt. Hue är en vinkel på färghjulet (0 till 360°), Saturation och Lightness är procentvärden. Det är formatet att föredra för att generera varianter: ljusare en hovrad knapp, mätta ner ett inaktiverat tillstånd, skapa en sammanhållen palett genom att enbart variera nyansen.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Andra befintliga format

CMYK (Cyan, Magenta, Yellow, Key) används vid tryck: det beskriver en färg genom subtraktion av bläck och är inte relevant för skärm. OKLCH och LAB är perceptuellt enhetliga färgrymder som dök upp i CSS Color Level 4; de ger bättre kontroll över upplevd ljushet. Detta verktyg fokuserar på konverteringar mellan RGB, HEX och HSL, som täcker den absoluta majoriteten av webbehov.

HEX till RGB innebär att man parsar strängen i par av tecken och tolkar varje par som ett heltal i bas 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB till HEX är den omvända operationen: varje kanal konverteras till bas 16, fylls ut till två tecken och sätts ihop.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB till HSL är mer algoritmiskt. Man normaliserar kanalerna mellan 0 och 1, räknar ut min och max för att härleda ljusheten, sedan mättnaden, sedan nyansen utifrån den dominerande kanalen. Den fullständiga formeln finns dokumenterad i CSS Color Module Level 3.

Verktyget fungerar i båda riktningarna mellan RGB, HEX och HSL. För att utföra en konvertering:

1. Välj indataformat: RGB, HEX eller HSL.
2. Ange värdet (till exempel #1400B6, rgb(20, 0, 182) eller hsl(247, 100%, 36%)).
3. Starta konverteringen: motsvarigheterna i de två andra formaten visas omedelbart.
4. Kopiera önskat resultat via den dedikerade knappen och klistra in det i din stilmall eller mockup.

Beräkningen utförs på klientsidan i webbläsaren, ingen data skickas till en server.

• Webbdesign och CSS: hämta en HEX från en mockup och få motsvarande HSL för att generera ett hover- eller active-tillstånd utan att avvika från nyansen.
• Visuell identitet och palett: variera en primärfärg i flera varianter (ljus, mörk, dämpad) genom att leka med HSL-ljushet eller mättnad.
• Illustration och grafisk design: överföra en skärmfärg (RGB) till en hexadecimal kod som ska skickas till ett program eller en kund.
• Tillgänglighet: konvertera till RGB för att sedan räkna ut ett kontrastförhållande (WCAG AA kräver 4.5:1 för normal text) mot bakgrundsfärgen.
• CSS-variabler och preprocessorer: mata designtokens i en SASS-fil eller ett Tailwind-tema från en enda referensfärg.

Några fullständiga konverteringar som illustrerar motsvarigheten mellan de tre formaten:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Med alfakanal:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Vad är skillnaden mellan HEX och HEX8?

Klassisk HEX kodar tre RGB-kanaler på sex tecken (#RRGGBB). HEX8 lägger till två tecken för alfakanalen (#RRGGBBAA), vilket gör att man kan hantera transparens i en enda sträng. #1400B6FF och #1400B6 ger visuellt samma färg, opak.

Ska man föredra HSL eller RGB i CSS?

Båda ger samma rendering. HSL är mer uttrycksfullt för att generera en sammanhållen palett eller tillståndsvarianter (hover, focus), eftersom man bara ändrar en enda perceptuell parameter. RGB förblir praktiskt när man arbetar med data från en canvas eller en sensor.

Varför ger min HEX en annan nyans än förväntat?

Tre vanliga orsaker: förväxling mellan kort #RGB och lång #RRGGBB (tecknen dupliceras, inte sätts ihop), kopieringsfel på ett tecken eller visning på en okalibrerad skärm. Kontrollera även att din CSS inte lägger en föräldraopacitet ovanpå som ändrar slutresultatet.

Vad används alfakanalen i RGBA och HSLA till?

Alfakanalen styr färgens opacitet, från 0 (helt transparent) till 1 (helt opak). Den är användbar för overlays, skuggor, inaktiverade tillstånd eller överlägg på bilder. Till skillnad från CSS-egenskapen opacity påverkar RGBA och HSLA endast den valda färgen och inte dess barn.

Kan man konvertera en färg utan precisionsförlust?

Mellan RGB och HEX är konverteringen exakt, båda formaten kodar samma information på 24 bitar. Konvertering till HSL innebär avrundning av nyans, mättnad och ljushet; en rundtur RGB > HSL > RGB kan därför ge ett värde som avviker med en enhet på vissa kanaler.

Varför använda en online-konverterare istället för en egen funktion?

För ett enstaka test, en palettprototyp eller en snabb kontroll av HEX-motsvarigheten till en HSL-färg hämtad från en mockup är en online-konverterare omedelbar. För ett återkommande programmatiskt behov är ett bibliotek som color, chroma-js eller tinycolor2 mer lämpligt.