---
title: "How to convert HEX to RGB and HSL colors | ToolSugar"
description: "Convert a color between HEX, RGB and HSL, check its WCAG contrast against white and black, and build a quick scale of tints and shades."
canonical: https://toolsugar.com/blog/how-to-pick-a-color-code
image: https://toolsugar.com/og.png
---

# How to convert HEX to RGB or HSL and check contrast

Updated 2026-11-09

To convert HEX to RGB or HSL, split the HEX code into red, green and blue pairs and read each pair as a number from 0 to 255. Color Picker does the math in your browser and updates all three formats at once. It also reports the WCAG contrast ratio against white and black, and builds tints and shades.

[Open Color Picker](https://toolsugar.com/tools/color-picker)

## Convert a color in four steps

You can start from any of the three formats. The other two fill in when you type.

1. Click the color box to pick a color, or type into the HEX, RGB or HSL field.
2. Read the other two fields and press Copy on any of them.
3. Check the contrast ratios against white and black and their AA and AAA results.
4. Use the tints and shades rows to choose related colors.

## How the three formats relate

HEX and RGB describe the same thing. #ff8800 is red 255, green 136 and blue 0. HSL describes the color by hue (an angle on the color wheel), saturation and lightness, which is easier to adjust by hand.

To make a color lighter in CSS, raise the L value in hsl() instead of guessing new HEX digits. The tool accepts 3 or 6 digit HEX, rgb() and hsl().

## Check contrast for readable text

The WCAG ratio runs from 1:1, with no difference, to 21:1, which is black on white. The usual targets are 4.5:1 for normal text at level AA and 7:1 at level AAA. Large text needs less. Large text means about 24 pixels, or 19 pixels in bold, and it needs 3:1 at level AA. Contrast also matters for icons and form borders, where 3:1 is the common minimum. A pale gray on white can look elegant in a mockup and still be unreadable on a phone in sunlight.

The tool tests your color as text on white and on black. If both fail, the color is a poor text color, and you should use it for shapes and large headings only.

## Tints and shades

A tint mixes the color with white, and a shade mixes it with black. The tool shows nine of each, which gives a quick scale for hover states, borders and backgrounds that stay in one family.

## Questions

### What does a 3 digit HEX code mean?

Each digit is doubled, so #f80 is the same as #ff8800. It is a shorthand and works only when each pair repeats a digit.

### Does it handle transparency or 8 digit HEX codes?

No. It reads 3 or 6 digit HEX and opaque rgb() and hsl() values. Convert the color first, then add the alpha value yourself in your CSS.

### Should I use HEX, RGB or HSL in CSS?

All three work in a browser. HEX is the shortest to copy, and HSL is easiest when you plan to make lighter or darker variants.

### Does the picker read a color from an image?

No. It converts a color you choose or type. Use Image Color Picker when you need to sample a pixel from a photo.

[Open Color Picker](https://toolsugar.com/tools/color-picker)

## Related guides

- [How to make a favicon from an image](https://toolsugar.com/blog/how-to-make-a-favicon)
- [How to get a color from an image](https://toolsugar.com/blog/how-to-get-a-color-from-an-image)
- [How to make a QR code from a link or text](https://toolsugar.com/blog/how-to-make-a-qr-code)
- [How to compare two texts and find the differences](https://toolsugar.com/blog/how-to-compare-two-text-files)