Color Converter
Konvertera färger mellan HEX-, RGB-, HSL- och HSV-format med en visuell färgväljare
Klicka på färgrutan för att öppna färgväljaren
Eller redigera valfritt värde nedan
Vad är färgkonvertering?
En färgkonverterare översätter ett färgvärde från en notation till en annan — till exempel från ett HEX-triplet (#6366F1) till ett RGB-tupel (99, 102, 241) eller ett HSL-tripel (239, 84 %, 67 %). Samma färg kan även uttryckas som ett HSV-tripel (239, 59 %, 95 %). Varje format kodar samma visuella färg med en annan matematisk modell. Olika verktyg, språk och API:er förväntar sig olika format beroende på sammanhang.
HEX och RGB beskriver båda färg som en blandning av rött, grönt och blått ljus. HEX är en kompakt hexadecimal representation av samma tre kanalvärden (0–255) som RGB anger i decimal. HSL (Hue, Saturation, Lightness) och HSV (Hue, Saturation, Value) omorganiserar samma information i ett cylindriskt koordinatsystem där nyansen är en vinkel på färghjulet (0–360 grader) och mättnad samt ljusstyrka anges i procent. Det gör HSL och HSV mer intuitiva för uppgifter som att skapa ljusare eller mörkare nyanser av samma kulör.
Konvertering mellan dessa format kräver väldefinierad matematik. W3C CSS Color Module Level 4-specifikationen dokumenterar de algoritmer som webbläsare använder för att lösa upp en CSS-färg till ett sRGB-triplet. Formlerna är deterministiska: en given inmatning ger alltid samma utdata, och konverteringar är förlustfria så länge värdena inte rundas av eller begränsas. De flesta färgväljare och designverktyg bygger på dessa formler internt.
Varför använda denna Color Converter?
Designverktyg exporterar färger i ett format, CSS behöver ett annat och API:et du anropar förväntar sig ett tredje. Istället för att skriva konverteringskod eller söka efter rätt formel — klistra in ett värde och få alla format på en gång.
Användningsområden
Färgformatsreferens
Tabellen nedan listar de fem vanligaste färgformaten och visar samma indigofärg (#6366F1) i varje notation. HEX och RGB har bredast stöd i CSS och JavaScript. HSL föredras för temahantering eftersom justering av ljusstyrka och mättnad är rakt fram. HSV är den modell de flesta färgväljare i grafiska designverktyg använder.
| Format | Exempel (indigo) | Kanaler | Vanlig användning |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX vs RGB vs HSL
Alla tre formaten beskriver samma sRGB-färgrymd. Skillnaden ligger i hur de exponerar data, vilket påverkar läsbarhet och hur enkelt det är att manipulera dem i olika sammanhang.
Kodexempel
Färgkonvertering mellan HEX, RGB och HSL i vanliga språk och miljöer. Varje exempel använder samma indigofärg (#6366F1) för enkel jämförelse.
// HEX → RGB
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16)
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]
// RGB → HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255
const max = Math.max(r, g, b), min = Math.min(r, g, b)
const l = (max + min) / 2
if (max === min) return [0, 0, Math.round(l * 100)]
const d = max - min
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
let h = 0
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
else if (max === g) h = ((b - r) / d + 2) / 6
else h = ((r - g) / d + 4) / 6
return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]import colorsys
# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
h = hex_str.lstrip('#')
return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
hex_to_rgb('#6366f1') # → (99, 102, 241)
# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)
# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)package main
import (
"fmt"
"math"
)
func hexToRGB(hex string) (int, int, int) {
var r, g, b int
fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
return r, g, b
}
func rgbToHSL(r, g, b int) (int, int, int) {
rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
max := math.Max(rf, math.Max(gf, bf))
min := math.Min(rf, math.Min(gf, bf))
l := (max + min) / 2
if max == min {
return 0, 0, int(math.Round(l * 100))
}
d := max - min
s := d / (2 - max - min)
if l <= 0.5 {
s = d / (max + min)
}
var h float64
switch max {
case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
case gf: h = (bf - rf) / d + 2
case bf: h = (rf - gf) / d + 4
}
return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}
func main() {
r, g, b := hexToRGB("#6366f1")
fmt.Println(r, g, b) // → 99 102 241
fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}/* Modern CSS supports multiple color formats natively */
/* HEX notation */
.button { color: #6366f1; }
/* RGB functional notation */
.button { color: rgb(99 102 241); }
/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }
/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }
/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }