Convertidor y selector de color
Selecciona cualquier color y obtén al instante sus valores HEX, RGB y HSL. Haz clic para copia cualquier formato: ideal para CSS, herramientas de diseño y código.
Una herramienta de color diseñada para diseñadores y desarrolladores.
Convierte entre HEX, RGB y HSL en tiempo real y luego copia directamente en tus archivos CSS, Figma o tokens de diseño.
Conversión en tiempo real
Edita cualquier formato y observa cómo se recalculan los valores HEX, RGB y HSL al instante. Sin botón de convertir , sin demoras.
Tres formatos sincronizados
HEX para código, RGB para matemáticas, HSL para ajustes intuitivos. Los tres permanecen vinculados para que puedas elegir tu favorito.
Copia con un solo clic
Cada formato tiene un botón de copia específico que guarda los valores listos para CSS en el portapapeles. Pégalos directamente en tu hoja de estilos.
Selector de color visual
Selecciona cualquier color visualmente con un selector de espectro completo. Ideal para muestrear, ajustar y explorar paletas de colores.
Salida lista para CSS
Todos los formatos se generan como CSS válido, sin necesidad de reformatear ni convertir. Funciona con todos los navegadores y herramientas de diseño modernos.
100% privado — Sin servidor
Todos los cálculos de color se realizan en tu navegador. Los colores, las paletas y los valores nunca salen de tu dispositivo.
¿Quién utiliza el convertidor de color?
Desde quienes aprenden CSS por primera vez hasta los equipos de marca que mantienen un sistema de diseño: una sola herramienta, cualquier flujo de trabajo.
Desarrolladores web
Convierte tokens de diseño entre propiedades personalizadas de CSS, configuraciones de Tailwind y códigos HEX extraídos del inspector del navegador.
- Variables CSS y colores de Tailwind
- Convertir Figma HEX a HSL para temas
- Solucionar problemas de coincidencia de colores en diferentes plataformas.
Diseñadores
Mantén la coherencia de las paletas de colores en Figma, Sketch, Adobe y la web: convertir cualquier tono entre sistemas de color al instante.
- Exportar HEX de Figma a CSS
- Ajusta la saturación y la luminosidad con HSL.
- Combina los colores de la marca en todas las herramientas.
Equipos de la Guía de Marca y Estilo
Documenta las paletas de colores de las marcas en todos los formatos que necesitan los diseñadores y desarrolladores: HEX, RGB y HSL, una al lado de la otra.
- Generar paletas de marcas en triple formato
- Crea especificaciones de color compartibles
- Auditar códigos de color heredados
Cómo convertir colores
Seleccione un color mediante el selector de color o introduzca directamente un valor HEX, RGB o HSL en cualquier campo de entrada.
Todos los formatos se actualizan al instante: los valores HEX, RGB y HSL se recalculan en tiempo real a medida que realizas cambios.
Haz clic en el botón Copiar junto a cualquier formato para copia el valor al portapapeles, listo para pegarlo en CSS, Figma o código.
Explora más herramientas
Descubre otras herramientas gratuitas que funcionan de maravilla junto con esta.
Compresor de imágenes
Reduce el tamaño del archivo sin perder calidad.
Redimensionador de imágenes
Redimensionar las imágenes a las dimensiones exactas.
Eliminador de fondo
Elimina fondos con precisión de IA
Generador de códigos QR
Crea códigos QR personalizados al instante
Convertidor de imágenes
Convierte entre más de 30 formatos de imagen.
PNG a WebP
Archivos más pequeños, misma calidad para la web.
Preguntas frecuentes
Respuestas a las preguntas más frecuentes sobre la conversión de colores entre HEX, RGB y HSL.
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX (p. ej. #FF5733) es una representación hexadecimal utilizada en HTML y CSS. RGB (p. ej. rgb(255, 87, 51)) define un color mediante sus canales rojo, verde y azul. HSL (p. ej. hsl(11, 100%, 60%)) define un color mediante su tono, saturación y luminosidad, lo que suele ser más intuitivo para los diseñadores que realizan pequeños ajustes.
¿Puedo escribir un código HEX directamente?
Sí. Haz clic en el campo de entrada HEX e introduce o pega cualquier código HEX válido de 6 dígitos (por ejemplo, #3B82F6). Los valores RGB y HSL se actualizarán automáticamente. Se admiten los formatos de 3 dígitos (#RGB) y de 6 dígitos (#RRGGBB).
¿Se envían los datos de color a un servidor?
No. Toda la conversión de color se realiza completamente en tu navegador mediante JavaScript. No se envía nada a ningún servidor.
¿Puedo usar esta herramienta para obtener valores de color CSS?
Sí, simplemente haz clic en Copiar junto a HEX, RGB o HSL y pégalo directamente en tu CSS. Los tres formatos son valores de color CSS válidos y compatibles con todos los navegadores modernos.