RGB to HEX Color Converter
Convert colors between RGB, HEX, and HSL formats instantly.
All conversions run live in your browser using standard color space formulas (sRGB → HSL, HSB/HSV, CMYK).
What Is the RGB to HEX Color Converter?
This converter translates colors between RGB, HEX, HSL, HSB/HSV, and CMYK color models with a live swatch preview and one-click copy buttons. Use RGB mode, HEX input mode, or the color picker for maximum flexibility. Named CSS colors are detected automatically.
- ›RGB: red/green/blue channels 0–255, standard for screen displays
- ›HEX: #RRGGBB, compact notation used in CSS, HTML, and design tools
- ›HSL: hue/saturation/lightness, perceptually intuitive for web design
- ›HSB/HSV: hue/saturation/brightness, used in Photoshop and design apps
- ›CMYK: cyan/magenta/yellow/key (black), used for print production
Formula
Color Space Conversions
HEX → RGB
RR,GG,BB = parse hex pairs (base 16)
RGB → HEX
#RRGGBB = each channel to 2-digit hex
RGB → HSL
H=hue angle°, S=saturation%, L=lightness%
RGB → HSB/HSV
H=hue°, S=saturation%, B=brightness%
RGB → CMYK
C,M,Y,K = subtractive color model
Shorthand HEX
#RGB → #RRGGBB (e.g., #F0A = #FF00AA)
How to Use
- 1Choose input mode: RGB (sliders + numbers), HEX (text input), or Color Picker
- 2In RGB mode: enter R, G, B values (0–255) or drag the sliders
- 3In HEX mode: enter a 3-digit or 6-digit HEX code with or without #
- 4In Color Picker mode: click the color swatch to open the browser color picker
- 5Click "Convert" (or pick a color), all formats appear with individual Copy buttons
Example Calculation
Convert RGB(255, 87, 51), a vivid orange-red:
RGB: rgb(255, 87, 51)
HSL: hsl(11°, 100%, 60%)
HSB: hsb(11°, 80%, 100%)
CMYK: cmyk(0%, 66%, 80%, 0%)
CSS name:, (not a named color)
Shorthand HEX codes
3-digit HEX shorthand: #RGB where each digit is doubled, #F53 expands to #FF5533. Only colors with repeated hex pairs can use shorthand: #FFF = #FFFFFF (white), #000 = #000000.
Understanding RGB to HEX Color Converter
Color Format Reference
| Format | Example | Range | Use case |
|---|---|---|---|
| HEX | #FF5733 | #000000 – #FFFFFF | CSS, HTML, design tools |
| RGB | rgb(255, 87, 51) | 0–255 per channel | CSS, image processing |
| HSL | hsl(11, 100%, 60%) | H:0–360, S/L:0–100% | CSS color theming |
| HSB/HSV | hsb(11, 80%, 100%) | H:0–360, S/B:0–100% | Photoshop, design apps |
| CMYK | cmyk(0,66,80,0)% | 0–100% each | Print/offset production |
Frequently Asked Questions
What is the difference between RGB and HEX?
Both notations specify the same three color channels, only the number base differs. Hex is more compact; RGB is easier for human arithmetic.
- ›#FF0000 = rgb(255, 0, 0) = pure red
- ›#00FF00 = rgb(0, 255, 0) = pure green (lime)
- ›#0000FF = rgb(0, 0, 255) = pure blue
- ›Hex 00–FF corresponds to decimal 0–255 (256 steps per channel)
What is the difference between HSL and HSB/HSV?
HSL and HSB differ only in how they define the third axis (L vs. B/V). Both are more intuitive than RGB for color selection.
- ›HSL L=50%: pure fully-saturated color; L=0% = black; L=100% = white
- ›HSB B=100%: full brightness (could be white if S=0%); B=0% = black
- ›Pastel colors: HSL S=100%, L=80% vs. HSB S=20%, B=100%
- ›CSS uses hsl() and oklch(); design apps (Photoshop, Figma) use HSB
What is CMYK and when do I need it?
Screens emit light (additive RGB). Printers absorb light (subtractive CMYK). The same color looks different in each model, professional print work requires careful color conversion.
- ›CMYK white = (0%, 0%, 0%, 0%), no ink = white paper
- ›CMYK black = (0%, 0%, 0%, 100%), pure K avoids color cast
- ›sRGB → CMYK: C=1−R/255, M=1−G/255, Y=1−B/255, then add K
- ›This is a simplified conversion, professional print needs ICC color profiles
What does hue mean in HSL/HSB?
The hue wheel organizes all visible colors by their dominant wavelength. Complementary colors are 180° apart; analogous colors are nearby.
- ›0°/360° = red, 60° = yellow, 120° = green
- ›180° = cyan, 240° = blue, 300° = magenta
- ›Complementary pairs: red(0°)+cyan(180°), blue(240°)+yellow(60°)
- ›Triadic harmony: 3 colors 120° apart, red, green, blue
What are named CSS colors?
Named colors provide convenient, memorable shorthand for common colors in web development. They are standardized in the CSS Color Level 4 specification.
- ›Common names: red, blue, green, yellow, orange, purple, pink, gray, black, white
- ›Extended names: tomato, coral, salmon, goldenrod, mediumseagreen, royalblue
- ›Only exact HEX matches trigger the name detection in this tool
- ›Use named colors in CSS for readability: color: tomato vs. color: #FF6347
What is the color picker mode?
The browser's native color picker provides a visual interface for color selection, useful when you want to explore colors rather than entering specific values.
- ›Click the color swatch in the picker tab to open the browser color picker
- ›The picker returns a HEX value which is instantly converted to all formats
- ›Works in all modern browsers on desktop and mobile
- ›The selected color persists across sessions via localStorage
How do I check color contrast for accessibility?
Relative luminance uses a non-linear (gamma-corrected) formula from the RGB values. For accessible web design, always check contrast between text and background colors.
- ›WCAG AA (normal text): contrast ratio ≥ 4.5:1
- ›WCAG AA (large text ≥18pt): contrast ratio ≥ 3:1
- ›WCAG AAA (enhanced): contrast ratio ≥ 7:1
- ›Black on white = 21:1 (maximum); many "attractive" color combos fail accessibility