GenerateRandomSearch

Colour Format Converter

Converting a colour between notations has a trap in it. HSL is a cylinder and RGB is a cube, so the trip between them rounds — and a converter that shows rounded values and then works from them gives you a colour a shade off the one you started with. Here every notation is worked out from the original channels, and the check reads each one back to confirm it lands where it should.

What this generator does

Reads the colour in whichever notation you give it, works out the other two from the original channels rather than from a rounded version, and reports the contrast against black and white.

How to use this tool

  1. Paste a colour in any of the three notations.
  2. It works out which you meant — hex, RGB or HSL.
  3. Read all three, and the contrast against black and white.
  4. Short hex like #abc is accepted and expanded.

Understanding the controls

A colour
Hex with or without the hash, long or short; RGB with or without the wrapper; or HSL with or without the units. The notation is worked out from what you type.

Common use cases

  • Getting the RGB of a hex colour from a brand guide
  • Finding the HSL of a colour to adjust its lightness
  • Checking whether text will be legible on a background
  • Converting a colour picked in one tool for use in another
  • Reading a colour written in an unfamiliar notation

How this generator works

Each notation is parsed back and must land on the same colour. Hex and RGB have to match exactly, channel for channel. HSL is written rounded to whole degrees and per cent, so it may land slightly off — and the limit is measured rather than guessed: a sweep across the colour space puts the worst case at five parts in 255, on a deeply saturated blue, and anything beyond that is a mistake rather than rounding.

Randomness and fairness

Nothing is random. The same colour always converts the same way.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

  • Hex, RGB and HSL. Newer notations such as OKLCH and LAB are a different colour model and are handled elsewhere on the site.
  • No transparency: an alpha channel is not read or produced.
  • The values shown are rounded for reading, so pasting the HSL back gives a colour within a few parts in 255 rather than exactly the same one.
  • Contrast is reported against plain black and white only.

Privacy and your data

Colours are converted in your browser. Nothing you paste is transmitted or stored.

Related generators