usefmtly

Hex to RGB Color Converter

Convert hex color codes to RGB, HSL, and CSS values instantly. Real-time preview, one-click copy. Free — no signup required.

#2ECC71
rgb(46, 204, 113)
#
🎨
Hue145°
Saturation63%
Lightness49%

How to use the Hex to RGB Converter

  1. Type or paste your hex code into the input field — with or without the # prefix. Both 3-digit (#FFF) and 6-digit (#FFFFFF) formats work.
  2. The color preview updates instantly as you type. The large swatch shows exactly what the color looks like.
  3. Copy any value — click the R, G, B chips for individual channel values, or the CSS chips for ready-to-paste expressions like rgb(37, 99, 235).
  4. Use the color picker if you want to explore colors visually — drag the picker and the hex input updates automatically.

What is the difference between hex and RGB?

Both hex and RGB represent the same colors — they are just different ways to write them. RGB uses three decimal numbers, each between 0 and 255, to specify how much red, green, and blue light makes up a color. Hex uses base-16 (hexadecimal) encoding to express those same three values as a 6-character string.

For example, the color #2563EB in hex is rgb(37, 99, 235) in RGB. The first two hex digits (25) equal 37 in decimal, the next two (63) equal 99, and the last two (EB) equal 235. They are the same color, written in different notation.

Hex is more compact and common in HTML/CSS design systems and design tools like Figma. RGB is preferred when you need to manipulate individual channel values in code or CSS animations.

When to use RGB vs hex in CSS

Use hex for static color values in design tokens, brand colors, and anywhere the color is fixed. It is shorter to write and universally understood.

Use rgb() when you need transparency (via rgba()), or when you are computing color values in JavaScript. The function syntax is more readable when alpha is involved: rgba(37, 99, 235, 0.5) is clearer than #2563EB80.

Use hsl() when you want to programmatically lighten, darken, or shift a color — adjusting the lightness percentage is far more intuitive than calculating new hex values.

Understanding HSL output

This tool also outputs HSL (Hue, Saturation, Lightness) — a color model that maps more closely to how humans perceive color.

  • Hue (0–360°) — the position on the color wheel. 0° is red, 120° is green, 240° is blue.
  • Saturation (0–100%) — how vivid or muted the color is. 0% is grey, 100% is fully saturated.
  • Lightness (0–100%) — how light or dark the color is. 0% is black, 100% is white, 50% is the pure color.

Frequently Asked Questions

How do I convert a hex color code to RGB?

Paste or type your hex code (e.g. #2563EB or 2563EB) into the input above. The tool instantly calculates and displays the red, green, and blue values — no button press needed. You can copy each value individually or the full CSS expression.

What is a hex color code?

A hex color code is a 6-digit (or shorthand 3-digit) hexadecimal number that represents a color in the RGB color model. Each pair of digits represents the intensity of red, green, and blue on a scale from 00 (0) to FF (255). For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.

What is RGB?

RGB stands for Red, Green, Blue. It is an additive color model where colors are created by combining different intensities of red, green, and blue light. Each channel ranges from 0 to 255. RGB values are widely used in CSS (rgb(r, g, b)), screen design, and digital image editing.

Does this tool also support 3-digit hex codes?

Yes. 3-digit shorthand hex codes like #FFF or #ABC are automatically expanded to their 6-digit equivalents (#FFFFFF and #AABBCC) before conversion. Both formats are fully supported.

What is HSL and why is it included?

HSL stands for Hue, Saturation, and Lightness — an alternative way to represent colors that many designers find more intuitive. Hue is the color angle (0–360°), Saturation is the color intensity (0–100%), and Lightness is how light or dark the color is (0–100%). This tool provides HSL alongside RGB so you have both formats ready to use.

Can I use the output directly in CSS?

Yes. The tool outputs the CSS rgb() and hsl() expressions exactly as they should appear in your stylesheet. Click the copy button next to any value to copy it to your clipboard and paste it directly into your CSS.

Is the original hex code case-sensitive?

No. You can enter hex codes in uppercase (#FF5733), lowercase (#ff5733), or mixed case — the tool normalises them automatically.

Related Tools

LinkedIn Text FormatterFormat your LinkedIn posts with bold, italic, script, and 20 more text styles. Real-time preview, one-click copy. Free — no signup required.YAML FormatterFormat, validate, and convert YAML online. Instant syntax highlighting, configurable indent, JSON output. Free — no signup required.