HEX to RGB Converter

What Is HEX to RGB Conversion?

HEX and RGB are two ways to represent the same color. HEX uses a 6-digit hexadecimal code (base-16), while RGB uses three decimal numbers (0–255) for red, green, and blue channels. Converting between them is essential when moving between design tools, CSS, JavaScript, and print workflows.

How to Use This Tool

• Type a HEX code in the top-left field. Accepts 3-digit or 6-digit, with or without #.
• Or type RGB values (0–255) directly.
• Or type HSL values (Hue 0–360, Saturation 0–100, Lightness 0–100).
• Or drag the sliders for visual picking.
• Click any output row to copy that format to your clipboard.

Supported Color Formats

• HEX — #3B82F6 (6-digit). The standard for CSS, HTML, and design tools.
• HEX (no #) — 3B82F6. For systems that don't accept the hash symbol.
• RGB — rgb(59, 130, 246). Red, green, blue channels (0–255).
• RGBA — rgba(59, 130, 246, 1). RGB with an alpha (opacity) channel.
• HSL — hsl(217, 91%, 60%). Hue, saturation, lightness — better for systematic color adjustment.
• HSLA — hsla(217, 91%, 60%, 1). HSL with alpha.
• HSV — hsv(217, 84%, 92%). Hue, saturation, value — common in color pickers and image editing software.
• CMYK — cmyk(84%, 58%, 0%, 8%). Cyan, magenta, yellow, black — used in print design.

HEX vs RGB — When to Use Which

• Use HEX when writing CSS, HTML, or SVG. Shorter, more readable.
• Use RGB when you need to manipulate channels programmatically (JavaScript, canvas).
• Use HSL when adjusting lightness or saturation systematically — changing a hue is a single number edit.
• Use HSV when working with color pickers or image editors.
• Use CMYK when preparing colors for print production.

Color Conversion Examples

Color	HEX	RGB	HSL
Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Green	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
Blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
Yellow	#FFFF00	rgb(255, 255, 0)	hsl(60, 100%, 50%)
Cyan	#00FFFF	rgb(0, 255, 255)	hsl(180, 100%, 50%)
Magenta	#FF00FF	rgb(255, 0, 255)	hsl(300, 100%, 50%)
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)

Understanding HEX Codes

A 6-digit HEX code is really three pairs of hex values:

• First pair — Red channel (00 to FF, or 0 to 255)
• Second pair — Green channel (00 to FF, or 0 to 255)
• Third pair — Blue channel (00 to FF, or 0 to 255)

So #3B82F6 breaks down as:

• 3B = 59 in decimal (Red)
• 82 = 130 in decimal (Green)
• F6 = 246 in decimal (Blue)

3-digit HEX codes (like #F0C) are shorthand: each digit is doubled. So #F0C = #FF00CC.

Common Use Cases

• Web development — convert design HEX values to RGB for JavaScript manipulation.
• Design handoff — translate between Figma/Sketch HEX codes and CSS RGB values.
• Branding — document brand colors in multiple formats for different uses.
• Print design — convert screen colors to CMYK for print.
• Accessibility testing — adjust lightness systematically using HSL.
• Color theory — understand how the same color is represented across formats.
• Programming — get exact RGB values for canvas drawing or data visualization.

Related Tools

• Color Picker from Image — extract colors from any image.
• Palette Generator — create full color palettes.
• Contrast Checker — check WCAG accessibility.
• Gradient Generator — build CSS gradients visually.

Privacy Note

All conversions happen in your browser using JavaScript. Nothing is uploaded, stored, or shared.