HEX ↔ RGB Converter
Instantly convert between HEX, RGB, HSL, HSV, and CMYK. Includes bulk converter, sliders, and CSS snippets.
| Swatch | Name | HEX | RGB | HSL |
|---|---|---|---|---|
Converting HEX to RGB
- Type or paste your HEX code into the HEX field (with or without the # prefix).
- The RGB values update instantly in the R, G, B number fields.
- All formats (HSL, HSV, CMYK, CSS) appear in the "All Color Formats" strip.
- Click the copy icon next to any format to copy it to the clipboard.
- Click the color swatch at the top to open the native color picker for visual selection.
Converting RGB to HEX
- Type values 0–255 directly into the R, G, and B fields.
- Or drag the RGB channel sliders — each slider track shows the live color range for that channel.
- The HEX code updates instantly.
Bulk Conversion
Use the Bulk Converter to process multiple colors at once. Paste one color per line — hex codes like #ef4444 for HEX→RGB mode, or rgb() strings for RGB→HEX mode. The output updates as you type.
Common Colors Table
Click any row in the common colors table to instantly load that color into the converter — useful for quick lookups without manual entry.
HEX to RGB Formula
A 6-digit hex code (#RRGGBB) is split into three 2-digit pairs and each is converted from base-16 to base-10:
RGB to HEX Formula
Each channel (0–255) is converted to a 2-digit hex string and concatenated:
RGB to HSL Formula
Short HEX (#ABC) Rule
A 3-digit hex is shorthand for a 6-digit code where each digit is doubled: #38F = #3388FF. This is only valid when both digits of each channel are identical in the full form.
When to Use Each Color Format
- HEX (#RRGGBB) — Use in CSS for static colors, design tokens, and sharing color values. Compact and universally readable. Short form (#RGB) when both hex digits of each channel match.
- RGB (0–255) — Use in JavaScript for color math, canvas drawing, and WebGL. Direct mapping to screen subpixels. Use RGBA when alpha transparency is needed.
- HSL (Hue°, Sat%, Light%) — Best for CSS design systems where you build tint/shade scales. Changing only the lightness value creates consistent color families. Use in CSS custom properties.
- HSV / HSB — Used internally by design tools like Photoshop, Figma, and Illustrator color pickers. Not available natively in CSS.
- CMYK — Used exclusively for physical print. Not supported in CSS. Convert from HEX/RGB only as a reference for print production.
HEX format variants
#RRGGBB— Standard 6-digit HEX#RGB— 3-digit shorthand (only when each channel's two digits match)#RRGGBBAA— 8-digit HEX with alpha (e.g.#38bdf880= 50% opacity)#RGBA— 4-digit shorthand with alpha
Browser support for color functions
rgb()/rgba()— 100% supporthsl()/hsla()— 100% supportcolor()(wide-gamut) — 90%+ in modern browsersoklch()/lab()— 90%+ in modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+)
HEX (hexadecimal) color is a 6-character code prefixed with # that encodes red, green, and blue channels. Each pair of characters (RR, GG, BB) is a base-16 number from 00 to FF, representing an intensity from 0 to 255. It is the most widely used format in web design and CSS.
Split the 6-digit hex into three 2-character pairs. Convert each from base-16 to base-10: multiply the first digit by 16 and add the second digit. For #FF8000: FF=255, 80=128, 00=0 → rgb(255, 128, 0). The tool does this instantly for any code you type.
Yes. A 3-digit hex (#RGB) is shorthand where each digit is duplicated: #38F = #3388FF. It only works when both hex digits of each channel would be identical in the 6-digit form. #333 works; #38b is valid shorthand for #3388bb. This tool shows the short form when applicable.
RGBA adds a fourth channel — Alpha — which controls opacity from 0.0 (fully transparent) to 1.0 (fully opaque). Example: rgba(56, 189, 248, 0.5) is 50% transparent sky blue. The HEX equivalent uses an 8-digit code: #38bdf880 (where 80 hex = 128 = ~50% opacity).
Screens use additive color (RGB light), while print uses subtractive color (CMYK ink on paper). The RGB gamut is larger — many vivid screen colors (especially bright blues, greens, and neons) are outside the CMYK gamut and will print as muted approximations. Always proof in CMYK before printing.
Two methods: (1) Use an 8-digit HEX with alpha: append two hex digits for opacity — #38bdf8ff = fully opaque, #38bdf880 = ~50%, #38bdf800 = invisible. (2) Use RGBA in CSS: rgba(56, 189, 248, 0.5). Both approaches work in all modern browsers.
Both work equally well. HEX is more compact and commonly used for static color values in design systems. RGB/RGBA is preferred when you need alpha transparency or when doing dynamic color math in JavaScript. HSL is the best choice for design token scales because adjusting lightness is intuitive.
HSL (Hue, Saturation, Lightness) describes colors in human-intuitive terms. The Hue is a 0–360° wheel position, Saturation is color intensity (0–100%), Lightness is brightness (0–100%). Use HSL when building tint/shade scales in CSS: hsl(200, 89%, 40%) darkens to hsl(200, 89%, 25%) — same hue, darker shade, no mental math required.
Paste one color per line in the input box. For HEX→RGB mode, enter hex codes (with or without #). For RGB→HEX mode, enter either rgb() notation (rgb(56, 189, 248)) or bare numbers (56 189 248). Invalid lines are marked with a comment. The output updates live as you type.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used in physical printing. CSS and browsers work in the RGB color space because screens emit light — the CMYK model is only meaningful for ink on paper. Use the CMYK values shown here as a reference when sending files to a print shop.