HEX / RGB / HSL Color Converter

Convert colors between HEX, RGB, and HSL formats. All values stay in sync as you edit.

What are HEX, RGB, and HSL?

HEX (e.g. #3b82f6): Red, green, blue as hex pairs. RGB: Red, green, blue 0–255. HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). All describe the same color in different ways.

What is it used for?

  • CSS: HEX and RGB in stylesheets; HSL for easy adjustments
  • Design: Match colors between tools (Figma, code)
  • Accessibility: Adjust lightness for contrast
  • Gradients: HSL makes color variations easy

How it works

Edit any field (HEX, R/G/B, or H/S/L). All other values stay in sync. The preview updates in real time.

Related Tools

🎨

CSS Formatter

Beautify and minify CSS. Format stylesheets for readability or compress for production.

🖌️

Color Picker

Pick colors and get HEX, RGB, HSL values. Free online color picker.

🌈

Color Palette Generator

Generate color palettes from a base color. Free online palette generator.