Conversor de Colores HEX / RGB / HSL
Convierte entre los formatos de color más usados en diseño y desarrollo web al instante. Edita cualquier campo y los demás se actualizan automáticamente.
Cargando conversor de colores...
Cómo usar el conversor
- Escribe un valor en cualquiera de los tres campos: HEX, RGB u HSL.
- Los otros dos campos se actualizan automáticamente al terminar de escribir un valor válido.
- También puedes usar el selector de color visual para elegir un tono con el ratón.
- Usa el botón Copiar junto a cada campo para copiar ese formato al portapapeles.
Modelos de color: HEX, RGB y HSL explicados
Cuando trabajamos con color en entornos digitales, nos encontramos con diferentes sistemas de representación numérica que describen el mismo fenómeno visual de maneras distintas. Cada modelo tiene sus ventajas y contextos de uso óptimos, y un buen diseñador o desarrollador web debe dominarlos todos.
El modelo RGB (Red, Green, Blue) es el más cercano al hardware: describe cómo una pantalla mezcla emisiones de luz roja, verde y azul para crear cualquier color del espectro visible. Cada canal toma un valor entero de 0 a 255, dando 16,7 millones de combinaciones posibles. Es el modelo de referencia para el desarrollo front-end, ya que es el que entienden los navegadores de manera nativa.
El formato HEX es simplemente una representación compacta del mismo modelo RGB usando el sistema hexadecimal. En lugar de escribir rgb(255, 0, 128), escribimos #FF0080. Los seis dígitos se agrupan en pares: los dos primeros para el rojo, los dos siguientes para el verde y los dos últimos para el azul. Su brevedad lo ha convertido en el estándar de facto para especificar colores en CSS, HTML y la mayoría de las herramientas de diseño digital.
El modelo HSL (Hue, Saturation, Lightness) es el más intuitivo para diseñadores, ya que mapea directamente con cómo los humanos percibimos y describimos el color. El tono es el color en sí (rojo, verde, azul…), expresado como un ángulo en la rueda de 0° a 360°. La saturación describe qué tan vívido o grisáceo es el color, de 0% (gris puro) a 100% (máxima pureza). La luminosidad va de 0% (negro absoluto) a 100% (blanco puro), pasando por el color puro al 50%.
Una de las grandes ventajas de HSL en CSS moderno es su integración con custom properties (variables CSS). Definiendo el tono como una variable independiente, puedes crear fácilmente variantes oscuras y claras de un mismo color solo ajustando el valor de luminosidad, sin tocar los otros parámetros. Por ejemplo:
:root {
--brand-hue: 217;
--brand-saturation: 91%;
--brand: hsl(var(--brand-hue), var(--brand-saturation), 60%);
--brand-dark: hsl(var(--brand-hue), var(--brand-saturation), 40%);
--brand-light: hsl(var(--brand-hue), var(--brand-saturation), 80%);
}Nuestro conversor soporta los tres formatos de manera bidireccional: escribe en cualquier campo y los demás se actualizan en tiempo real, sin necesidad de presionar ningún botón de conversión. Ideal para flujos de trabajo rápidos cuando necesitas trasladar un color de un formato a otro.