Colour Converter

About the Colour Converter

Design tools, CSS and brand guidelines all describe colour differently. This converter takes a HEX, RGB or HSL value and shows the other two formats immediately, with a large swatch so you can confirm you have the colour you expected.

HSL is included because it is far easier to adjust by hand: change the lightness and you have a matching tint without guessing at new hexadecimal digits.

How to use the Colour Converter

1. 1Type a HEX code, or adjust the RGB or HSL fields.
2. 2Watch the preview swatch update as you edit.
3. 3Read the other formats, which stay in sync.
4. 4Copy the format your project needs.

Features

• Two-way conversion between HEX, RGB and HSL
• Large live preview swatch
• Three and six digit HEX input accepted
• Native colour picker support
• Copy-ready CSS strings

Why people use it

• Move a brand colour from a design file into CSS accurately.
• Create lighter or darker variants using HSL.
• Check that a value you were sent is the colour you expected.

Common use cases

• Converting a brand HEX code into an RGB value for a document.
• Building a hover state by lowering lightness slightly.
• Reading an RGB value out of a screenshot inspector.

Privacy and your data

Everything you type or open here is processed by your own browser. No file, text or result is uploaded to a server, stored in a database or shared with anyone, and closing the tab clears it completely.

Frequently asked questions

Related tools