Skip to main content

Color Converter

Loading…

About Color Converter

The Color Converter translates color values between the three most common web formats — HEX, RGB, and HSL — instantly and in both directions. Enter any valid color in one field and the other two update automatically.

Type a HEX code like #3b82f6, an RGB value like rgb(59, 130, 246), or an HSL value like hsl(217, 91%, 60%) and the tool converts it immediately. Use the interactive hue, saturation, and lightness sliders to explore and fine-tune colors visually, or click the color swatch to open your browser's native color picker.

Each format has a one-click copy button for the exact CSS-ready string. The 'All formats' strip at the bottom lets you copy HEX, rgb(), hsl(), or 8-digit HEX (with full opacity) in a single click — handy when pasting into Figma, CSS files, or design tokens.

HEX is the most common format for web colors and design tools. RGB is used in CSS, canvas, and image processing. HSL (Hue, Saturation, Lightness) is the most human-intuitive format, making it easy to adjust brightness and vividness without changing the base hue.

All conversion happens locally in your browser. Nothing is uploaded or stored.

How to Use Color Converter

  1. Type or paste a color value into any field — HEX (#3b82f6), RGB (59, 130, 246), or HSL (217, 91%, 60%).

  2. The other two formats update instantly.

  3. Use the hue, saturation, and lightness sliders to visually adjust the color, or click the swatch to open the native color picker.

  4. Click any 'Copy' button or use the 'All formats' strip to copy the value you need.

Examples

Example — HEX → RGB + HSL
Input
#3b82f6
Output
rgb(59, 130, 246) · hsl(217, 91%, 60%)
Example — RGB → HEX + HSL
Input
rgb(16, 185, 129)
Output
#10b981 · hsl(160, 84%, 39%)
Example — HSL → HEX + RGB
Input
hsl(0, 84%, 60%)
Output
#f05252 · rgb(240, 82, 82)

Frequently Asked Questions

What color formats does it support?

HEX (3-digit and 6-digit, e.g. #3b82f6), RGB (e.g. 59, 130, 246 or rgb(59,130,246)), and HSL (e.g. 217, 91%, 60% or hsl(217,91%,60%)).

Can I paste a full CSS color string?

Yes — paste rgb(59, 130, 246) or hsl(217, 91%, 60%) directly into the RGB or HSL field and it will be parsed correctly.

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

HEX is a 6-character hexadecimal shorthand for RGB values, widely used in HTML and CSS. RGB specifies the red, green, and blue channel intensities (0–255). HSL separates hue (color family, 0–360°), saturation (vividness, 0–100%), and lightness (brightness, 0–100%), making it easier to reason about and tweak colors.

What is an 8-digit HEX code?

An 8-digit HEX code adds two extra digits for the alpha (opacity) channel. FF at the end means fully opaque. For example, #3b82f6FF is the same as #3b82f6 but with explicit full opacity — useful for design tools that require alpha.

How does the hue slider work?

Dragging the hue slider changes the base color family (red → orange → yellow → green → blue → violet → back to red) while keeping the saturation and lightness the same.

Can I use this tool to pick colors for CSS?

Yes — all three formats are valid in modern CSS. HEX and rgb() have universal support; hsl() is supported in all modern browsers and is especially useful when programmatically adjusting color lightness in themes.