All tools · Utilities

Color Converter

Convert between HEX, RGB, and HSL with a live swatch.

Free to use, no sign-up required. Color Converter is one of 198 tools built into Xenition, alongside a chat that can use them for you.

Converts a colour between HEX, RGB and HSL and shows it in a swatch. Use it when a design file gives one format and your CSS or app needs another.

How to use Color Converter

  1. Pick a colour with the swatch, or type a 6-digit hex code such as #2D4EAA into the box.
  2. Read the HEX, RGB and HSL rows below.
  3. Tap any row to copy that value.
  4. If you see “Enter a valid 6-digit hex color.”, check for a missing digit; 3-digit shorthand is not accepted.

How it works

The hex code is split into red, green and blue values from 0 to 255. HSL uses the standard conversion: lightness is the average of the largest and smallest channel, saturation is their difference divided by (1 − |2L − 1|), and hue is set by which channel is largest. Hue, saturation and lightness are rounded to whole numbers.

Example

#2D4EAA gives rgb(45, 78, 170) and hsl(224, 58%, 42%).

Questions about Color Converter

When should I use HSL instead of HEX?

HSL makes it simple to adjust a colour by hand: raise the lightness for a paler tint or lower the saturation for a greyer tone, while keeping the same hue.

Why might converting back from HSL give a slightly different hex?

HSL is rounded to whole degrees and percentages, so the round trip can move a channel by one or two steps.

Use it from chat

You do not have to open Color Converter to use it. Ask Xenition in plain language and it runs the right tool, then carries the answer into whatever you are working on — a document, a spreadsheet, a deck.

Related tools