# Color converter (HEX, RGB, HSL)

URL: https://shahid09.is-a.dev/tools/color-converter/
Author: Muhammad Shahid (https://shahid09.is-a.dev/)
Free tool · runs in your browser

Convert a colour between HEX, RGB and HSL, pick one visually, and check whether text in that colour is readable on white or black.

**Quick answer:** Enter a colour in any format, such as #0071E3, rgb(0, 113, 227) or hsl(210, 100%, 45%), or pick one, and get all three CSS formats to copy. The tool also shows the WCAG contrast ratio against white and black: normal text needs at least 4.5:1 (AA), and large text 3:1.

## How to use it

1. **Enter or pick a colour.** Type HEX, RGB or HSL, or use the colour picker.
2. **Copy the format you need.** HEX, RGB and HSL are ready to paste into CSS, design tools or code.
3. **Check the contrast.** See whether text in this colour passes WCAG on a white or black background.

## Example

A blue converted to every format, with its contrast:

Input:

```
#0071E3
```

Output:

```
HEX  #0071E3
RGB  rgb(0, 113, 227)
HSL  hsl(210, 100%, 45%)

Contrast on white: 4.70:1 · AA
Contrast on black: 4.47:1 · large text only
```

## Common errors and how to fix them

- **CSS ignores the colour**: HEX values need the #, and rgb() needs three numbers. Copy the value from this tool to avoid typos.
- **The colour fails the contrast check**: Make text darker or the background lighter until the ratio reaches 4.5:1. In HSL, lowering the lightness is the quickest way.
- **HSL values differ by 1 from another tool**: Conversions round to whole numbers, so 210 and 211 can be the same colour. Use HEX when you need an exact match.
- **The printed colour looks different**: Screens use RGB and printers CMYK, with different ranges. Ask your printer for the right profile and check a proof.

## Frequently asked questions

### How do I convert HEX to RGB?

Split the six digits into three pairs and convert each from hexadecimal: #0071E3 is 00, 71, E3, which is rgb(0, 113, 227).

### What is HSL?

Hue (0 to 360 degrees on the colour wheel), saturation and lightness (0 to 100%). It makes it easy to create lighter or darker shades of the same colour.

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

Each digit is doubled: #0AF is the same as #00AAFF.

### What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). AAA requires 7:1 for normal text.

### Why are HSL values slightly different in other tools?

Converting between formats involves rounding, so one tool may show 210 and another 211 for the same colour. The visible difference is negligible.

### Can I use these values in CSS?

Yes. All three formats are valid CSS colour values in every modern browser.

### How do I convert RGB to CMYK for print?

A simple formula exists, but printers use colour profiles, so ask your printer for the right profile or convert in a design tool.

### Does it support transparency?

This converter works with solid colours. For transparency, add an alpha value yourself, such as rgb(0 113 227 / 50%).

### Why does the colour look different on my phone?

Screens differ in colour range and calibration, and some show wider-gamut colours. Values in HEX and RGB refer to the standard sRGB space.

### Is anything uploaded?

No. The conversion runs in your browser.

## Related

- [Case converter](https://shahid09.is-a.dev/tools/case-converter/)
- [Percentage calculator](https://shahid09.is-a.dev/tools/percentage-calculator/)
- [Hire a full stack developer](https://shahid09.is-a.dev/hire/ai-full-stack-developer/)