¿Cuál es la diferencia entre HEX y RGB?

Representan lo mismo — tres canales de color (rojo, verde, azul) — pero HEX los expresa en hexadecimal (base 16) y RGB en decimal (0–255). La conversión es directa.

¿Qué ratio de contraste necesito para accesibilidad web?

WCAG 2.1 nivel AA requiere 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA, más estricto, requiere 7:1 y 4.5:1 respectivamente.

¿Por qué la conversión a CMYK no es exacta?

RGB tiene una gama de colores más amplia que CMYK. Algunos colores brillantes de pantalla no se pueden reproducir con tintas, por lo que la conversión es una aproximación. Para impresión profesional se usan perfiles ICC.

Calculadora de Colores | The Life Calculators

Calculadora de Colores

Conversor de Colores

HEX

RGB

HSL

CMYK

HEX

#4285F4

RGB

66, 133, 244

HSL

217°, 89%, 61%

CMYK

73%, 45%, 0%, 4%

Verificador de Contraste

Color del texto

Color de fondo

El veloz murciélago hindú comía feliz cardillo y kiwi

Ratio de Contraste

3.56:1

WCAG AA — Normal

Falla

WCAG AA — Grande

Pasa

WCAG AAA — Normal

Falla

Cómo Funciona Este Cálculo

Esta calculadora convierte un color entre cuatro sistemas de representación comunes. HEX usa seis dígitos hexadecimales (00–FF por canal) precedidos de #. RGB define rojo, verde y azul de 0 a 255. HSL describe el tono en grados (0–360), saturación y luminosidad en porcentaje. CMYK es el modelo sustractivo de impresión con cian, magenta, amarillo y negro.

El verificador de contraste calcula la relación de luminancia relativa entre dos colores según WCAG 2.1. Un ratio de 4.5:1 cumple AA para texto normal; 3:1 para texto grande (≥18pt o ≥14pt negrita). AAA requiere 7:1 para texto normal y 4.5:1 para grande.

Errores Comunes a Evitar

Asumir que los colores de pantalla coinciden con la impresión. RGB/HEX son modelos aditivos (pantalla). CMYK es sustractivo (tinta). La conversión es una aproximación y los colores impresos pueden diferir notablemente.
Ignorar el contraste de accesibilidad. Un texto que se ve bien puede ser ilegible para personas con baja visión. Siempre verifica el ratio de contraste para cumplir al menos WCAG AA.
Confundir HSL con HSV/HSB. HSL y HSV parecen similares pero L (luminosidad) y V/B (brillo/valor) producen resultados diferentes para los mismos valores numéricos.

Ejemplo Práctico

Convertir el azul de Google (#4285F4) a otros formatos.

HEX → RGB: 42 = 66, 85 = 133, F4 = 244 → RGB(66, 133, 244).

RGB → HSL: Tono ≈ 217°, Saturación ≈ 90%, Luminosidad ≈ 61%.

RGB → CMYK: C ≈ 73%, M ≈ 45%, Y ≈ 0%, K ≈ 4%.

Preguntas Frecuentes

¿Cuál es la diferencia entre HEX y RGB?: Representan lo mismo — tres canales de color (rojo, verde, azul) — pero HEX los expresa en hexadecimal (base 16) y RGB en decimal (0–255). La conversión es directa.
¿Qué ratio de contraste necesito para accesibilidad web?: WCAG 2.1 nivel AA requiere 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA, más estricto, requiere 7:1 y 4.5:1 respectivamente.
¿Por qué la conversión a CMYK no es exacta?: RGB tiene una gama de colores más amplia que CMYK. Algunos colores brillantes de pantalla no se pueden reproducir con tintas, por lo que la conversión es una aproximación. Para impresión profesional se usan perfiles ICC.