Skip to main content
chambe.dev

Color Converter & Contrast Checker

Free color converter tool. Convert between HEX, RGB, HSL formats. Check WCAG contrast ratios and generate color palettes.

Contrast Checker

Sample Text
7.25:1
Contrast Ratio
✓
WCAG AA
✓
WCAG AAA

Color Palette

Convert colors between different formats instantly. Whether you need HEX for CSS, RGB for design tools, or HSL for color manipulation, this tool handles all conversions.

Check color contrast ratios for WCAG accessibility compliance and generate harmonious color palettes based on your selected color.

How to Use This Tool

  1. 1 t
  2. 2 o
  3. 3 o
  4. 4 l
  5. 5 s
  6. 6 .
  7. 7 c
  8. 8 o
  9. 9 l
  10. 10 o
  11. 11 r
  12. 12 .
  13. 13 h
  14. 14 o
  15. 15 w
  16. 16 T
  17. 17 o
  18. 18 U
  19. 19 s
  20. 20 e
  21. 21 .
  22. 22 s
  23. 23 t
  24. 24 e
  25. 25 p
  26. 26 s

Use Cases

Web Design

Convert colors between formats for CSS, Sass, and design tools.

Accessibility

Ensure text and background colors meet WCAG contrast requirements.

Branding

Create consistent color palettes with proper shade variations.

Development

Quickly convert color formats when working across different platforms.

Frequently Asked Questions

What's the difference between HEX, RGB, and HSL?

HEX uses hexadecimal notation (#RRGGBB), RGB specifies red, green, blue values (0-255), and HSL uses hue (0-360), saturation and lightness percentages. They're different ways to represent the same colors.

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA requires 4.5:1 for normal text, AAA requires 7:1. Higher ratios are more accessible.

Why use HSL over RGB?

HSL is more intuitive for adjusting colors. You can easily create lighter/darker variations by changing lightness, or more/less saturated versions, while keeping the same hue.

How do I create a color palette?

Start with a base color and vary the lightness to create shades. The palette below shows 10 variations from light (50) to dark (900), similar to Tailwind CSS color scales.

What contrast ratio should I aim for?

For body text, aim for at least 4.5:1 (AA). For large text (18px+ or 14px+ bold), 3:1 is acceptable. For best accessibility, aim for 7:1 (AAA) when possible.