Color converter

Convert colors between different formats (HEX, RGB, HSL, HSV)

Color Converter

Convert colors between HEX, RGB, and HSL formats

hex: #3b82f6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
rgba(59, 130, 246, 1)

TL;DR

What is Color converter?

Color format conversion translates the same color between different mathematical representations. HEX (#RRGGBB) and RGB (red, green, blue) are the most common in CSS and web development. HSL (hue, saturation, lightness) and HSV (hue, saturation, value) are easier to reason about when adjusting brightness or saturation programmatically.

Common use cases

  • CSS development: convert a HEX color from a design file into the RGB or HSL format your stylesheet requires
  • Design token translation: map colors between tools that use different formats (Figma uses HEX, some CSS preprocessors prefer HSL)
  • Programmatic color manipulation: HSL makes it straightforward to lighten or darken a color by adjusting the L channel

Frequently asked questions

What is the difference between HSL and HSV?

Both use hue and saturation. The third channel differs: L (lightness) in HSL goes from black (0%) to white (100%) with the pure color at 50%. V (value) in HSV goes from black (0%) to the pure color (100%). HSV is used more in photo editing tools; HSL is more common in CSS.

What does the alpha channel represent?

Alpha is the opacity of the color, ranging from 0 (fully transparent) to 1 or 255 (fully opaque). In CSS, rgba(255, 0, 0, 0.5) is a 50% transparent red. In HEX, an 8-digit code adds an AA suffix for the alpha value (e.g. #FF000080).