Color Code Converter

Convert colours between HEX, RGB and HSL with a live preview; alpha is supported.

Runs in your browser Free

Pick a color

Or type any color

HEX

RGB

HSL

RGBA

HSLA

Convert between colour formats

Design tools use HEX, CSS uses RGB or HSL and some libraries use other formats. Type a colour in any format or use the picker; every other format updates instantly.

Supported formats

HEX: #1e90ff and short #19f
RGB / RGBA: rgb(30, 144, 255)
HSL / HSLA: hsl(210, 100%, 56%)
8-digit HEX with transparency

Why HSL helps

HSL works with hue, saturation and lightness, which makes creating lighter or darker shades of a colour easy. Copy any value with one click. Conversions happen in your browser.

How to use Color Code Converter

Type a colour code in any format or use the picker.
The other formats are calculated instantly.
Check the colour in the live preview.
Copy the format you need.

Why use this tool?

Move colours between design and code accurately in seconds.

FAQ

Does it support transparency?

Yes. 8-digit HEX, rgba() and hsla() values keep the alpha channel.

Are short HEX codes (#19f) supported?

Yes, 3- and 4-digit short HEX codes are recognised and expanded to the full form.

How do I find a colour in an image?

Use the Image Color Picker to get the colour of a pixel in a photo.

Related tools

Private

Image Color Picker

Pick the colour of any pixel in a photo or screenshot as HEX, RGB and HSL.

Open tool

Private

CSS Gradient Generator

Design linear and radial CSS gradients with multiple colour stops and a live preview.

Open tool

Private

Box Shadow Generator

Create CSS box-shadow values with offset, blur, spread, colour and inset controls.

Open tool

Private

Dominant Color Extractor

Extract an image's main colour palette automatically and copy the colours as HEX/RGB.

Open tool