Wyvek

Color Converter

Convert colors between HEX, RGB, and HSL.

RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

Free online color converter

This color converter translates any color between the three formats you use most on the web: HEX, RGB, and HSL. Pick a color with the native color picker, paste a hex code, or type raw channel values — every other representation updates live, and the large swatch shows exactly what you'll get. It's built for designers, front-end developers, and anyone matching brand colors across CSS, design tools, and style guides.

How to convert a color

  1. Choose a starting point: use the color picker, or type into the HEX, RGB, or HSL fields.
  2. Watch the other formats and the preview swatch update instantly as you edit.
  3. Fine-tune with the RGB (0–255) or HSL (hue 0–360, saturation and lightness 0–100) inputs.
  4. Click Copy next to the HEX, rgb(), or hsl() value to grab it for your stylesheet.

HEX, RGB, and HSL explained

HEX codes like #3b82f6 pack red, green, and blue into three two-digit hexadecimal pairs — compact and perfect for CSS. RGB expresses the same channels as decimal numbers from 0 to 255, which is handy when a design tool reports values that way. HSL describes a color by hue, saturation, and lightness, making it easy to build consistent tints and shades by nudging a single number. Because all three describe the same color space, converting between them is lossless for whole-number values.

Related tools

Working with color codes often goes hand in hand with other quick utilities. Turn a link or palette note into a scannable image with the QR code generator, or encode assets and data URIs with the Base64 encoder. Everything runs entirely in your browser, so your work stays private.

Frequently asked questions

How do I convert HEX to RGB?

Paste or type your HEX code (for example #3b82f6) into the HEX field and the tool instantly fills in the matching RGB values. It reads the red, green, and blue channels from the two-digit pairs in the hex string and shows them as numbers from 0 to 255, along with a ready-to-copy rgb() string.

How do I convert RGB to HEX?

Enter your red, green, and blue values (each 0–255) in the RGB fields. The converter maps every channel to a two-digit hexadecimal value and joins them with a leading hash, giving you a standard 6-digit HEX color code you can copy with one click.

What is HSL and why would I use it?

HSL stands for Hue, Saturation, and Lightness. Hue is the angle on the color wheel (0–360°), saturation is how vivid the color is (0–100%), and lightness is how bright it is (0–100%). HSL is popular in CSS because it makes it intuitive to create lighter or darker variations of a color by only changing the lightness.

Does editing one format update the others?

Yes. The color picker, HEX input, RGB inputs, and HSL inputs all stay in sync. Change any single value and every other representation — plus the large preview swatch — updates live, so you always see the same color expressed in every format at once.

Are 3-digit hex shorthand codes supported?

Yes. Shorthand codes like #f80 are expanded automatically, so #f80 is read the same as #ff8800. The leading hash is optional in the HEX field, and out-of-range values are gently clamped to their valid limits.

Is my color data sent anywhere?

No. Every conversion runs entirely in your browser with JavaScript. Nothing you type is uploaded or stored, so the tool is fast, private, and works even offline once the page has loaded.

Base64 Encode / Decode Encode or decode Base64 text and data URIs. URL Encoder / Decoder Percent-encode or decode URLs and query strings. HTML Entity Encoder / Decoder Escape or unescape HTML entities like &. Number Base Converter Convert between binary, octal, decimal & hex.