Color Converter Online - Free HEX/RGB/HSL Converter

Features

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

Visual color picker

Live preview

CSS variable output

How to Use

1. Pick a color (or click the stage, paste a HEX, use the eyedropper, or press Space for random).

2. Every format — HEX, RGB, HSL, OKLCH — converts live in both directions.

3. Copy a single value or the whole CSS variable block; switch the stage surface to judge the color on white, grey, or deep.

About this tool

Designers pick colours visually, CSS needs a string, and different tools speak different formats. This converter keeps one colour in sync across HEX, RGB, HSL and OKLCH: change any field or use the picker and the rest update instantly. HEX and RGB describe the red, green and blue channels; HSL describes hue, saturation and lightness, which is easier to adjust by hand; OKLCH is a newer perceptual format in CSS Color Level 4 where equal steps in lightness look equal to the eye, making it better for building consistent palettes. You can copy a single value or a ready-made block of CSS custom properties, and preview the colour on white, grey or dark surroundings before using it.

Frequently Asked Questions

Which format should I use in CSS?

HEX and rgb() work everywhere and are fine for fixed colours. hsl() is convenient when you want to tweak lightness or saturation by hand. oklch() is supported by current browsers and is best for systematic palettes because its lightness is perceptually uniform.

Why do HSL lightness 50% colours look so different in brightness?

HSL is a mathematical rearrangement of RGB, not a model of human vision, so a 50% yellow looks far brighter than a 50% blue. OKLCH lightness is designed to match perceived brightness, which is why it is increasingly used for design systems.

Why might a converted value differ slightly when converted back?

HEX and RGB store whole numbers from 0 to 255, while HSL and OKLCH use decimals. Rounding during conversion can move a channel by one step, which is not visible to the eye.

Can I pick a colour from somewhere else on my screen?

In browsers that support the EyeDropper API, such as Chrome and Edge on desktop, the eyedropper button lets you sample any pixel on screen. Other browsers show the standard colour picker instead.

What does the CSS variable block contain?

It lists the same colour as custom properties in several formats, for example --color-hex, --color-rgb, --color-hsl and --color-oklch, so you can paste them into :root and reference whichever format your code needs.