Color Converter
Convert colors between HEX, RGB, and HSL formats
Convert colors instantly between HEX, RGB, and HSL formats. See a live preview, copy CSS-ready values, and choose from preset colors. Essential for web developers, designers, and anyone working with digital color.
Enter a color in any format — HEX (#3B82F6), RGB (59, 130, 246), or HSL (217, 91, 60) — and get instant conversions to all three formats with a visual preview.
Tu siguiente paso
HEX to RGB Color Converter
How to Use This Color Converter
- Select your input format — Choose HEX, RGB, or HSL depending on the color value you have.
- Enter the color value — Type or paste your color code. For HEX, include or omit the # symbol.
- View all conversions — The tool instantly shows the equivalent value in all three formats.
- Copy the value you need — Click "Copy" next to any format to copy CSS-ready code to your clipboard.
Understanding Color Formats
HEX (Hexadecimal)
HEX colors use a 6-digit code representing red, green, and blue channels. Each pair of digits ranges from 00 (no color) to FF (full color). Example: #3B82F6 means R=3B (59), G=82 (130), B=F6 (246).
RGB (Red, Green, Blue)
RGB uses three decimal numbers from 0-255. This is the most intuitive format — each number directly controls one color channel. Example: rgb(59, 130, 246).
HSL (Hue, Saturation, Lightness)
HSL is the most human-readable format. Hue (0-360) is the color on the wheel, Saturation (0-100%) is color intensity, and Lightness (0-100%) controls brightness. Example: hsl(217, 91%, 60%).
Color Conversion Formulas
HEX to RGB: Split the 6-digit hex into 3 pairs, convert each pair from base-16 to base-10.
RGB to HSL: Normalize R, G, B to 0-1 range. Find max and min values. Lightness = (max+min)/2. Saturation and Hue are derived from the channel differences.
HSL to RGB: Calculate chroma (C), then derive R, G, B using the hue sector (which 60-degree segment of the color wheel).
Common Web Colors Reference
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Tailwind Blue | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
Sources
- W3C CSS Color Level 4 specification
- Conversion formulas: CSS Color Module Level 4 (w3.org/TR/css-color-4)
Related Calculators
- Percentage Calculator — Calculate percentages for opacity and saturation values
- Unit Converter — Convert between different measurement units
Preguntas frecuentes
HEX uses a 6-digit hexadecimal code (#RRGGBB) — compact and widely used in HTML/CSS. RGB specifies red, green, and blue channels as numbers from 0-255 — intuitive for mixing light. HSL uses Hue (0-360 degrees on the color wheel), Saturation (0-100%), and Lightness (0-100%) — the most human-readable format for adjusting colors.
Split the 6-digit hex code into three 2-digit pairs (RR, GG, BB) and convert each from hexadecimal (base 16) to decimal (base 10). For example, #3B82F6: 3B = 59, 82 = 130, F6 = 246, so the RGB is (59, 130, 246). For 3-digit shorthand like #FFF, expand each digit: F→FF, F→FF, F→FF = #FFFFFF = rgb(255, 255, 255).
All three formats work in CSS. HEX (#3B82F6) is the most compact and widely used. RGB rgb(59, 130, 246) is clearer when you need to understand individual channels. HSL hsl(217, 91%, 60%) is best when you want to create color variations — just adjust lightness for lighter/darker shades or saturation for more/less vivid colors.
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0 = red, 120 = green, 240 = blue). Saturation is color intensity — 100% is full color, 0% is gray. Lightness is brightness — 0% is black, 100% is white, 50% is the pure color. HSL is intuitive because you can darken a color by just decreasing lightness.
Yes. 3-digit HEX codes are shorthand where each digit is doubled. #FFF becomes #FFFFFF (white), #F00 becomes #FF0000 (red), #369 becomes #336699. This converter accepts both 3-digit and 6-digit HEX codes. Note that 3-digit codes can only represent 4,096 colors versus 16.7 million for 6-digit codes.
The complementary color is directly opposite on the color wheel. In HSL, add 180 degrees to the hue. For example, blue at hsl(217, 91%, 60%) has a complement at hsl(37, 91%, 60%) which is orange. In RGB, subtract each channel from 255: the complement of rgb(59, 130, 246) is rgb(196, 125, 9).
RGBA adds an alpha (transparency) channel to RGB. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). Example: rgba(59, 130, 246, 0.5) is the blue color at 50% opacity. In modern CSS, you can also write rgb(59 130 246 / 50%). HEX supports alpha too: #3B82F680 (the last two digits are alpha).
Mantente actualizado
Recibe nuevas calculadoras y consejos en tu correo.