Desarrollo Web

Color Converter

Conversión de color entre HEX, RGB, HSL, HSV/HSB y CMYK — introduce un valor en cualquier campo y el resto se actualizará al instante.

The same color can be written differently depending on context: HEX and RGB are convenient for code, HSL is intuitive for picking a hue and lightness, and CMYK is for print. This tool converts between all of them at once.

How to use it

Which format to use when

Things to keep in mind

CMYK on screen is only an approximation — the exact printed color depends on the printer, paper, and color profile used.

Conversion between color spaces isn't always exact for extreme, highly saturated colors, due to differences in gamut coverage between models.

Artículo sobre esta herramienta: HEX, RGB, HSL: por qué existen tantas formas de escribir un color

Preguntas frecuentes

¿Cómo maneja el conversor el canal alfa (transparencia)?

El alfa se admite en HEX (#RRGGBBAA), RGBA y HSLA — lo que ingreses se traslada a los otros formatos que admiten transparencia, mientras que los formatos sin canal alfa, como el CMYK simple, simplemente lo ignoran.

¿Por qué el valor cambia ligeramente después de convertir a CMYK y volver a HEX?

CMYK es un modelo orientado a impresión sin una fórmula única fija para convertir hacia y desde RGB, así que un viaje de ida y vuelta puede desplazar los valores por un error de redondeo de una o dos unidades; visualmente el color permanece prácticamente igual.

¿Mis datos de color se envían a algún sitio?

No, cada conversión ocurre localmente en tu navegador con JavaScript — nada se sube a un servidor.

¿En qué se diferencia OKLCH de HSL?

OKLCH describe un color mediante luminosidad (L), croma (C) y tono (H), pero a diferencia de HSL tiene en cuenta cómo percibe realmente el ojo humano la luminosidad — cambiar L en OKLCH no distorsiona la saturación percibida del color, así que las transiciones entre tonos se ven más uniformes.

¿Qué significa que un color esté «fuera de gama» (out of gamut)?

Algunos colores en espacios amplios como OKLCH o Display P3 no se pueden reproducir físicamente en pantallas que solo admiten sRGB — el navegador sustituye entonces el color disponible más cercano dentro de la gama compatible.

Artículos: Desarrollo Web

Minificación de CSS: qué se elimina realmente del archivo y por qué

Por qué el CSS minificado funciona exactamente igual en el navegador, aunque se vuelva ilegible para una persona.

Minificación de JavaScript: la diferencia entre minificar y ofuscar

Por qué el código minificado se puede leer si uno quiere, mientras que el ofuscado no.

Minificación de HTML: por qué importan los espacios en el marcado

Por qué eliminar espacios dentro de <pre> o un textarea puede romper el aspecto de la página, a diferencia de casi cualquier otro lugar.

Degradados CSS: en qué se diferencia linear de radial y conic

Por qué conic-gradient sirve para gráficos circulares y radial-gradient para un efecto de foco de luz.

El algoritmo de Luhn: cómo se comprueba la corrección de un número de tarjeta

Por qué un número de tarjeta que pasa la verificación de Luhn no significa que esa tarjeta exista realmente.

IBAN: cómo está estructurado un número de cuenta bancaria internacional

Por qué las dos primeras letras de un IBAN son el código de país, no parte del número de cuenta.

Códigos QR: cómo cabe un enlace en un cuadrado de píxeles

Por qué un código QR con un logo en el centro se sigue escaneando aunque parte del patrón esté tapada.

Códigos de barras: en qué se diferencia Code 128 de EAN-13

Por qué los productos en las tiendas casi siempre usan EAN-13 en lugar de Code 128.

Imágenes placeholder: por qué importan las imágenes ficticias durante el desarrollo

Por qué los desarrolladores colocan deliberadamente rectángulos grises en vez de fotos reales mientras se construye el maquetado.