Color Converter

Convert a color between HEX, RGB, HSL, CMYK and HSV, with a live preview swatch and the closest CSS color name. Edit any format or use the picker — the rest update instantly.

Pick a color, or edit a value below

How to Convert a Color

Three steps, all in your browser.

1

Enter or pick a color

Type a value into the HEX, RGB or HSL field, or click the color picker to choose one visually. The preview swatch shows the current color at all times.

2

Read every format

Whichever field you edit, the other two update instantly — HEX, RGB and HSL stay in sync. Need to convert measurements next? Try the Unit Converter.

3

Copy what you need

Each format has its own copy button, so you can grab the exact code for your CSS or design file. Working with text? The Case Converter is one tab away.

Frequently Asked Questions

What color formats does this convert?
The color converter translates a single color between the three formats used most on the web: HEX, RGB and HSL. HEX is the six-digit hash notation like #4f46e5 (three-digit shorthand like #abc is also accepted). RGB expresses the red, green and blue channels from 0 to 255, written rgb(79, 70, 229). HSL describes the color as hue in degrees, saturation and lightness as percentages, written hsl(244, 76%, 59%). Edit any one of the three fields, or use the color picker, and the other two update instantly along with the preview swatch.
How do I convert HEX to RGB or HSL?
Type or paste your hex value into the HEX field — with or without the leading # — and the RGB and HSL fields fill in automatically. For example, #4f46e5 becomes rgb(79, 70, 229) and hsl(244, 76%, 59%). The conversion is exact: HEX and RGB are two notations for the same 24-bit color, and HSL is derived with the standard sRGB-to-HSL formula. You can also start from RGB or HSL instead — every field is editable and drives the others, so the tool works in any direction.
Can I pick a color visually?
Yes. The native color picker next to the preview swatch opens your operating system's color selector, so you can choose a color by eye and immediately read its HEX, RGB and HSL values. It is the fastest way to sample a shade you have in mind, lighten or darken an existing color, or grab the exact code for a color you have picked, without installing a design app.
What is the difference between RGB and HSL?
RGB and HSL describe the same colors but in different terms. RGB mixes red, green and blue light, which maps directly to how screens render color but is not very intuitive to adjust by hand. HSL separates a color into hue (which color it is, 0–360°), saturation (how vivid it is, 0–100%) and lightness (how light or dark it is, 0–100%). HSL is often easier for design work because you can keep the same hue and just nudge saturation or lightness to build a palette. This tool lets you move between the two freely.
Is the color converter free and private?
Yes. It is completely free with no account or sign-up, and all of the conversion runs in your browser. The colors you enter are never uploaded or stored, so nothing is logged. Once the page has loaded the tool works offline, and each format has a copy button so you can grab the exact value you need for your CSS, design file, or code.