Social-X
PDF7 toolsImage13 toolsDeveloper18 toolsSEO & Web14 toolsText18 toolsSecurity8 toolsColor & Design7 toolsCalculators14 toolsUtility5 tools
Merge PDFImage CompressorSplit PDFImage ConverterQR Code GeneratorAll 104 tools →
Color & Design · free

Color Converter & Contrast

Convert colors between HEX, RGB, HSL and CSS formats, and check the WCAG contrast ratio between any two colors for normal and large text. Paste a color, click the picker, or drag the swatches — all locally.

Runs on your device — nothing uploadedNo sign-up or limitUpdated October 2026
HEX #6C5CE7

Accepts HEX (#6C5CE7, #6c5ce7, #64c), rgb(108,92,231), hsl(246,74%,63%), hsv(246,60%,91%) and plain values like white or cornflowerblue.

Contrast ratio

– : 1
AA normal –AA large –AAA –

WCAG 2.x: AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.

About the Color Converter & Contrast

Convert colors between HEX, RGB, HSL and CSS formats, and check the WCAG contrast ratio between any two colors for normal and large text. Paste a color, click the picker, or drag the swatches — all locally.

All color math runs locally in your browser.

How to use the Color Converter & Contrast

  1. Step 1Type or pick any color — the conversion panel fills in automatically.
  2. Step 2Choose a foreground (text) and a background color.
  3. Step 3Read the WCAG contrast ratio and the AA / AAA pass or fail pills.

When people reach for this tool

Convert a value into whatever format the next tool needs

Design tools, CSS and print workflows each expect a different notation for the same colour.

Read the contrast ratio between two colours

The ratio tells you directly whether text on that background meets the accessibility guidelines.

Understand what a value in a stylesheet means

The same colour can be written several ways, and knowing the channels helps you adjust it.

Practical tips

  • Contrast depends on the pair, not the single colour. Always check the combination you actually intend to ship.
  • Alpha is separate from the colour itself, so a translucent value needs checking against whatever is behind it.

What you get

  • Live conversion between HEX, RGB, HSL and HSV
  • Named CSS colors and 3-digit HEX supported
  • WCAG 2.x contrast ratio for any two colors
  • AA and AAA checks for normal and large text
  • Click-to-copy of every format

Color Converter & Contrast — FAQ

What counts as “large text”?
Per WCAG, text at least 18pt (24px) or 14pt bold (18.66px) is treated as large, which relaxes the required ratio to 3:1 under AA.
Why do my two HEX values convert slightly differently?
3-digit HEX is expanded to 6 digits (#64c becomes #6644cc). The conversion is lossless, so re-entering the expanded value gives identical results.
What is a good contrast ratio?
At least 4.5 to 1 for normal body text and 3 to 1 for large text, which are the widely used accessibility thresholds.
Which format should I use?
HEX for web stylesheets, HSL when you want to adjust brightness or saturation, and RGB when a tool insists on channel values.

More color & design tools

All 6 other tools in this collection — free, no sign-up, nothing uploaded.

Color PickerContrast CheckerColor Palette GeneratorGradient GeneratorCSS Box Shadow GeneratorCSS Border Radius Generator

← All 104 tools · A–Z index · Browse by what you are doing