Calculadoras en línea gratis
Convertir colores: HEX ↔ RGB ↔ HSL con vista previa y selector
Este conversor de colores transforma al instante valores entre los formatos HEX, RGB y HSL, perfecto para diseñadores web y desarrolladores. Utiliza fórmulas matemáticamente precisas para convertir entre los tres modelos de color en tiempo real. Escribe un código o usa el selector de color y observa la vista previa actualizarse al momento.
Puedes obtener el código de un color con un selector o cuentagotas: eliges el tono y la herramienta te devuelve su valor en HEX, RGB, HSL o CMYK. Si ya tienes un valor en un formato, el conversor te da el equivalente en los demás.
#fffff no es un código válido, porque un color hexadecimal necesita tres o seis dígitos; lo más probable es que se trate de #ffffff, que es el blanco puro. Con cinco caracteres el navegador simplemente ignora el valor.
Escribe el nombre del color en inglés (por ejemplo red, teal o darkslategray) y el conversor lo traduce al código HEX y RGB correspondiente, ya que CSS define una lista fija de nombres de color. Para textos que no son nombres de color, no existe una conversión estándar.
255, 255, 255 es el blanco puro, porque los tres canales (rojo, verde y azul) están al máximo. En hexadecimal se escribe #ffffff.
ffff0000 es rojo puro totalmente opaco en formato ARGB: los dos primeros dígitos (ff) son el canal alfa y los seis restantes (ff0000) el color. En notación HEX habitual equivale a #ff0000.
Introduce el código tal cual lo tengas (HEX con almohadilla, RGB separado por comas o HSL) y la herramienta muestra el color junto con sus equivalencias en los demás formatos. Así puedes comprobar si dos códigos distintos corresponden al mismo tono.
Copia el código de color en el conversor y verás una muestra visual del tono junto con sus valores en HEX, RGB, HSL y CMYK. Si solo tienes una imagen, usa un cuentagotas para leer el píxel y obtener su código.
#00ff00 es el verde puro (lime en CSS): el canal rojo y el azul están a cero y el verde al máximo. Es uno de los colores primarios del modelo RGB.
En el diseño web y el desarrollo de interfaces, los colores son uno de los elementos más importantes — y también uno de los más propensos a generar confusión cuando se trabaja con múltiples herramientas y formatos. Nuestro conversor de colores gratuito te permite transformar valores de color entre los formatos HEX, RGB y HSL de forma instantánea, con vista previa en tiempo real y selector de color integrado.
Cada formato de color tiene su propio propósito y contexto de uso. Conocer sus diferencias te ayudará a elegir el más adecuado para cada proyecto.
El código de color HEX (hexadecimal) es el formato más utilizado en el desarrollo web. Un código como #4ECDC4 contiene seis caracteres agrupados en tres pares, que representan respectivamente la intensidad de los canales rojo, verde y azul en base 16. Su sintaxis compacta y su compatibilidad universal con CSS y HTML lo convierten en el estándar de facto para la mayoría de proyectos digitales.
RGB (Rojo, Verde, Azul) es el modelo de color aditivo que utilizan las pantallas electrónicas. Cada canal acepta un valor entero entre 0 y 255. Por ejemplo, el azul puro se expresa como rgb(0, 0, 255). Este formato es especialmente útil cuando necesitas aplicar transparencia mediante rgba(), algo muy común en animaciones CSS y efectos visuales modernos.
HSL (Tono, Saturación, Luminosidad) es el formato más intuitivo para diseñadores, ya que describe los colores de una manera más próxima a la percepción humana. El tono se expresa en grados sobre la rueda de color (0°–360°), la saturación indica la intensidad del color (0–100 %) y la luminosidad va del negro al blanco (0–100 %). Por ejemplo, hsl(174, 62%, 57%) produce un verde azulado vibrante. Con HSL, crear variantes tonales es extremadamente sencillo.
La herramienta está diseñada para ser rápida y accesible, independientemente de tu nivel de experiencia:
Esta herramienta está diseñada para cubrir las necesidades de múltiples perfiles profesionales y creativos:
Supón que el color principal de tu marca está definido como #E63946 en tu guía de estilo. El equipo de desarrollo necesita el valor RGB para una animación CSS, mientras que el diseñador de la app requiere el formato HSL. Con una sola entrada en nuestro conversor obtienes rgb(230, 57, 70) y hsl(356, 77%, 56%) al mismo tiempo, eliminando errores y ahorrando tiempo.
El formato HSL es ideal para generar escalas tonales. Fija el tono y la saturación, y varía únicamente la luminosidad para obtener versiones claras, medias y oscuras de un mismo color. Luego convierte cada paso a HEX o RGB para integrarlo directamente en tu código o en Figma.
Las pautas de accesibilidad WCAG exigen ratios de contraste mínimos entre el texto y el fondo. Para calcularlos, generalmente se necesitan los valores RGB de los colores implicados. Nuestro conversor te permite obtener esos valores en segundos para agilizar tus auditorías de accesibilidad.
Ambos formatos representan la misma información de color (intensidad de los canales rojo, verde y azul), pero con notaciones distintas. HEX utiliza base 16 (ej.: #FF5722), mientras que RGB emplea números decimales (ej.: rgb(255, 87, 34)). Son matemáticamente equivalentes y totalmente intercambiables con nuestro conversor.
El conversor maneja los formatos estándar HEX, RGB y HSL. Para añadir transparencia, toma el resultado RGB y agrega manualmente el canal alfa, por ejemplo rgba(255, 87, 34, 0.7). De forma similar, puedes combinar el resultado HSL con hsla() para controlar la opacidad.
HSL es más cercano a la percepción humana del color, lo que facilita enormemente el trabajo de diseño. Quieres una versión más clara de un color? Aumenta la luminosidad. ¿Necesitas un tono menos saturado? Reduce la saturación. Con RGB tendrías que ajustar tres valores simultáneamente, lo cual es mucho menos intuitivo.
Sí. El conversor utiliza fórmulas matemáticas estándar que producen resultados idénticos a los de herramientas profesionales como Figma, Adobe Photoshop o las DevTools de los navegadores. Pueden aparecer diferencias de redondeo de ±1 en los valores HSL, pero sin ningún impacto visual apreciable.
Sí, el conversor de colores es completamente responsivo y funciona perfectamente en smartphones y tablets. El selector de color también está optimizado para pantallas táctiles, lo que lo hace muy cómodo de usar en cualquier situación.