Boring Tools

Color Converter

Open tool

Convert colors between HEX, RGB, and HSL.

Convert a colour between HEX, RGB and HSL — the three notations used in CSS and design tools — and see the colour itself. Pick a colour with the picker, type a hex code, or set the red, green and blue values, and get the other formats ready to copy.

How it works

HEX and RGB describe the same thing in different clothes: #4f46e5 is red 79, green 70, blue 229 (each pair of hex digits is one channel, from 00 to ff, which is 0 to 255). HSL describes the colour as hue (the position on the colour wheel, 0–360°), saturation (how vivid, 0–100%) and lightness (how light or dark, 0–100%). HSL is worked out from RGB and rounded to whole numbers.

The HEX text is the master value: typing there updates the picker, the preview, the RGB boxes and the HSL text. Changing a colour in the picker or in an RGB box rewrites the HEX text to match (in lower case).

How to use it

  1. Pick a starting colour by clicking the colour square, typing a hex code in HEX, or entering red, green and blue values under RGB.
  2. Look at the wide swatch to check it is the colour you meant.
  3. Click the Copy button next to the format you need.

Options & controls

Inputs

Colour picker (the square)
Opens your browser's own colour chooser. Choosing a colour there fills in all three formats. It looks a little different in each browser and operating system.
HEX
Exactly six hexadecimal digits (0–9, a–f), with or without the leading #, in upper or lower case — 4f46e5, #4F46E5. Three-digit shorthand such as #fff is not accepted; write it out as #ffffff.
RGB — Red, Green, Blue
Three number boxes from 0 to 255. Values outside the range are pulled back to the nearest limit, and decimals are rounded.
HSL
Read-only. It shows the colour as hsl(hue, saturation%, lightness%). To change the colour, use HEX, RGB or the picker.

Preview and actions

Swatch
A wide block showing the current colour. It turns white while the HEX text is not valid.
Copy (HEX)
Copies the hex code with a leading #, for example #4f46e5 (even if you typed it without one).
Copy (RGB)
Copies rgb(79, 70, 229), ready to paste into CSS.
Copy (HSL)
Copies hsl(243, 75%, 59%), ready to paste into CSS.
Reset
In the title row. Returns to the starting colour #4f46e5.
Error message
“Enter a valid 6-digit hex color, e.g. #4f46e5” appears while the HEX text is not six hex digits. RGB and HSL show zeros until it is fixed.

Tips & guidelines

  • Type or paste a hex code into HEX to get its RGB and HSL values; edit RGB to nudge a colour and read off the new hex code.
  • In HSL, lowering saturation makes a colour greyer and raising lightness makes it paler — a handy way to find lighter or darker shades of the same colour.
  • The HSL values are rounded to whole numbers, so converting from HSL back to a colour in another tool can be off by one shade. Treat the HEX/RGB value as the exact one.

Limits

  • No transparency (alpha): HEX with eight digits, rgba() and hsla() are not supported.
  • No CSS colour names (red, rebeccapurple), and no other colour models such as CMYK, HSV, or LAB.
  • HSL is display-only, so you cannot type an HSL value and convert from it.

Saved in your browser

Nothing. The colour resets to the default when you refresh.

← All documentation