Saltar al contenido principal
DevCodivo

Convertidor de Color

Convierte instantáneamente entre HEX, RGB, HSL, HSV y CMYK con selector visual y contraste WCAG.

Se ejecuta en tu navegador; tus datos nunca salen de tu dispositivoGratis, sin registro
RGB (CSS)rgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSV / HSBhsv(217, 76%, 96%)
CMYK (Print)cmyk(76%, 47%, 0%, 4%)
WCAG Accessibility Contrast
White Text (#fff)3.7:1 ✕ Fail
Black Text (#000)5.7:1 ✓ AA

Cómo funciona

Colors are parsed into normalized RGB components in the sRGB color space. From this canonical representation, the tool computes cylindrical coordinates for HSL and HSV, subtractive ink ratios for CMYK, and hexadecimal byte pairs.

To verify accessibility, the relative luminance is calculated using gamma-corrected coefficients (0.2126 R + 0.7152 G + 0.0722 B) to determine precise contrast ratios against standard black and white text according to WCAG 2.1 guidelines.

Características

  • Simultaneous conversion between HEX, RGB, HSL, HSV, and CMYK
  • Interactive visual color picker with real-time bidirectional syncing
  • Live WCAG 2.1 AA and AAA contrast ratings against white and black
  • One-click copy for CSS color declarations
  • Pre-configured design palette swatches for quick inspiration

Cómo usarla

  1. Type or paste any color code into the input field or click a palette swatch.
  2. Alternatively, click the color swatch box to open your browser’s color picker.
  3. Review all corresponding color values in the synchronized conversion cards.
  4. Check the WCAG accessibility ratings to ensure your color meets contrast standards.
  5. Click the copy button on any format to paste directly into your CSS or Tailwind config.

Ejemplo

HEX:   #3B82F6
RGB:   rgb(59, 130, 246)
HSL:   hsl(217, 91%, 60%)
HSV:   hsv(217, 76%, 96%)
CMYK:  cmyk(76%, 47%, 0%, 4%)

Preguntas frecuentes

Which color formats are supported?
DevCodivo supports seamless conversion across HEX (#RRGGBB and #RRGGBBAA), RGB / RGBA, HSL / HSLA, HSV / HSB, and CMYK print values.
How is the WCAG contrast score calculated?
It calculates relative luminance according to the W3C Web Content Accessibility Guidelines (WCAG 2.1). Contrast ratios are evaluated against both pure black (#000000) and pure white (#ffffff) to check compliance with WCAG AA (minimum 4.5:1 for normal text) and WCAG AAA (minimum 7:1).
What is the difference between HSL and HSV?
HSL stands for Hue, Saturation, and Lightness; HSV stands for Hue, Saturation, and Value (Brightness). In HSL, maximum lightness (100%) produces pure white regardless of saturation, while in HSV, maximum value (100%) produces the brightest saturated color unless saturation is 0%.
How accurate is the CMYK conversion?
CMYK conversion uses the standard subtractive color model formula. While commercial printing depends on specific physical ICC color profiles, paper coating, and ink sets, this standard formula is the universal benchmark for web-to-print design workflows.
Are color conversions executed locally?
Yes. All color space transformations and contrast ratio calculations happen in real-time in JavaScript inside your browser. No data is sent over the network.

Herramientas relacionadas