Color Converter — HEX to RGB to HSL and Back

Convert any color between HEX, RGB, and HSL formats instantly, with a live color preview so you always see what you're working with. This free color converter is designed for web designers and front-end developers who need accurate CSS color values without switching between tools.

Why use this Color Converter?

  • Converts between HEX, RGB, and HSL with live visual preview
  • Accepts shorthand HEX codes like #FFF as well as full 6-digit codes
  • Copy any format to clipboard with one click for use in CSS
  • No installation, no account — free and instant in any browser

How to use the Color Converter

  1. Enter a color value: Type or paste a color in any supported format — HEX (#FF5733), RGB (255, 87, 51), or HSL (11°, 100%, 60%).
  2. See all formats instantly: The converter shows the equivalent values in all three formats along with a live color swatch.
  3. Copy your desired format: Click the copy button next to HEX, RGB, or HSL to grab the value for your CSS stylesheet or design tool.
  4. Adjust and iterate: Modify any value and watch all formats and the preview update in real time.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX encodes color as a 6-character hexadecimal string (#RRGGBB), widely used in HTML and CSS. RGB specifies red, green, and blue channel intensities (0–255). HSL describes color using hue (0–360°), saturation (%), and lightness (%) — which is more intuitive for making a color lighter or more vivid.

How do I 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. For example, #3498DB → R=52, G=152, B=219. This converter does it automatically as soon as you paste the code.

Which color format should I use in CSS?

All three formats are valid in modern CSS. HEX is most common for static colors. RGB is useful when you need to control opacity via rgba(). HSL is great when you want to programmatically shift hue or lightness, making it popular in design systems and Tailwind CSS themes.

Why does my HEX color look different in print vs. screen?

HEX/RGB/HSL are RGB-based color models designed for screens (additive color). Print uses CMYK (subtractive color), so the same values can look noticeably different. For print, you'd need a dedicated CMYK conversion workflow.

Can I convert a color from a design tool like Figma to CSS?

Yes. Figma can display colors in HEX, RGB, or HSL. Copy the value from Figma's color panel, paste it into this converter, and get the exact CSS format you need for your stylesheet.

Related tools