handyman
Hazuu Tools

Hex to RGB Converter

Convert HEX color codes to RGB values instantly. See RGB percentage, CSS code snippets, and a live color preview.

paletteHex to RGB Converter

#FF5733

tag

HEX Input

Hex Code
#
circle

RGB Input

R (0-255)
G (0-255)
B (0-255)
output

Output Formats

RGB

rgb(255, 87, 51)

RGB Percentage

rgb(100.0%, 34.1%, 20.0%)

CSS (Modern)

rgb(255 87 51)

HEX

#FF5733

tune

Individual Values

Red

255

100.0%

Green

87

34.1%

Blue

51

20.0%

code

CSS Code Snippets

Text Color
color: rgb(255, 87, 51);
Background Color
background-color: rgb(255, 87, 51);
HEX in CSS
color: #FF5733;
info

About Hex to RGB Converter

A HEX color code is a six-digit hexadecimal value — such as #FF5733 — used in CSS, HTML, SVG, and graphic design tools to identify a specific color. RGB is an additive model that expresses the same color as three decimal integers between 0 and 255, one for each of the red, green, and blue channels. Although both notations describe identical colors, design tools, code frameworks, and image editors each prefer one or the other, making conversion a routine step in any color-heavy workflow.

This Hex to RGB Converter translates any valid six-digit HEX code into its RGB equivalent in real time, showing the result in four distinct formats: the classic rgb(R, G, B) function, the percentage-based rgb(R%, G%, B%) variant, the modern space-separated CSS Level 4 syntax, and ready-to-paste CSS property declarations for both color and background-color. The tool is also fully bidirectional — type individual R, G, and B channel values (0–255) and it instantly computes the matching HEX code. A color picker lets you select any color visually and see all representations update at once.

Every calculation runs entirely inside your browser using JavaScript math — no color data is transmitted to any server. The conversion is instantaneous even for repeated color lookups, there is no account required, and the tool is free to use without limits. Individual channel values are displayed with both their 0–255 decimal figure and their percentage equivalent, giving you the full picture for any CSS or canvas-based work.

star

Key Features

check_circle

Bidirectional conversion

Enter a HEX code to get RGB values, or type R, G, and B numbers to compute the HEX equivalent — both directions update live without clicking a button.

check_circle

Four ready-to-paste output formats

Each conversion surfaces rgb(R, G, B), rgb(R%, G%, B%), modern space-separated CSS Level 4 syntax, and complete CSS property declarations so you can copy exactly the format your codebase expects.

check_circle

Live color preview swatch

A large swatch renders the selected color in real time next to the inputs, so you can verify the shade visually before copying the value into your project.

check_circle

Color picker integration

Use the native browser color picker to point at any color, and every output format — HEX, RGB, percentage, and CSS snippets — updates instantly to match your selection.

check_circle

Individual channel readout

Each red, green, and blue channel is displayed separately with its 0–255 decimal value and percentage equivalent, which is useful for CSS custom properties, canvas APIs, and animation libraries.

check_circle

Client-side only, no sign-up

Color values are never uploaded or logged. All conversion logic runs locally in your browser, making it safe to use with confidential brand colors or client design tokens.

help

How to Use

01

Enter a Color

Type a HEX code (e.g., FF5733) into the input field, use the color picker, or enter individual R, G, B values.

02

View Results

The converter instantly shows the RGB values, percentage format, CSS code snippets, and a large color preview swatch.

03

Copy & Use

Click any copy button to grab the format you need — RGB, CSS property, or HEX — and paste it directly into your project.

code_blocks

Example

The HEX code #1A73E8 — Google's primary blue — converts to rgb(26, 115, 232). Each pair of hex digits maps directly to one channel: 1A → 26 red, 73 → 115 green, E8 → 232 blue.

HEX input
#1A73E8
RGB output
rgb(26, 115, 232)
rgb(10.2%, 45.1%, 91.0%)
rgb(26 115 232)
color: rgb(26, 115, 232);
background-color: rgb(26, 115, 232);
lightbulb

Common Use Cases

  • arrow_circle_right

    Translating design tokens from Figma to CSS

    Figma exports and design handoff tools often surface HEX codes. Paste the token into the converter to get the rgb() value needed for CSS custom properties or Tailwind theme configuration that expects RGB channels.

  • arrow_circle_right

    Implementing CSS custom property color channels

    Modern CSS patterns store RGB channels separately — e.g. --color-primary: 26 115 232 — so opacity variants like rgb(var(--color-primary) / 0.4) work. Use this tool to extract the three integers from any HEX token.

  • arrow_circle_right

    Setting colors in canvas, WebGL, or animation libraries

    JavaScript APIs such as HTML Canvas, Three.js, and GSAP accept numeric RGB values, not HEX strings. Enter a HEX code here to get the three channel numbers for direct use in those APIs.

  • arrow_circle_right

    Verifying a specific color channel value

    When debugging a color that looks slightly off — too red, too dark — inspect the individual channel readout to see exactly where it falls on the 0–255 scale and whether it matches the intended design value.

  • arrow_circle_right

    Bridging brand color palettes across print and screen tools

    Brand guides often list colors in HEX, while some screen-focused tools (SVG filters, CSS gradients, React Native StyleSheet) require rgb() syntax. Use this converter as the quick bridge rather than computing hex math by hand.

quiz

Frequently Asked Questions

What is the difference between HEX and RGB? expand_more
HEX is a six-character hexadecimal string — for example #FF5733 — where each pair of digits represents one color channel. RGB expresses the same three channels as decimal integers between 0 and 255, written rgb(255, 87, 51). The two notations describe identical colors; the difference is purely in how the number is encoded.
Do I need to include the # symbol? expand_more
No. The converter strips the # prefix automatically, so you can type FF5733 or #FF5733 and get the same result either way.
Can I convert RGB back to HEX? expand_more
Yes. The tool is fully bidirectional. Type values into the R, G, and B number fields and the HEX code updates in real time — no submit button needed.
What is the percentage RGB format and when is it used? expand_more
The percentage form — such as rgb(100%, 34.1%, 20.0%) — expresses each channel as a fraction of its maximum rather than as a 0–255 integer. It appears in SVG color attributes, some CSS preprocessors, and accessibility tooling where relative scale is more meaningful than raw decimals.
What is the modern space-separated CSS syntax? expand_more
CSS Color Level 4 allows rgb(26 115 232) without commas. This format is identical in meaning to the comma version but is consistent with hsl() and oklch() in the same specification. Current browsers support it, and it is the form required for the slash-opacity shorthand rgb(26 115 232 / 0.5).
How is this different from the Color Converter sibling tool? expand_more
The Color Converter handles a broad set of color space transformations. This Hex to RGB tool focuses specifically on the HEX ↔ RGB direction and outputs every format you need for CSS immediately — rgb(), percentage, modern syntax, and full CSS property declarations — so you can copy and paste in one step without navigating menus.
Is my data processed on a server? expand_more
No. All conversion math happens inside your browser using plain JavaScript. Color codes are never transmitted anywhere, making this safe for confidential brand tokens and client design systems.
What happens if I enter a short 3-digit HEX code? expand_more
The tool validates that the input is exactly six valid hexadecimal characters. A 3-digit shorthand like #F53 is not automatically expanded; type the full six-digit equivalent — FF5533 — to get an accurate conversion.