Color Code Converter
HEX ↔ RGB ↔ HSL ↔ HSV
Color codes are the universal language of digital design — every button, background, and gradient on the web is defined by a HEX, RGB, or HSL value. Convert instantly between all four formats with a live color preview. Paste any HEX code, type an RGB value, or pick from the color swatch and see every equivalent format update in real time.
Color Models Explained
HEX — the web standard
HEX codes are six-digit combinations of numbers and letters (0–9, A–F) preceded by a #, representing red, green, and blue channels in pairs. They are the default format for HTML, CSS, and SVG. A shorthand 3-digit form is also valid: #fff expands to #ffffff. Example: #3498DB is a clear sky blue, while #E74C3C is a vivid red alert color.
RGB — screen-native format
RGB defines a color by the intensity of red, green, and blue light on a 0–255 scale, matching how every LCD, OLED, and LED screen physically works. It is the native format for CSS (rgb(52, 152, 219)), canvas drawing, and image processing. Designers often prefer RGB when fine-tuning individual channel brightness — for example, warming a photo by nudging the red channel up.
HSL — designer-friendly
HSL (Hue, Saturation, Lightness) expresses color in human terms. Hue is the color wheel angle (0–360°), saturation is the intensity from grey to vivid (0–100%), and lightness goes from black to white (0–100%). This makes it easy to create consistent color palettes: keep the hue fixed and vary only the lightness to get shades of the same color. CSS supports hsl(204, 70%, 53%) natively.
HSV — used in design tools
HSV (Hue, Saturation, Value) replaces Lightness with Value (brightness), and is the model used in Photoshop's color picker, Figma, and most professional design applications. At maximum Value, a color is fully bright. Reducing Value dims it without mixing in white. When copying colors from Photoshop into CSS, you need to convert HSV → HEX or RGB, which is exactly what this tool does.
HEX #RRGGBB → RGB(R, G, B) → HSL(H°, S%, L%) → HSV(H°, S%, V%) When to use each format
Use HEX for production CSS and design tokens — it is the most compact and universally supported. Use RGB when you need to manipulate channels individually or apply opacity (rgba). Use HSL when building a design system and you want predictable light/dark variants of each brand color. Use HSV when working inside Photoshop or Figma, where the color picker outputs this format by default.
Color Model Comparison
| Model | Use Case / Value | Range / Result |
|---|---|---|
| HEX | Web/CSS, digital design | #000000 – #FFFFFF |
| RGB | Screen displays, digital imaging | 0–255 each channel |
| HSL | Intuitive design, color picking | H:0–360°, S:0–100%, L:0–100% |
| HSV | Photoshop, design tools | H:0–360°, S:0–100%, V:0–100% |
Frequently Asked Questions
How do I convert HEX to RGB?
Enter a HEX code like #3498db into the input field. The tool instantly converts it to RGB, HSL, and HSV formats.
Does this tool support shorthand HEX like #fff?
Yes, both 3-digit and 6-digit HEX codes are supported. #fff expands to #FFFFFF automatically.
Can I paste an RGB or HSL string directly?
Yes. The tool auto-detects formats like rgb(52,152,219) or hsl(204,70%,53%) and converts correctly.
Is the color preview live and accurate?
Yes, as you type the color swatch updates instantly to show the actual color across all formats.
Can I use this tool offline?
Yes, Color Code Converter works entirely in your browser. No internet connection required after the page loads.
What is the formula for Color Code Converter?
HEX #RRGGBB → decimal RGB components → HSL uses hue angle 0-360°, saturation and lightness percentages. HSV uses hue, saturation, and value percentages.