🛠️ToolsShed

Color Converter

Convert colors between HEX, RGB, and HSL formats instantly.

rgb(99, 102, 241)
hsl(239, 84%, 67%)

Color Converter instantly translates color values between the most common formats used in web and graphic design: HEX (#rrggbb), RGB (red, green, blue), HSL (hue, saturation, lightness), and HSB/HSV (hue, saturation, brightness). Each format has its own strengths — HEX is compact and universally accepted in CSS, while HSL is more intuitive for choosing shades and tints.

Enter a color value in any supported format and the tool automatically calculates and displays the equivalent value in all other formats simultaneously. A live color preview lets you confirm the result visually. You can also use the color picker to select a hue and copy the output in the format your project requires.

This tool is useful for designers transferring colors between Figma, Photoshop, and code, as well as developers ensuring color consistency across stylesheets. All conversions happen in the browser with no external requests.

Frequently Asked Questions

Code Implementation

import colorsys

# HEX → RGB
def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    hex_color = hex_color.lstrip("#")
    r, g, b = (int(hex_color[i:i+2], 16) for i in (0, 2, 4))
    return r, g, b

# RGB → HEX
def rgb_to_hex(r: int, g: int, b: int) -> str:
    return f"#{r:02X}{g:02X}{b:02X}"

# RGB → HSL  (uses colorsys, which returns 0–1 floats)
def rgb_to_hsl(r: int, g: int, b: int) -> tuple[float, float, float]:
    h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)
    return round(h * 360, 1), round(s * 100, 1), round(l * 100, 1)

# Example
r, g, b = hex_to_rgb("#3B82F6")
print(f"RGB: {r}, {g}, {b}")           # RGB: 59, 130, 246
print(rgb_to_hex(r, g, b))             # #3B82F6
h, s, l = rgb_to_hsl(r, g, b)
print(f"hsl({h}, {s}%, {l}%)")         # hsl(217.0, 91.2%, 59.8%)

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.