Conversor de Códigos de Color

Convierta códigos de color entre HEX, RGB, HSL, HSV y CMYK. Introduzca cualquier formato y obtenga el resto, con vista previa en vivo y copia con un solo clic.

Cómo usar

  1. Ingresar código de color

    Introduzca un código de color en cualquier formato (HEX, RGB, HSL, CMYK).

  2. Ver color

    Vea la vista previa del color.

  3. Copiar otros formatos

    Copie el código de color en el formato deseado.

¿Qué es la conversión de códigos de color?

La conversión de códigos de color consiste en expresar el mismo color en distintos sistemas de notación como HEX, RGB y HSL. La pantalla crea color mezclando los colores primarios de la luz —rojo, verde y azul—, por lo que todo color se reduce, en última instancia, a la intensidad de tres canales RGB. HEX comprime esos valores RGB en una cadena hexadecimal de seis dígitos (#RRGGBB), mientras que HSL los reorganiza tal como las personas perciben el color, mediante un ángulo de tono, la saturación y la luminosidad.

Por qué importa la conversión

  • Escribir CSS — Tome el código HEX de un diseño y conviértalo a RGB, que facilita ajustar la opacidad.
  • Ajuste de color — Cuando solo desea oscurecer un poco un color, convertirlo a HSL le permite ajustar únicamente el valor L.
  • Colaboración — Mantenga sincronizados el HEX de Figma del diseñador, las variables RGB del desarrollador y las referencias de color del equipo de impresión.

Sin importar el formato que introduzca, este conversor calcula todos los demás de una vez y muestra el color real en una vista previa.

Fórmula de conversión

HEX → RGB divide el número hexadecimal en pares de dos dígitos y lee cada uno como un número decimal.

R = parseInt(hex[0:2], 16); G y B se calculan igual. Ejemplo: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).

RGB → HSL primero normaliza cada canal al rango 0-1 y luego obtiene la luminosidad.

L = (max + min) / 2
S = delta / (2 − max − min) (cuando L > 0,5)
donde delta = max − min. En el ejemplo anterior, max=1 y min=0,2 dan L = 0,6 (60%), S = 0,8/0,8 = 100% y un ángulo de tono H ≈ 11°, que se convierte en HSL(11°, 100%, 60%).

Preguntas frecuentes

¿Cuál es la diferencia entre HEX y RGB?
HEX expresa el color en hexadecimal (#FF5733), mientras que RGB expresa los valores de rojo, verde y azul como decimales de 0-255 (255, 87, 51). Son dos formas de escribir el mismo color.
¿Cómo convierto un código HEX a RGB?
Divida #RRGGBB en pares de dos dígitos y convierta cada uno de hexadecimal a decimal. Por ejemplo, #FF5733 da FF=255, 57=87, 33=51, así que se convierte en RGB(255, 87, 51). Cada par representa una intensidad de canal de 00 (0) a FF (255).
¿Cuándo debo usar CMYK?
CMYK es el modelo de color para impresión que mezcla tintas cian, magenta, amarillo y negro. Las pantallas y la web usan RGB/HEX, que suman luz, mientras que en producción impresa se convierte a CMYK, que superpone tintas. Como ambos gamuts de color difieren, los colores en pantalla pueden verse algo distintos al imprimirse.
¿Qué ventajas tiene el modelo de color HSL?
HSL se compone de tono, saturación y luminosidad, lo que permite ajustar colores de forma intuitiva. Por ejemplo, bajando solo el valor de luminosidad (L) se mantiene el tono y se obtiene fácilmente una variante más oscura, útil para efectos hover y para crear paletas de color.
¿Qué significan tono (H), saturación (S) y luminosidad (L) en HSL?
El tono (H) es un ángulo en la rueda de color de 0 a 360 grados, donde 0° es rojo, 120° verde y 240° azul. La saturación (S) es la intensidad del color de 0 a 100%: 0% es gris y 100% el color más vivo. La luminosidad (L) es el brillo de 0 a 100%: 0% es negro, 100% blanco y 50% el color más puro.
¿Cómo se representan el blanco y el negro?
El blanco tiene todos los canales al máximo: #FFFFFF / RGB(255, 255, 255) / HSL(0, 0%, 100%). El negro tiene todos los canales en cero: #000000 / RGB(0, 0, 0) / HSL(0, 0%, 0%). Los grises tienen una saturación (S) del 0% y solo varían en luminosidad (L).
¿Qué ocurre si los valores RGB se salen del rango 0-255?
Cada canal se ajusta automáticamente (clamp) antes de convertirse a HEX: los valores menores que 0 pasan a 0 y los mayores que 255 pasan a 255. Por ejemplo, RGB(300, -10, 128) se trata como RGB(255, 0, 128), que se convierte en #FF0080.
¿Puedo copiar los resultados de la conversión de inmediato?
Sí. Haga clic en cualquier código HEX, RGB o HSL convertido para copiarlo al portapapeles, y la vista previa del color le permite confirmar visualmente el color real para pegarlo directamente en CSS o en una herramienta de diseño.
Especificaciones de dispositivos 2026

Calculadoras relacionadas