HEX to RGB Color Converter

Instantly convert HEX color codes to RGB and HSL values, or convert RGB back to HEX. Live color preview included.

#6C63FF

rgb(108, 99, 255)

tagHEX#6C63FF
paletteRGBrgb(108, 99, 255)
tuneHSLhsl(243, 100%, 69%)
radio_button_checkedR108
radio_button_checkedG99
radio_button_checkedB255
rotate_rightHue243°
water_dropSat100%
light_modeLight69%
CSS Snippet
color: rgb(108, 99, 255);
background-color: #6C63FF;
/* HSL */
color: hsl(243, 100%, 69%);

How It Works

Enter a HEX color code (e.g. #6C63FF or shorthand #FFF) and instantly see the equivalent RGB and HSL values. Switch to RGB mode to drag sliders and get the HEX code back.

  • HEX codes use base-16 pairs — RR GG BB — each ranging from 00 to FF
  • RGB values range from 0–255 per channel
  • HSL expresses colour as Hue (0–360°), Saturation (0–100%), Lightness (0–100%)
  • Use the color picker or preset swatches for quick selection
sync_alt

Two-Way Conversion

Convert HEX → RGB or RGB → HEX instantly. Supports shorthand HEX (#RGB) and full format (#RRGGBB).

palette

Live Preview

See a real-time color swatch as you type or drag sliders. Also outputs HSL for CSS use.

bolt

Instant Results

All processing happens locally in your browser — no server, no upload, completely private.

Where to Use This Tool

codeWeb Development

  • • Convert design tokens from HEX to RGB
  • • Use RGB for CSS rgba() transparency
  • • Match brand colors across formats
  • • Generate CSS color snippets instantly

brushDesign

  • • Convert Figma HEX colors to RGB
  • • Check color values from style guides
  • • Explore HSL for color variations
  • • Preview colors before using in UI

imageGraphics & Media

  • • Convert colors between image editors
  • • Verify hex codes from screenshots
  • • Match print and digital color values

schoolLearning

  • • Understand how HEX and RGB relate
  • • Visualise how RGB channels mix
  • • Explore HSL color model interactively