Free Online Hex / RGB / HSL Converter
Convert colors between hex, RGB & HSL formats
Try these next
About this tool
Convert colors between hex, RGB, and HSL formats instantly. Our free online color converter lets you paste any color value — a hex code like #3B82F6, an RGB triplet like rgb(59, 130, 246), or an HSL value like hsl(217, 91%, 60%) — and see the equivalent in every other format in real time. A large color preview swatch updates live as you type, so you can visually confirm the color you are working with. Each format row has a one-click copy button that places the correctly formatted CSS string on your clipboard, ready to paste into your stylesheet, design tool, or Figma plugin. The converter handles 3-character hex shorthand, clamps RGB values to 0-255 and HSL values to valid ranges, and highlights invalid input so you catch typos immediately. All processing happens entirely in your browser with no server calls and no data stored. Whether you are translating a brand color from a style guide, debugging a CSS gradient, or converting between design tools that use different formats, this converter gives you the answer in one glance.
Frequently Asked Questions
A hex color code is a 6-digit hexadecimal number preceded by a # symbol that represents a color. The six digits are three pairs: the first pair is the red channel (00-FF), the second is green, and the third is blue. For example, #FF0000 is pure red and #000000 is black. CSS also supports 3-digit shorthand where each digit is doubled — #F00 is the same as #FF0000.
RGB defines colors by mixing red, green, and blue light (each 0-255). HSL defines colors by hue (0-360° on the color wheel), saturation (0-100%, intensity), and lightness (0-100%, light to dark). HSL is often more intuitive for humans — to make a color lighter you increase L, to desaturate you decrease S — while RGB maps directly to how screens display color.
All three formats are valid in CSS and render identically. Hex is the most compact and widely used in codebases. RGB is clearest when you need to set individual channels programmatically. HSL is best when you want to create color variations — adjusting lightness or saturation is straightforward. Modern CSS also supports oklch and oklab for perceptually uniform color spaces.
Split the hex code into three pairs (e.g., #3B82F6 → 3B, 82, F6). Convert each pair from hexadecimal to decimal: 3B = 59, 82 = 130, F6 = 246. The result is rgb(59, 130, 246). For 3-digit hex, double each digit first: #F00 → FF0000 → rgb(255, 0, 0).
No. All color conversion happens entirely in your browser using JavaScript. No data is transmitted, stored, or logged. Your colors stay completely private on your device.
Related Tools
Discover more free utilities to enhance your productivity.