Skip to content
DevLab

Color Code Converter

A color tool that converts between HEX / RGB / HSL / HSV. Just pick a color and the CSS code is generated for every format. Contrast ratio is calculated automatically.

✅ 100% free, no signup, runs entirely in your browser

CSS format

Contrast ratio

White background (#FFF)
Black background (#000)
WCAG AA: 4.5+ for normal text, 3.0+ for large text / AAA: 7.0+ for normal text

Tone variations

If something is broken or not displaying correctly, let us know via the contact form.

📖 How to Use

  1. 1
    Pick a color
    Use the color picker or type HEX / RGB / HSL directly.
  2. 2
    See all formats
    HEX / RGB / RGBA / HSL / HSV / CMYK update instantly.
  3. 3
    Check contrast ratio
    WCAG contrast ratio (AA/AAA) against background is shown — essential for a11y.

❓ FAQ

What are the WCAG contrast ratio requirements?
Normal text: AA 4.5:1, AAA 7:1. Large text (18pt+): AA 3:1, AAA 4.5:1.
Difference between HEX and RGB?
HEX (#FF5733) is hex representation of 3 bytes. RGB shows the same info in decimal. HEX is shortest for CSS/HTML; RGB is easier for alpha.
When to use HSL vs HSV?
HSL (hue/sat/lightness) is great for design-system tone ramps. HSV (hue/sat/value) is intuitive for color picker UIs.
Does it support Tailwind color palette?
We suggest the nearest Tailwind color (e.g., gray-500, blue-600) for the picked color.