utilduck
Home · Desarrollador · Conversor de color

Conversor de color

Introduce un código HEX para ver al instante los equivalentes RGB y HSL con vista previa.

Vista previa del color
RGB
-
HSL-
Color HEX-

Sobre los formatos de color

Los colores en pantalla se expresan habitualmente en tres formatos. HEX usa un código hexadecimal de seis dígitos como #4f46e5. RGB (Rojo, Verde, Azul) describe el mismo color con tres números del 0 al 255. HSL (Tono, Saturación, Luminosidad) expresa el color por su ángulo en la rueda de color (0-360°), su pureza (0-100%) y su brillo (0-100%). Los tres son intercambiables.

¿Cómo convierto HEX a RGB y HSL?

Para convertir un color HEX a RGB, divídelo en tres pares de 2 dígitos y convierte cada uno de hexadecimal a decimal (0-255); para obtener HSL, calcula el matiz, la saturación y la luminosidad a partir de esos valores RGB. Ejemplo: #4F46E5 se convierte en rgb(79, 70, 229) y hsl(243, 75%, 59%).

Pasos para convertir HEX a RGB y HSL

  1. Quita el símbolo # y divide el código HEX de 6 dígitos en tres pares de 2 dígitos (para #4F46E5: 4F, 46, E5).
  2. Convierte cada par hexadecimal a un número decimal de 0 a 255 (4F=79, 46=70, E5=229) para obtener los valores RGB.
  3. Divide cada valor RGB entre 255 para normalizarlo al rango 0-1, y luego halla el máximo y el mínimo de los tres.
  4. La luminosidad es el promedio del máximo y el mínimo; la saturación y el matiz se calculan a partir de la diferencia entre el máximo y el mínimo con las fórmulas estándar de HSL.
  5. Redondea el matiz a grados enteros (0-360) y la saturación y luminosidad a porcentajes enteros (0-100%) para mostrarlos.

De HEX a RGB a HSL

Canal RGB = parseInt(par hex, 16) · Luminosidad = (máx(R,G,B) + mín(R,G,B)) / 2, normalizado a 0-1
  • R, G, B = valores de los canales rojo, verde y azul, cada uno de 0 a 255
  • H, S, L = matiz en grados (0-360), saturación y luminosidad en porcentaje (0-100%)

Conversiones de color más buscadas

¿Cuánto es #FF0000 en RGB?

#FF0000 es rgb(255, 0, 0): rojo puro, con el canal rojo al máximo y verde y azul en cero.

¿Cuánto es #FFFFFF en RGB?

#FFFFFF es rgb(255, 255, 255): blanco puro, con los tres canales al máximo.

¿Cuánto es #000000 en RGB?

#000000 es rgb(0, 0, 0): negro puro, con los tres canales en cero.

¿Cuánto es rgb(0, 128, 0) en hexadecimal?

rgb(0, 128, 0) es #008000, ya que 128 en decimal equivale a 80 en hexadecimal (un verde medio).

¿Cuánto es #FFA500 en RGB?

#FFA500 es rgb(255, 165, 0): el naranja estándar.

¿Cuánto es #00FF00 en RGB?

#00FF00 es rgb(0, 255, 0): verde puro, con solo el canal verde al máximo.

¿Cuánto es #0000FF en RGB?

#0000FF es rgb(0, 0, 255): azul puro, con solo el canal azul al máximo.

¿Cuánto es rgb(255, 255, 0) en hexadecimal?

rgb(255, 255, 0) es #FFFF00: amarillo puro, mezcla de rojo y verde al máximo.

Ejemplos de conversión de color

HEXRGBHSL
#4F46E5rgb(79, 70, 229)hsl(243, 75%, 59%)
#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)
#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)
#1D4ED8rgb(29, 78, 216)hsl(224, 76%, 48%)
#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)

Preguntas frecuentes

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

HEX y RGB describen un color de la misma forma, como cantidades de luz roja, verde y azul, solo que con distinta notación (base 16 frente a base 10). HSL describe el mismo color mediante el matiz (el color en sí), la saturación (intensidad) y la luminosidad (qué tan claro u oscuro es), lo cual suele resultar más intuitivo para ajustar un color a mano.

¿Por qué el blanco muestra 0% de saturación?

La saturación mide cuán lejos está un color del gris. El blanco puro, el negro y cualquier tono de gris intermedio tienen valores iguales de rojo, verde y azul, así que su saturación siempre es 0%, sin importar la luminosidad.

¿Puedo introducir un código HEX de 3 dígitos como #FFF?

Esta herramienta espera el formato HEX completo de 6 dígitos (#RRGGBB). Una forma abreviada de 3 dígitos como #FFF es una notación corta de CSS para #FFFFFF, donde cada dígito se duplica; conviértela a 6 dígitos antes de introducirla aquí.

¿Cómo se calcula el matiz cuando el rojo, el verde y el azul son todos distintos?

El matiz depende de qué canal (rojo, verde o azul) tiene el valor más alto, y se calcula a partir de la posición relativa de los otros dos canales. El resultado es un ángulo en una rueda de color de 360 grados, donde 0 grados es rojo, 120 es verde y 240 es azul.

Esta herramienta convierte colores HEX estándar de 6 dígitos usados en la web; no admite canales alfa (transparencia), colores con nombre de CSS ni espacios de color más allá de sRGB, como HSV o LAB.

Sources: W3C CSS Color Module Level 4

Privacidad y seguridad

  • Se calcula en el navegador — Lo que escribe se calcula solo en su dispositivo y nunca se envía a un servidor de utilduck.
  • Conexión cifrada — Todas las páginas se sirven por HTTPS, por lo que nadie en la red puede leer su contenido.
  • No se comparte con terceros — Sus datos no se transmiten a servicios de analítica ni de publicidad.
  • No se almacena — Los resultados no se guardan en ningún servidor y no hace falta crear una cuenta.

Última actualización: 2026-08-24