Färgomvandlare

Konvertera färger mellan HEX, RGB och HSL — med harmonier och nyanser.

#4285F4

← Klicka för att välja färg

HEX

RGB

HSL

H217°

S89%

L61%

🎨 CSS-koder

🎭 Färgharmonier

Original

Komplementär

Analog 1

Analog 2

Triad 1

Triad 2

🌓 Nyanser (mörkare → ljusare)

Hur fungerar färgomvandlaren?

Färger på webben representeras i olika format. De vanligaste är HEX, RGB och HSL. Vår omvandlare låter dig konvertera fritt mellan alla format och visuellt välja färger med sliders och color picker.

🎨 Färgformat

HEX — Hexadecimalt format (#RRGGBB). Det vanligaste i CSS. Varje par (00-FF) representerar röd, grön och blå.
RGB — Röd, Grön, Blå (0-255 per kanal). Direkt representation av färgens ljuskomponenter.
HSL — Hue (nyans 0-360°), Saturation (mättnad 0-100%), Lightness (ljushet 0-100%). Mest intuitivt för mänskligt färgval.

🎭 Färgharmonier

Komplementär — Motsatt på färghjulet (H + 180°). Skapar kontrast.
Analog — Intilliggande på färghjulet (H ± 30°). Harmonisk känsla.
Triadisk — Tre jämnt fördelade färger (H + 120°, H + 240°). Balanserad variation.

💡 Tips

Klicka på en CSS-kod för att kopiera den direkt
Klicka på en harmonifärg för att byta till den
Använd nyans-raden för att snabbt hitta ljusare/mörkare varianter
HSL är bäst för att justera ljushet och mättnad utan att ändra grundfärgen

Vanliga frågor om färgomvandlare

Vad är skillnaden mellan HEX, RGB och HSL?

HEX (#RRGGBB) är hexadecimalt, mest vanligt i CSS. RGB anger röd/grön/blå som tal 0-255. HSL anger nyans (0-360°), mättnad och ljushet (0-100%). HSL är mest intuitivt att justera visuellt.

Hur konverterar jag HEX till RGB?

Varje HEX-par (t.ex. FF) konverteras från hexadecimalt till decimalt. #4285F4 → R=66 (42 hex), G=133 (85 hex), B=244 (F4 hex). Vår omvandlare gör det automatiskt.

Vad är komplementärfärger?

Komplementärfärger ligger mittemot varandra på färghjulet (180° skillnad i HSL). De skapar stark kontrast och används ofta i design för att skapa visuellt intressanta kombinationer.

Vilken färgmodell ska jag använda i CSS?

HEX är vanligast och stöds överallt. Använd RGBA om du behöver transparens. HSL är bäst när du vill skapa färgvarianter (ljusare/mörkare) av samma nyans — ändra bara L-värdet.

Hur fungerar färgomvandlaren?

🎨 Färgformat

HEX — Hexadecimalt format (#RRGGBB). Det vanligaste i CSS. Varje par (00-FF) representerar röd, grön och blå.

RGB — Röd, Grön, Blå (0-255 per kanal). Direkt representation av färgens ljuskomponenter.

HSL — Hue (nyans 0-360°), Saturation (mättnad 0-100%), Lightness (ljushet 0-100%). Mest intuitivt för mänskligt färgval.

🎭 Färgharmonier

Komplementär — Motsatt på färghjulet (H + 180°). Skapar kontrast.

Analog — Intilliggande på färghjulet (H ± 30°). Harmonisk känsla.

Triadisk — Tre jämnt fördelade färger (H + 120°, H + 240°). Balanserad variation.

💡 Tips

Klicka på en CSS-kod för att kopiera den direkt

Klicka på en harmonifärg för att byta till den

Använd nyans-raden för att snabbt hitta ljusare/mörkare varianter

HSL är bäst för att justera ljushet och mättnad utan att ändra grundfärgen

Vanliga frågor om färgomvandlare

Vad är skillnaden mellan HEX, RGB och HSL?

HEX (#RRGGBB) är hexadecimalt, mest vanligt i CSS. RGB anger röd/grön/blå som tal 0-255. HSL anger nyans (0-360°), mättnad och ljushet (0-100%). HSL är mest intuitivt att justera visuellt.

Hur konverterar jag HEX till RGB?

Varje HEX-par (t.ex. FF) konverteras från hexadecimalt till decimalt. #4285F4 → R=66 (42 hex), G=133 (85 hex), B=244 (F4 hex). Vår omvandlare gör det automatiskt.

Vad är komplementärfärger?

Komplementärfärger ligger mittemot varandra på färghjulet (180° skillnad i HSL). De skapar stark kontrast och används ofta i design för att skapa visuellt intressanta kombinationer.

Vilken färgmodell ska jag använda i CSS?

HEX är vanligast och stöds överallt. Använd RGBA om du behöver transparens. HSL är bäst när du vill skapa färgvarianter (ljusare/mörkare) av samma nyans — ändra bara L-värdet.