Color Converter

Convert colors between HEX, RGB, HSL, HSV, CMYK and more. Live preview, palette generator included.

Pick color

Preview

On white: Aa

On black: Aa

Brightness: —

Enter any color value

Color values

HEX

HEX+A

RGB

RGBA

HSL

HSLA

HSV

CMYK

CSS name

Tints & Shades

Color Palette

Complementary

Triadic

Analogous

Split-complementary

Recent colors

menu_book

How to Use Color Converter

To convert a color, enter a value in any supported format — HEX (e.g. #ff5733), RGB (e.g. rgb(255, 87, 51)), or HSL (e.g. hsl(14, 100%, 60%)) — into the corresponding input field. The tool instantly converts the color to all other formats and displays a live color swatch preview.

You can also pick a color visually using the color picker control. Recent colors are saved in the history panel for quick reference. Click any output format's copy icon to copy the color value to your clipboard, ready to paste into your CSS, design tool, or code editor.

help

Frequently Asked Questions

What color formats does this tool convert between? expand_more

The tool converts between HEX (hexadecimal), RGB (red, green, blue), HSL (hue, saturation, lightness), and displays the color visually. These are the most common formats used in web design and CSS.

What is the difference between RGB and HSL? expand_more

RGB defines a color by the intensity of red, green, and blue light (each 0–255). HSL defines it by hue (color angle 0–360°), saturation (vividness 0–100%), and lightness (brightness 0–100%). HSL is often easier for designers to adjust intuitively.

What does the # sign mean in a HEX color code? expand_more

The # prefix indicates that the following string is a hexadecimal color value. The six characters after # represent red, green, and blue as pairs of hex digits, e.g. #FF0000 is pure red.

Can I enter a 3-digit HEX color code? expand_more

Yes. Three-digit HEX codes like #F73 are shorthand for six-digit codes where each digit is doubled, so #F73 is equivalent to #FF7733.

What is HSL useful for in web design? expand_more

HSL makes it easy to create color variations. To make a color lighter or darker, simply adjust the lightness value. To create a muted version, reduce saturation. This is harder to do intuitively with RGB or HEX values.

Related Tools

All Developer Toolsarrow_forward

code

JSON Formatter

Pretty-print, validate and minify JSON with syntax highlighting.

code

Base64 Encode / Decode

Encode strings or files to Base64 or decode Base64 back to text.

code

URL Encode / Decode

Percent-encode URLs or decode percent-encoded strings.

code

HTML Encode / Decode

Escape HTML entities or unescape them back to characters.