---
title: "Color Picker and Converter | ToolSugar"
description: "Pick a color, convert between HEX, RGB and HSL, get tints and shades, and check WCAG contrast against white and black."
canonical: https://toolsugar.com/tools/color-picker
image: https://toolsugar.com/og.png
---

# Color Picker

This color picker converts a color between HEX, RGB and HSL in both directions. You can use the native color input or type any of the three formats. It builds a row of tints and shades and reports the WCAG contrast ratio of your color against white and against black. It runs in your browser.

Runs on your device

## How it works

1. Click the color box to pick a color, or type into the HEX, RGB or HSL field.
2. Read the other two fields, which update to match, 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.

## Key facts

- **Formats**: HEX (3 or 6 digits), rgb() and hsl()
- **Contrast**: WCAG 2.x ratio from 1:1 to 21:1 with AA and AAA results
- **Palette**: Nine tints toward white and nine shades toward black
- **Rounding**: HSL values are rounded to whole numbers, so converting back can shift a channel by one

## Common uses

- Turn a design file's HEX color into HSL for CSS.
- Check whether text in a brand color is readable on white.
- Build a quick scale of lighter and darker variants.

## Questions

### What contrast ratio do I need for readable text?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 and 4.5:1. The tool shows the result for both.

### Why does converting back and forth change a number?

HSL is shown in whole numbers, which loses a little precision. Going from HSL back to RGB can therefore differ by one in a channel.

### Which text formats can I type?

HEX such as #1e90ff or abc, RGB such as rgb(30, 144, 255), and HSL such as hsl(210, 100%, 56%). Anything else shows a message and leaves the other fields unchanged.

[Read the Color Picker guide](https://toolsugar.com/blog/how-to-pick-a-color-code)

## Related tools

- [Favicon Generator](https://toolsugar.com/tools/favicon-generator)
- [QR Code Generator](https://toolsugar.com/tools/qr-code-generator)
- [Diff Checker](https://toolsugar.com/tools/diff-checker)