RGB to HEX Converter

Developer

Why Use the RGB to HEX Converter?

Set red, green and blue values from 0 to 255 with the number fields or sliders, and this rgb to hex converter writes the matching HEX code as you go. When your color can be abbreviated, it also shows the 3-digit shorthand, so you know at once whether #66CCFF can become #6CF. A step-by-step breakdown divides each channel by 16 and shows the remainder, making the result easy to verify. It helps front-end developers, students and anyone copying colors out of software that only shows RGB.

How to Use the RGB to HEX Converter

1. Type values into the Red, Green and Blue fields, or drag their sliders, using whole numbers from 0 to 255.
2. Watch the HEX code update with every change; when each pair has matching digits, the 3-digit shorthand appears as well.
3. Read the step-by-step breakdown to see each channel divided by 16, for example 99 ÷ 16 = 6 remainder 3, which becomes 63.
4. Press Copy on the HEX code or the shorthand and paste it into your CSS, design tool or brand document.

Best For

• Converting RGB values read from a screenshot tool or image editor into HEX for a stylesheet.
• Translating RGB brand specifications from a style guide into the HEX codes that CMS themes and design tools ask for.
• Nudging a single channel with its slider, such as adding a little red to warm a color, while watching the HEX code change.
• Checking whether a color can be written as 3-digit shorthand to keep CSS compact.

Pro Tip

Some environments, including SwiftUI, the Figma plugin API and GLSL shaders, express channels as decimals from 0 to 1 instead of 0 to 255. Multiply those by 255 and round before entering them here, so 0.5 becomes 128 (hex 80) and 0.2 becomes 51 (hex 33). Using one consistent rounding rule stops the same color drifting by a single step between platforms.