Color Converter

Understanding HEX, RGB, HSL, and HSV

Every color you see on screen is the same physical thing — a mix of red, green, and blue light. The four notations below are just different ways of writing that mix down. Knowing how they relate makes it far easier to read a value, tweak it, and move it between CSS, design tools, and code.

HEX: RGB in base-16

A HEX code such as #3b82f6 packs three channels into six hexadecimal digits — two for red, two for green, two for blue. Each pair ranges from 00 (0) to ff (255). It is the most compact notation and the default in most design handoffs, but the digits are hard to reason about by eye because base-16 is not intuitive.

RGB: the raw channels

RGB writes the same three channels as plain decimal numbers from 0 to 255:

#3b82f6  →  rgb(59, 130, 246)

This is the same color, just easier to read. RGB is handy when you are computing colors in code, since you can manipulate each channel as an ordinary integer before formatting it back to HEX.

HSL: hue, saturation, lightness

HSL re-maps the RGB cube onto a cylinder that matches how people think about color. Hue is an angle from 0 to 360 degrees (0 = red, 120 = green, 240 = blue), saturation is how vivid the color is, and lightness runs from black to white:

#3b82f6  →  hsl(217, 91%, 60%)

To build a darker shade of the same color, drop the lightness; to mute it, drop the saturation — all without touching the hue. That predictability is why HSL is the go-to format for generating color scales and hover states.

HSV vs HSL

HSV (also called HSB) shares the hue and saturation axes but replaces lightness with value. In HSL, 100% lightness is always white; in HSV, 100% value is the brightest version of the hue itself. Color pickers in tools like Photoshop and Figma are usually HSV, which is why dragging to the top-right corner gives you a fully saturated color rather than white.

A worked example: turning one brand color into a usable palette

Say a design hands you a single brand blue, #3b82f6, and you need a hover state, a disabled state, and a tinted background from it. Convert to HSL first, because that is the format where the math is intuitive:

#3b82f6           →  hsl(217, 91%, 60%)   base
hover  (darker)   →  hsl(217, 91%, 52%)   →  #156bf4
disabled (muted)  →  hsl(217, 30%, 60%)   →  #7a92b8
tint   (lighter)  →  hsl(217, 91%, 95%)   →  #e7f0fe

Every variant keeps the hue locked at 217, so the family stays recognisably the same blue. The hover state only drops lightness by 8 points; the disabled state pulls saturation down to grey it out without changing how light it is; the tint pushes lightness near the top for a subtle background. Once the HSL values look right, copy each one back as HEX for your stylesheet — exactly the round-trip this converter does in place. Trying to do the same edits directly in HEX would mean recomputing all three channels by hand for every step.

Rounding and precision

HEX and RGB are both 8-bit integers per channel, so they convert back and forth perfectly. HSL uses integer degrees and percentages, so a round-trip through HSL can shift a channel by one unit. When exact reproduction matters, keep HEX or RGB as the canonical value and treat HSL as an editing convenience.

Related dev tools

• Random Color Generator — generate fresh colors with HEX, RGB, and HSL.
• Random Gradient Generator — build CSS linear and radial gradients.
• CSS Minifier — shrink the stylesheet your colors live in.
• JSON Formatter — tidy up design tokens and theme config files.