Color Converter
Convert colors between HEX, RGB, HSL and HSV formats with a visual color picker
Click swatch to open color picker
Or edit any value below
What Is Color Conversion?
A color converter translates a color value from one notation to another β for example, from a HEX triplet (#6366F1) to an RGB tuple (99, 102, 241) or an HSL triple (239, 84%, 67%). A single color can also be expressed as an HSV triple (239, 59%, 95%). Each format encodes the same visual color using a different mathematical model; different tools, languages, and APIs all expect different formats depending on context.
HEX and RGB both describe color as a mix of red, green, and blue light. HEX is a compact hexadecimal representation of the same three 0-255 channel values that RGB spells out in decimal. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) rearrange the same information into a cylindrical coordinate system where hue is an angle on a color wheel (0-360 degrees), and saturation and lightness or brightness are percentages. This makes HSL and HSV more intuitive for tasks like creating lighter or darker shades of the same hue.
Converting between these formats requires well-defined math. The W3C CSS Color Module Level 4 specification documents the algorithms browsers use to resolve any CSS color into an sRGB triplet. The formulas are deterministic: a given input always produces the same output, so conversions are lossless as long as the values are not rounded or clamped. Most color pickers and design tools rely on these same formulas under the hood.
Why Use This Color Converter?
Design tools export colors in one format, your CSS needs another, and the API you are calling expects a third. Instead of writing conversion code or searching for the right formula, paste a value and get every format at once.
Color Converter Use Cases
Color Format Reference
The table below lists the five most common color formats, with the same indigo color (#6366F1) shown in each notation. HEX and RGB are the most widely supported in CSS and JavaScript. HSL is preferred for theming because adjusting lightness and saturation is straightforward. HSV is the model used by most graphic design software color pickers.
| Format | Example (indigo) | Channels | Common usage |
|---|---|---|---|
| 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
All three formats describe the same sRGB color space. The difference is how they expose the data, which affects readability and ease of manipulation in different contexts.
Code Examples
Color conversion between HEX, RGB, and HSL in common languages and environments. Each example uses the same indigo color (#6366F1) for easy comparison.
// 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); }