Loading Calculator...
Please wait a moment
Please wait a moment
Convert RGB color values to hexadecimal codes with live preview. Includes bonus HSL conversion for advanced color work.
CSS Format Examples:
color: #3B82F6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);
RGB (Red, Green, Blue) is an additive color model where colors are created by combining different intensities of red, green, and blue light. Each channel ranges from 0 (none) to 255 (maximum), giving 16.7 million possible colors (256³). RGB is the native color space for digital displays - every pixel on your screen uses RGB. When all three values are equal, you get grayscale colors; when all are 0, you get black; when all are 255, you get white.
To convert RGB to hex, convert each color channel from decimal (0-255) to hexadecimal (00-FF). For example, RGB(59, 130, 246): 59 = 3B, 130 = 82, 246 = F6, resulting in #3B82F6. The conversion formula: divide the decimal by 16 to get the first hex digit, use the remainder for the second digit. Most programming languages and design tools can do this automatically, but understanding the process helps debug color issues.
HSL (Hue, Saturation, Lightness) is an alternative color representation that's often more intuitive for designers. Hue (0-360°) is the color type (red, green, blue, etc.), Saturation (0-100%) is color intensity (0% = gray, 100% = vivid), and Lightness (0-100%) is brightness (0% = black, 50% = pure color, 100% = white). HSL makes it easier to create color variations - just adjust lightness for tints/shades or saturation for vibrancy.
Convert each RGB value (0-255) to hexadecimal (00-FF). Divide by 16: the quotient is the first digit, the remainder is the second. For example, 130: 130÷16=8 remainder 2, so 130 = 82 in hex. Combine all three conversions with a # prefix. RGB(59, 130, 246) becomes #3B82F6. Use a calculator or conversion table for accuracy.
Each RGB value (0-255) represents the intensity of red, green, or blue light. 0 means none of that color, 255 means maximum. RGB(255, 0, 0) is pure red, RGB(0, 255, 0) is pure green, RGB(0, 0, 255) is pure blue. Combinations create other colors: RGB(255, 255, 0) is yellow (red + green), RGB(255, 0, 255) is magenta (red + blue).
Both are valid and widely supported. Hex (#3B82F6) is more compact and traditional. RGB (rgb(59, 130, 246)) is more readable and allows easy RGBA transparency: rgba(59, 130, 246, 0.5). Use hex for simple colors and RGB/RGBA when you need transparency. Modern CSS also supports HSL, which is great for creating color variations programmatically.
HSL (Hue, Saturation, Lightness) represents colors in a more intuitive way than RGB or hex. It's excellent for creating color schemes - you can keep hue constant and vary lightness/saturation for related colors. Use HSL in CSS when you want to programmatically adjust colors (like hover states) or when designing accessible color palettes with consistent contrast ratios.
In RGB, multiply all three values by the same factor (e.g., 0.5 for darker, 1.5 for lighter), clamping at 0-255. In HSL, it's easier: adjust the lightness value - increase for lighter, decrease for darker, keeping hue and saturation constant. For tints (lighter), also decrease saturation slightly. For shades (darker), you might increase saturation slightly for richer colors.