Color Converter
Converteer kleuren tussen HEX-, RGB-, HSL- en HSV-indelingen met een visuele kleurkiezer
Klik op kleurvak om kleurkiezer te openen
Of bewerk een waarde hieronder
Wat is kleurconversie?
Een kleurconverter zet een kleurwaarde om van de ene notatie naar de andere — bijvoorbeeld van een HEX-triplet (#6366F1) naar een RGB-tuple (99, 102, 241) of een HSL-drietal (239, 84%, 67%). Dezelfde kleur kan ook worden uitgedrukt als een HSV-drietal (239, 59%, 95%). Elk formaat codeert dezelfde visuele kleur met een ander wiskundig model; verschillende tools, programmeertalen en API's verwachten afhankelijk van de context uiteenlopende formaten.
HEX en RGB beschrijven kleur allebei als een mix van rood, groen en blauw licht. HEX is een compacte hexadecimale weergave van diezelfde drie kanaalwaarden van 0 tot 255 die RGB decimaal uitschrijft. HSL (Hue, Saturation, Lightness) en HSV (Hue, Saturation, Value) herordenen dezelfde informatie in een cilindrisch coördinatensysteem waarbij de tint een hoek op een kleurenwiel is (0–360 graden) en verzadiging en helderheid of waarde percentages zijn. Dit maakt HSL en HSV intuïtiever voor taken zoals het creëren van lichtere of donkerdere tinten van dezelfde kleur.
Het omzetten tussen deze formaten vereist goed gedefinieerde wiskunde. De W3C CSS Color Module Level 4-specificatie documenteert de algoritmen die browsers gebruiken om elke CSS-kleur naar een sRGB-triplet om te zetten. De formules zijn deterministisch: een bepaalde invoer levert altijd dezelfde uitvoer, zodat conversies verliesvrij zijn zolang waarden niet worden afgerond of begrensd. De meeste kleurkiezers en ontwerptoepassingen gebruiken intern dezelfde formules.
Waarom deze kleurconverter gebruiken?
Ontwerptoepassingen exporteren kleuren in één formaat, je CSS heeft een ander nodig en de API die je aanroept verwacht een derde. In plaats van conversiecode te schrijven of de juiste formule op te zoeken, plak je een waarde en krijg je elk formaat tegelijk.
Toepassingen van de kleurconverter
Kleurformatreferentie
De tabel hieronder geeft de vijf meest gebruikte kleurformaten weer, met dezelfde indigo-kleur (#6366F1) in elke notatie. HEX en RGB worden het meest ondersteund in CSS en JavaScript. HSL heeft de voorkeur voor theming omdat het aanpassen van helderheid en verzadiging eenvoudig is. HSV is het model dat de meeste kleurkiezers in grafische ontwerpsoftware gebruiken.
| Formaat | Voorbeeld (indigo) | Kanalen | Veelgebruikt in |
|---|---|---|---|
| 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
Alle drie formaten beschrijven dezelfde sRGB-kleurruimte. Het verschil zit in hoe ze de gegevens presenteren, wat de leesbaarheid en het gemak van manipulatie in verschillende contexten beïnvloedt.
Codevoorbeelden
Kleurconversie tussen HEX, RGB en HSL in veelgebruikte programmeertalen en omgevingen. Elk voorbeeld gebruikt dezelfde indigo-kleur (#6366F1) voor eenvoudige vergelijking.
// 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); }