Conversor y selector de color
Elige cualquier color y obtén al instante sus valores HEX, RGB y HSL. Haz clic para copiar cualquier formato: ideal para CSS, herramientas de diseño y código.
Una herramienta de color creada para diseñadores y desarrolladores
Convierte entre HEX, RGB y HSL en tiempo real y copia directamente en tu CSS, Figma o design tokens.
Conversión en tiempo real
Edita cualquier formato y mira cómo HEX, RGB y HSL se recalculan en cuanto escribes. Sin botón de convertir, sin esperas.
Tres formatos sincronizados
HEX para código, RGB para cálculos y HSL para ajustes intuitivos. Los tres permanecen vinculados para que elijas el que prefieras.
Copia con un clic
Cada formato tiene su propio botón de copiar que deja valores listos para CSS en tu portapapeles. Pégalos directamente en tu hoja de estilos.
Selector de color visual
Elige cualquier color de forma visual con un selector de espectro completo. Genial para muestrear, afinar y explorar paletas.
Salida lista para CSS
Cada formato se genera como CSS válido, sin reformatear ni convertir de nuevo. Funciona con todos los navegadores modernos y herramientas de diseño.
100 % privado, sin servidor
Todos los cálculos de color se ejecutan en tu navegador. Los colores, las paletas y los valores nunca salen de tu dispositivo.
Quién usa el conversor de color
Desde quienes aprenden CSS por primera vez hasta equipos de marca que mantienen un sistema de diseño: una herramienta, cualquier flujo de trabajo.
Desarrolladores web
Convierte design tokens entre propiedades personalizadas de CSS, configuraciones de Tailwind y códigos HEX obtenidos del inspector del navegador.
- Variables CSS y colores de Tailwind
- Convierte HEX de Figma a HSL para temas
- Depura diferencias de color entre plataformas
Diseñadores
Mantén las paletas coherentes entre Figma, Sketch, Adobe y la web: convierte cualquier tono entre sistemas de color al instante.
- Exporta HEX de Figma a CSS
- Ajusta la saturación y la luminosidad con HSL
- Haz coincidir los colores de marca entre herramientas
Equipos de marca y guías de estilo
Documenta las paletas de marca en todos los formatos que necesitan diseñadores y desarrolladores: HEX, RGB y HSL lado a lado.
- Genera paletas de marca en tres formatos
- Crea especificaciones de color para compartir
- Audita códigos de color antiguos
Cómo convertir colores
Elige un color con el selector de color o escribe un valor HEX, RGB o HSL directamente en cualquier campo.
Todos los formatos se actualizan al instante: los valores HEX, RGB y HSL se recalculan en tiempo real a medida que haces cambios.
Haz clic en el botón Copiar junto a cualquier formato para copiar el valor al portapapeles, listo para pegarlo en CSS, Figma o código.
Explora más herramientas
Descubre otras herramientas gratuitas que combinan muy bien con esta
Compresor de imágenes
Reduce el tamaño del archivo sin perder calidad
Redimensionador de imágenes
Redimensiona 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 habituales 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 que se usa 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 por su tono, saturación y luminosidad, lo que suele ser más intuitivo para diseñadores que hacen pequeños ajustes.
¿Puedo escribir un código HEX directamente?
Sí. Haz clic en el campo HEX y escribe o pega cualquier código HEX válido de 6 dígitos (p. ej., #3B82F6). Los valores RGB y HSL se actualizarán automáticamente. Se admiten tanto el formato de 3 dígitos (#RGB) como el de 6 dígitos (#RRGGBB).
¿Se envían los datos del color a un servidor?
No. Toda la conversión de color se realiza por completo en tu navegador con JavaScript. No se envía nada a ningún servidor.
¿Puedo usar esta herramienta para obtener valores de color CSS?
Sí, solo 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.