Color Converter & Contrast Checker
Guide: px vs rem vs em: Which CSS Unit Should You Use?
Nothing you enter or choose here leaves your device. This tool runs in your browser.
How to use
- 1Pick a color or type one as HEX, RGB or HSL.
- 2Copy the format you need from the list.
- 3In the contrast checker, enter a background color.
- 4Read the ratio and the WCAG pass or fail badges.
Frequently asked questions
What formats can I type in?
HEX (#6366f1, #fff, or with alpha like #6366f180), rgb(99, 102, 241) and hsl(239, 84%, 67%), including the rgba and hsla forms.
What is a good contrast ratio?
WCAG level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1. Higher is easier to read.
What counts as large text?
Text of at least 24 px, or 18.66 px if bold. Anything smaller counts as normal text.
Does transparency affect the contrast result?
The checker compares the solid colors and ignores transparency. Transparent colors change depending on what is behind them.
Read the guides
Learn how this works and how to get the most from it.
Web & SEO
px vs rem vs em: Which CSS Unit Should You Use?
The difference between px, rem and em in CSS, how to convert between them, and when each one is the right choice.
1 min read
Images
How to Pick a Color Palette From a Photo
How to build a color scheme from an image, how a palette is found, and how to use the colors in a design, a website or a room.
1 min read
Related tools
Color Palette from Image
Find the main colors in any picture.
CSS Gradient & Box Shadow Generator
Design gradients and box shadows visually and copy the CSS.
PX to REM Converter
Convert px to rem, em, pt and percent for any base font size.
Image Converter
Convert between PNG, JPG and WebP in your browser.