RGB to HEX Converter

The RGB to HEX Converter takes any color specified as red, green, and blue values (each between 0 and 255) and outputs the equivalent HEX color code for use in CSS, HTML, design systems, and UI components. Enter the R, G, and B values, and the tool returns all three of the most common web color formats simultaneously: the HEX code, the RGB string, and the HSL value — no need to run multiple conversions.

This tool is most commonly used when bridging design tools and code. Figma, Sketch, Adobe XD, and most other design applications display colors in either RGB or HEX format. When a designer hands off color values and the developer needs a different format for their CSS, or when a brand guide specifies a color in RGB that needs to appear as a HEX code in a stylesheet, this converter handles the translation instantly.

How to use the RGB to HEX Converter

1. Set the R (Red), G (Green), and B (Blue) sliders or type the values directly into the input fields. Each value must be between 0 and 255.
2. The tool converts in real time. As you adjust any value, the HEX code, RGB string, and HSL value all update simultaneously.
3. Click the HEX, RGB, or HSL output field to copy that value to your clipboard.
4. Paste the value directly into your CSS stylesheet, HTML file, design token configuration, or any tool that accepts web color codes.

This tool outputs three formats at once: HEX (#RRGGBB), RGB string (rgb(R, G, B)), and HSL (hsl(H, S%, L%)). If you need any of these three formats, you only need to enter the values once. The section below explains what each format is and when to use it.

The three output formats — RGB, HEX, and HSL

Web color formats are all different representations of the same underlying color data. RGB, HEX, and HSL describe exactly the same set of colors — they are three different syntaxes for the same information, not three different color spaces. The choice between them depends on the context you are working in and what you need to do with the color.

RGB — Red, Green, Blue

RGB defines a color by specifying the intensity of its red, green, and blue light components, each as an integer from 0 (none) to 255 (full intensity). The syntax used in CSS is rgb(R, G, B) — for example, rgb(255, 87, 51). With all three channels at 0, the result is black. With all three at 255, the result is white.

RGB is the native color model of digital screens. Every pixel on a monitor emits red, green, and blue light at specific intensities to produce the final visible color. It is intuitive for anyone who understands how mixing colored light works, and it is the format most commonly exported by image editing software and design tools that use color pickers.

HEX — Hexadecimal

HEX is simply RGB expressed in hexadecimal notation. Instead of three decimal numbers from 0 to 255, a HEX code uses six hexadecimal characters (0–9, A–F) in the format #RRGGBB. Each pair of characters represents one color channel: the first two are red, the middle two are green, the last two are blue.

The conversion from decimal to hexadecimal is straightforward: 0 becomes 00, 255 becomes FF, and values in between map proportionally. For example, rgb(255, 87, 51) becomes #FF5733 — 255 is FF, 87 is 57, and 51 is 33. HEX codes are more compact than RGB strings and are the most widely used color format in CSS, HTML, and design documentation.

HSL — Hue, Saturation, Lightness

HSL describes color in terms that are more intuitive to adjust by hand. Instead of mixing three primary color channels, it uses three separate properties: Hue (the color’s position on the color wheel, from 0° to 360°), Saturation (the color’s intensity, from 0% grey to 100% fully saturated), and Lightness (brightness, from 0% black to 100% white). The syntax is hsl(H, S%, L%).

The main advantage of HSL over RGB and HEX is that it makes programmatic color manipulation predictable and readable. To make a color darker, reduce the lightness. To make it more muted, reduce the saturation. To generate a complementary color, rotate the hue by 180°. These operations are complex and non-obvious in RGB or HEX, but trivial in HSL. It is increasingly preferred for design systems and CSS custom properties where color relationships need to be expressed and maintained programmatically.

Web color format reference

How RGB converts to HEX

The conversion from RGB to HEX is a straightforward decimal-to-hexadecimal number base change applied to each colour channel independently. The formula is:

HEX = '#' + toHex(R) + toHex(G) + toHex(B)

where toHex(n) = n.toString(16).padStart(2, '0').toUpperCase()

In practice: take each decimal value (0–255), convert it to its two-digit hexadecimal equivalent, and concatenate the three pairs preceded by a hash sign. A few examples:

• rgb(255, 0, 0) → FF + 00 + 00 → #FF0000 (pure red)
• rgb(0, 128, 0) → 00 + 80 + 00 → #008000 (green)
• rgb(34, 139, 34) → 22 + 8B + 22 → #228B22 (forest green)
• rgb(59, 130, 246) → 3B + 82 + F6 → #3B82F6 (Tailwind blue-500)

The tool performs this calculation automatically for any values you enter. The conversion reference table below shows common colors in all three formats for quick reference:

Practical use cases

Design-to-development handoff

Design tools and CSS codebases often use different color formats for the same color. Figma typically exports colors as HEX or RGB. A developer's CSS might use HSL for easier maintenance. A legacy codebase might use HEX throughout. When colors need to move between these contexts, the converter provides all three formats from a single input, removing the need for manual calculation or multiple tool visits.

Building and maintaining design systems

Design systems define color palettes with precise values that must be consistent across every component and platform. When a brand color is specified in RGB in a style guide, every developer on the team needs the equivalent HEX and HSL values to work in their preferred format. Having all three available simultaneously prevents the rounding errors and mismatches that occur when conversions are done manually or with different tools.

CSS custom properties and theming

CSS custom properties (variables) are widely used for theming and design tokens. HSL is particularly well-suited for this because you can define a base hue and then generate lighter, darker, and muted variants by adjusting only the saturation and lightness values. Converting a brand's base color from RGB or HEX to HSL using this tool is the starting point for this workflow.

Cross-platform color matching

Colors defined in one tool or format must match exactly when used in another context — the same button color on a website, in a mobile app, and in printed materials should be visually consistent. Having the color expressed in all three web formats makes it straightforward to enter the correct value in any tool that might require RGB, HEX, or HSL input.

Usage limits

Related tools

• Decimal to HEX — convert any decimal number to its hexadecimal equivalent, useful for manual color code work and programming tasks beyond color conversion.
• HEX to Binary — convert hexadecimal values to binary, useful for low-level programming and understanding how HEX color values are stored at the bit level.
• Binary to HEX — convert binary numbers to hexadecimal format.
• Binary to Decimal — convert binary values to decimal, useful for working with color channel values in binary representation.

Frequently asked questions

What does the RGB to HEX converter do?

It converts a color defined as three decimal values (Red, Green, Blue — each from 0 to 255) into its equivalent HEX color code (the six-character hexadecimal format used in CSS and HTML, for example #FF5733). The tool also outputs the RGB string and HSL value simultaneously, so you get all three common web color formats in a single conversion.

What is a HEX color code?

A HEX color code is a six-character string, preceded by a hash sign, that represents a color in web design. The six characters are written in pairs — #RRGGBB — where RR is the red channel, GG is the green channel, and BB is the blue channel, each expressed as a two-digit hexadecimal number from 00 (0 in decimal) to FF (255 in decimal). It is the most compact and widely used color format in CSS and HTML.

What is the difference between RGB and HEX?

RGB and HEX are two different notations for exactly the same color information. RGB uses three decimal numbers from 0 to 255, written as rgb (R, G, B). HEX uses the same three values converted to hexadecimal and written as a six-character string (#RRGGBB). They represent the same set of colors — the format difference is one of notation, not range or accuracy. HEX is more compact; RGB is easier to read as decimal numbers.

What is HSL and why does the tool show it?

HSL stands for Hue, Saturation, Lightness. It is an alternative way to express the same color, using the hue angle (0–360°), saturation percentage (0–100%), and lightness percentage (0–100%) instead of raw channel intensities. The tool displays HSL because it is increasingly used in CSS custom properties and design systems, where adjusting lightness or saturation independently makes color relationships easier to maintain. Having the HSL value immediately available saves a second conversion step.

Why do I need to convert between color formats?

Different tools and workflows use different color formats. Design tools like Figma typically export HEX or RGB. CSS often benefits from HSL for programmatic theming. Legacy codebases use HEX throughout. Brand guidelines may specify colors in RGB. When the same color needs to appear in multiple contexts, conversion ensures the values match exactly without manual calculation errors.

Does the converter handle transparency (RGBA)?

The standard RGB to HEX conversion does not include an alpha (transparency) channel. If you need a transparent color, the CSS format is rgba (R, G, B, A) where A is a value from 0 (fully transparent) to 1 (fully opaque). The equivalent eight-digit HEX format is #RRGGBBAA. For example, rgba (255, 87, 51, 0.5) is approximately #FF573380 in HEX-8 notation. This converter outputs standard six-digit HEX; alpha values need to be appended manually or using a dedicated RGBA/HEX-8 tool.

What do the R, G, B values represent?

R, G, and B stand for Red, Green, and Blue — the three primary colors of light that screens use to display all visible colors. Each value controls how intensely that color channel contributes to the final color, on a scale from 0 (none of that color) to 255 (maximum intensity). When all three are at 255, the result is white. When all three are at 0, the result is black. Every other color is a combination of these three channels.

Is the RGB to HEX Converter free?

Yes. The converter is free within the daily usage limits shown above. Guest users can run 25 conversions per day without creating an account. Registering a free account increases the daily limit to 100 conversions and gives access to usage history.