Color Code Converter

How to Use This Calculator

1. Select your input mode: HEX to RGB/HSL, or RGB to HEX/HSL.
2. For HEX mode: select or enter a 6-digit hex code (without #).
3. For RGB mode: expand "More options" and enter R, G, B values (0–255 each).
4. All three color format equivalents are shown instantly.

Formula

Example

Frequently Asked Questions

• What is a HEX color code? ▼
  A HEX (hexadecimal) color code is a 6-digit base-16 number prefixed with # that encodes a color as three 2-digit hex values representing the red, green, and blue (RGB) channels. Format: #RRGGBB. Each pair ranges from 00 (decimal 0, no color) to FF (decimal 255, full intensity). For example, #FF5733 means R=255 (full red), G=87 (some green), B=51 (little blue) — an orange-red. A 3-digit shorthand #RGB is also valid in CSS, where #ABC is equivalent to #AABBCC. HEX color codes are the standard in web design, CSS, HTML, and graphic design software. The full range provides 256 × 256 × 256 = 16,777,216 possible colors. An 8-digit hex code (#RRGGBBAA) includes an alpha channel for transparency (00=transparent, FF=fully opaque).
• How do I convert HEX to RGB? ▼
  To convert a hex color to RGB, split the 6-digit hex code into three 2-digit pairs (RR, GG, BB) and convert each from hexadecimal to decimal. Step 1: take the hex code, e.g. #3498DB. Step 2: split into 34 (red), 98 (green), DB (blue). Step 3: convert each — 34 hex = (3×16)+4 = 52; 98 hex = (9×16)+8 = 152; DB hex = (13×16)+11 = 219. Result: rgb(52, 152, 219) — a medium blue. For the reverse, convert each decimal 0–255 to a 2-digit hex: 255 = FF; 128 = 80; 0 = 00. Common conversions: #FF0000 = rgb(255,0,0) red; #00FF00 = rgb(0,255,0) green; #0000FF = rgb(0,0,255) blue; #FFFFFF = rgb(255,255,255) white; #000000 = rgb(0,0,0) black.
• What is HSL color format? ▼
  HSL stands for Hue, Saturation, Lightness — an alternative way to describe colors that is more intuitive than RGB. Hue is a color angle on the color wheel from 0° to 360°: 0°/360° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta. Saturation (0–100%) indicates color purity: 0% = gray (no color), 100% = vivid full color. Lightness (0–100%) controls brightness: 0% = black, 100% = white, 50% = normal color. For example, hsl(204, 70%, 53%) is a medium-bright blue. HSL makes it easy to create color variations: to make a color lighter, increase the L value; to desaturate it, lower S. In CSS, hsl() and hsla() (with alpha) are supported in all modern browsers. Converting HSL to RGB requires a more complex formula involving modular arithmetic on the hue angle.
• What is the difference between RGB and HEX colors? ▼
  RGB and HEX represent the same set of colors but use different notations. RGB notation uses three decimal integers: rgb(255, 87, 51) where each number is 0–255. HEX notation encodes the same values in base 16: #FF5733 where FF=255, 57=87, 33=51. They are mathematically identical — #FF5733 and rgb(255, 87, 51) produce the exact same color. The choice of notation is a matter of context and readability. HEX is more compact (7 characters vs about 16) and is universally supported in HTML attributes, CSS, SVG, and design tools. RGB is more readable to those unfamiliar with hex and makes color math (e.g., blending, brightness adjustment) easier to visualize. Modern CSS also supports named colors (like "tomato" or "cornflowerblue"), rgba() for transparency, and hsl() for hue-based editing.
• What HEX code is pure red, green, and blue? ▼
  Pure red = #FF0000 = rgb(255, 0, 0). Pure green = #00FF00 = rgb(0, 255, 0). Pure blue = #0000FF = rgb(0, 0, 255). These are the three primary colors in the RGB additive color model used by screens and displays. Other key colors: white = #FFFFFF (all channels at max), black = #000000 (all channels at zero), yellow = #FFFF00 (red + green, no blue), cyan = #00FFFF (green + blue, no red), magenta = #FF00FF (red + blue, no green), gray midpoint = #808080. Note that RGB is an additive color model (mixing lights): red + green = yellow, red + blue = magenta, green + blue = cyan, red + green + blue = white. This is the opposite of paint/ink (CMYK subtractive model) where mixing colors produces darker results.

Related Calculators