Color Converter
Convert between HEX, RGB, and HSL — with live preview and WCAG contrast checking.
White Text on Color
5.17:1
AABlack Text on Color
4.06:1
AA LargeRelated Articles
Learn more about this topic
Related Tools
You might also find these useful
Everything you need to know
All Three Formats, Synced
Enter a color in any format — HEX (#4D96FF), RGB (77, 150, 255), or HSL (216°, 100%, 65%) — and see all other formats update in real time. Use the native color picker or choose from 20 popular preset colors.
WCAG Contrast Checker
Accessibility matters. The built-in contrast checker shows the contrast ratio of your selected color against both white and black text, with WCAG 2.1 compliance ratings (AA, AA Large, or Fail). Design accessible interfaces without leaving the tool.
Ready-to-Copy CSS
Each color shows its HEX, RGB, and HSL value in CSS syntax. One click to copy any format directly into your stylesheet — no manual formatting needed.
When to Use Which Format
- HEX: Most common in CSS and design tools. Compact and widely supported. Great for static colors.
- RGB: Best when you need transparency (rgba) or are working with canvas/WebGL. Direct channel control.
- HSL: Most intuitive for humans. Easy to create color variations by adjusting just the lightness or saturation.
Related Tools
Working with text encoding? Use the ASCII Converter. Need number format conversions? Try the Number Base Converter. For percentage calculations, see the Percentage Calculator.