Skip to main content

Hex To Rgb

Web colors are expressed in hex (#FF5733) for CSS shorthand and RGB (255, 87, 51) for JavaScript and design tools. Our converter translates between hex, RGB, HSL, HSB/HSV, CMYK, and CSS named colors — with a visual color swatch, accessibility contrast checker, and the ability to adjust the color interactively.

Color Picker

Click the swatch to open the color picker

#

R

G

B

Popular Colors

HEX
RGB
RGBA
HSL

Enter a valid color above

Color Format Reference

#B8FF3C — 6-digit hex color (most common in CSS/HTML)
rgb(184, 255, 60) — Red, Green, Blue (0–255 each)
rgba(184, 255, 60, 0.8) — RGB + Alpha transparency (0–1)
hsl(84, 100%, 62%) — Hue (0–360°), Saturation, Lightness
Share this tool
Design

About the Hex to RGB Color Converter

Web colors are expressed in hex (#FF5733) for CSS shorthand and RGB (255, 87, 51) for JavaScript and design tools. Our converter translates between hex, RGB, HSL, HSB/HSV, CMYK, and CSS named colors — with a visual color swatch, accessibility contrast checker, and the ability to adjust the color interactively.

How to use it

  1. Enter a hex code (#FF5733 or FF5733) to see RGB, HSL, and HSB equivalents.
  2. Enter RGB values (0–255 each) to generate the hex code and all other formats.
  3. Use the color picker to select a color visually.
  4. Check contrast ratio against white or black text for WCAG accessibility compliance.

Formula & methodology

Hex to RGB: split 6-digit hex into pairs; convert each pair from hex to decimal. #FF5733 → R:255 G:87 B:51. RGB to Hex: convert each channel to 2-digit hex and concatenate. RGB to HSL: normalize to 0–1; compute max/min; H = hue angle; S = (max−min)/(1−|2L−1|); L = (max+min)/2. HSL to RGB: reverse transformation.

Common use cases

  • Web development: CSS requires hex or rgb(); design tools output HSL
  • Brand colors: converting Pantone/CMYK brand colors to web-safe hex
  • Accessibility: checking if text color meets WCAG AA (4.5:1 contrast) or AAA (7:1)
  • Design systems: documenting color tokens in multiple formats
  • Image processing: working with pixel color values in different color spaces

Frequently asked questions

HSL (Hue, Saturation, Lightness): Lightness 50% = pure color, 0% = black, 100% = white. Used in CSS. HSB/HSV (Hue, Saturation, Brightness/Value): Brightness 100% with Saturation 100% = pure color; Brightness 0% = black regardless of saturation. Used in Photoshop and most design tools. The same bright red: HSL(0°, 100%, 50%) = HSB(0°, 100%, 100%). They describe color differently — HSL is more intuitive for web; HSB for design tools.
WCAG 2.1 Level AA (minimum standard): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold). Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Black on white = 21:1 (maximum). White on mid-gray (#808080) = 3.95:1 (fails AA for normal text). Use a contrast checker before finalizing text and background color combinations — poor contrast affects 300 million people with visual impairments.

Related tools

CSS Border Radius Generator CSS Box Shadow Generator CSS Gradient Generator Color Palette Generator Favicon Generator RGB to HEX Converter

Related tools

All Tools →
Design

RGB to HEX Converter
Design

CSS Gradient Generator
Design

CSS Border Radius Generator
Design

CSS Box Shadow Generator
Design

Favicon Generator
Design

Color Palette Generator

Embed this tool on your site

Free for personal and commercial use. Just copy the snippet below.