Conversor de colores HEX, RGB y HSL

HEX es un código hexadecimal de 6 caracteres (como #FF5733) que representa el color en base 16 — el formato más usado en HTML y CSS. RGB expresa el color como mezcla de Rojo, Verde y Azul con valores de 0 a 255 — más intuitivo para mezclar colores. HSL describe el color con Matiz (0-360°), Saturación (0-100%) y Luminosidad (0-100%) — el más útil para hacer variaciones de un mismo color porque puedes cambiar el tono sin alterar el brillo. Los tres sistemas describen exactamente el mismo color, solo cambia la notación. Verifica siempre en developer.mozilla.org/CSS/color.

Ambos funcionan igual en todos los navegadores modernos. HEX es más compacto y es el estándar histórico en CSS — lo verás en el 90% del código existente. RGB es más legible para entender los componentes del color y es necesario cuando quieres añadir transparencia con rgba(). HSL es el más recomendado para sistemas de diseño modernos porque facilita crear variantes de color cambiando solo la luminosidad. Tailwind CSS, por ejemplo, genera sus paletas en HSL. Para proyectos nuevos, HSL o los nuevos formatos CSS como oklch son la tendencia. Verifica siempre en developer.mozilla.org/CSS/color.

Divide el código HEX en tres pares: los primeros dos dígitos son el rojo, los siguientes dos el verde y los últimos dos el azul. Convierte cada par de hexadecimal a decimal. Por ejemplo, #FF5733: FF = 255 (rojo), 57 = 87 (verde), 33 = 51 (azul) → rgb(255, 87, 51). Para los dígitos hexadecimales, A=10, B=11, C=12, D=13, E=14, F=15. Así, FF = (15×16) + 15 = 255. Esta herramienta hace la conversión automáticamente en tiempo real. Verifica la especificación en developer.mozilla.org/CSS/hex-color.

El canal alfa controla la transparencia del color, donde 0 es completamente transparente y 1 (o 255 en escala 0-255) es completamente opaco. En CSS puedes añadirlo con rgba(255, 87, 51, 0.5) para un 50% de transparencia. En formato HEX de 8 dígitos, los dos últimos dígitos representan la opacidad: #FF573380 equivale a un 50% de opacidad (80 en hexadecimal = 128 en decimal ≈ 50%). La notación hsla() también soporta transparencia. No todos los programas aceptan HEX de 8 dígitos, por lo que rgba() suele ser más seguro. Verifica siempre en developer.mozilla.org/CSS/color_value.

El negro es #000000 (rgb(0,0,0) — todos los canales a cero), el blanco es #FFFFFF (rgb(255,255,255) — todos los canales al máximo). Los grises son iguales en los tres canales: #808080 es gris medio (rgb(128,128,128)), #333333 es gris oscuro muy usado en textos, #F5F5F5 es casi blanco usado como fondo en interfaces. Los grises neutros tienen los mismos valores en R, G y B. Si los valores difieren ligeramente, el gris tiene un tinte de calor o frío. Verifica los códigos exactos de tu paleta en la guía de diseño de tu proyecto.

El estándar WCAG 2.1 establece que el ratio de contraste mínimo para texto normal es de 4.5:1 y para texto grande (18pt o superior) de 3:1. El blanco (#FFFFFF) sobre negro (#000000) tiene un ratio de 21:1, el máximo posible. Un ratio bajo como 2:1 entre gris claro y blanco hace el texto ilegible para personas con baja visión. Puedes calcular el ratio de contraste con herramientas como WebAIM Contrast Checker. En España, la accesibilidad web es obligatoria para entidades públicas según el RD 1112/2018. Verifica siempre en webaim.org/resources/contrastchecker.

HSL es especialmente útil para crear paletas de color coherentes porque separa el tono (qué color), la saturación (qué tan vivo) y la luminosidad (qué tan claro u oscuro). Para crear una paleta de un color base, basta con mantener el mismo Hue y Saturación y variar la Luminosidad: hsl(210, 70%, 20%) es el oscuro, hsl(210, 70%, 50%) el medio, hsl(210, 70%, 80%) el claro. Tailwind CSS y Material Design generan sus escalas de color exactamente así. También facilita calcular el color complementario sumando 180° al Hue. Verifica siempre en developer.mozilla.org/CSS/color_value/hsl.

CSS define 140 nombres de colores reconocidos. Los más usados: red #FF0000, green #008000, blue #0000FF, yellow #FFFF00, orange #FFA500, purple #800080, pink #FFC0CB, brown #A52A2A, gray #808080, white #FFFFFF, black #000000, cyan #00FFFF, magenta #FF00FF. Los colores "web safe" originales eran solo 216, diseñados para pantallas de 256 colores. Hoy las pantallas modernas muestran millones de colores y esta limitación ya no aplica. Para proyectos profesionales, siempre usa códigos HEX o RGB exactos en lugar de nombres de color para mayor precisión. Verifica siempre en developer.mozilla.org/CSS/named-color.