# Color converter and contrast checker

> Convert colors between HEX, RGB and HSL with a live swatch, and check WCAG contrast against a background: AA and AAA for text and UI components.

URL: https://tools.cuelark.com/color-converter
Publisher: Cuelark Team (https://cuelark.com)
Updated: 2026-11-10
Price: free, no sign-up
Privacy: runs in the browser; files are not uploaded

Type a color as HEX, RGB or HSL to get the other formats and a live swatch, and add a background color to check the WCAG contrast ratio for text and interface elements.

## How to use it

1. Enter a color like #3366cc, rgb(51, 102, 204) or hsl(220, 60%, 50%).
2. Optionally add a background color to check contrast.
3. Copy HEX, RGB or HSL; your last colors are remembered.

## Details

- **Formats:** #RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba(), hsl()/hsla()
- **Contrast:** WCAG relative luminance ratio, 1:1 to 21:1
- **Thresholds:** AA 4.5:1 text, 3:1 large text and UI; AAA 7:1

## Questions

### What contrast ratio do I need?

WCAG AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for icons and input borders. AAA needs 7:1 for normal text.

### How do I convert HEX to RGB by hand?

Split the six digits into pairs and read each as base-16: #3366cc is 33 = 51, 66 = 102, cc = 204, so rgb(51, 102, 204).

### Why does HSL look easier to adjust?

Hue, saturation and lightness are separate, so you can make a lighter or darker shade by changing only L. RGB mixes all three channels.

### Does it handle transparency?

Yes, 8-digit HEX and rgba()/hsla() alpha are read. Contrast assumes opaque colors, so check semi-transparent text against its real background.

### Is what I type sent anywhere?

No. The calculation runs in this browser tab with the same code our MCP server uses. Nothing you type is sent to a server or saved, apart from settings like filing status, which stay in this browser.

### Can an AI agent use this?

Yes. The same function is a tool on our free MCP server at tools.cuelark.com/mcp, so ChatGPT, Claude or Cursor get exactly the answer this page shows. 'Copy MCP call' gives you the arguments.

## Related tools

- [Markdown preview](https://tools.cuelark.com/markdown-preview)
- [Case converter](https://tools.cuelark.com/case-converter)
- [Regex tester](https://tools.cuelark.com/regex-tester)