RGB to HEX Converter - Online Color Translator
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
UD5 Toolkit
# followed by three pairs of hexadecimal digits (0-9, A-F), representing the intensity of Red, Green, and Blue channels respectively. For example, #FF5733 means Red=FF (255), Green=57 (87), Blue=33 (51). Shorthand 3-digit HEX codes like #F53 are also valid and expand to #FF5533.
rgb(255, 87, 51). While HEX and RGB represent the exact same color information, HEX uses base-16 notation (compact for code) and RGB uses decimal notation (more human-readable). Designers often prefer HEX for CSS, while RGB is common in graphic software and JavaScript.
#).RR, GG, BB.#3B82F6:3B = 3Ă—16 + 11 = 59 (Red)82 = 8Ă—16 + 2 = 130 (Green)F6 = 15Ă—16 + 6 = 246 (Blue)rgb(59, 130, 246). Use our free converter above for instant results!
#ABC is automatically expanded to #AABBCC before conversion. This means #F80 becomes #FF8800, which converts to rgb(255, 136, 0). Simply type the 3-digit code and the tool handles the rest instantly.
color: #3B82F6; or RGB when you need to add alpha transparency with rgba(59, 130, 246, 0.5). The tool also displays HSL values for modern CSS workflows.
# symbol in the character count, or typing an incomplete code. Our tool strips the # automatically and validates the remaining characters. If invalid, an error message guides you to correct the format.
#3b82f6 and #3B82F6 represent the exact same color. Most modern CSS minifiers use lowercase, while design tools like Figma and Adobe often display uppercase. Our converter accepts both and outputs uppercase by default for readability, but you can use either in your code.
hsl() and hsla() functions natively.
Free online HEX to RGB converter — instantly translate hexadecimal color codes to RGB values. Supports 3-digit shorthand HEX, real-time color preview, RGB sliders, native color picker, and copy-to-clipboard. Perfect for web developers, UI/UX designers, graphic designers, and anyone working with CSS color codes. No ads, no installs — just fast, accurate color conversion.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
Enter a Kelvin value (1000‑40000) and see the approximate white‑balance color. Photography and lighting reference.
Input RGB values and see the HSL equivalent with a color preview. Understand lightness and saturation. Local.
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Convert screen RGB colors to print-ready CMYK values. Understand color shifts before printing. Ideal for graphic designers preparing artwork for press.
Type a word like 'sunset' or 'calm' and generate a color palette inspired by that mood. Simple associative mapping.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Adjust the color temperature of your image: move slider to make it warmer or cooler. Quick white balance fix. Local canvas.
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Test if your display supports HDR colors by rendering a gradient in Rec.2020 space. See what you're missing. Canvas based.
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Upload an image and see the cyan, magenta, yellow, and black plates as separate grayscale images. Pre‑press tool.
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Preview how a CMYK value will look on screen (approximate). Compare with its RGB equivalent. Pre‑press check.
Match gap size around doors/windows to the correct type of weather stripping (foam, V-strip, door sweep). Save energy.