Conversor de Colores HEX RGB HSL Gratis
Convierte colores entre HEX, RGB, HSL y RGBA. Explora paletas, tintes y tonos oscuros al instante.
🎨 Paleta de variantes
⭐ Colores populares
📖 Todo sobre esta herramienta
¿Qué hace esta herramienta?
El Conversor de Colores de ToolsNova AI transforma cualquier color entre seis formatos de representación digital: HEX (el código hexadecimal usado en HTML/CSS), RGB (rojo, verde, azul en escala 0-255), HSL (tono, saturación, luminosidad), RGBA (RGB con canal alfa de transparencia), nombre CSS (cuando el color tiene nombre estándar) y HSB/HSV (tono, saturación, brillo, usado en Photoshop y Illustrator). Además, genera automáticamente una paleta de tintes (versiones más claras) y sombras (versiones más oscuras) del color seleccionado.
Incluye un selector de color visual, un campo de texto para ingresar manualmente cualquier código HEX, y sliders RGB para ajustar los canales de color de forma interactiva.
⚙️ Cómo funciona
Toda la conversión ocurre en JavaScript sin necesidad de servidor. Al ingresar un color, el algoritmo primero lo convierte al formato RGB como base común (con fórmulas para descomponer el HEX en tres bytes), y desde ahí calcula cada uno de los demás formatos usando transformaciones matemáticas estándar: para HSL usa la ecuación que normaliza R, G, B a [0,1] y calcula el tono como el ángulo en el espacio de color, para HSB usa la luminosidad de brillo máximo, y para RGBA simplemente añade canal alfa completo (1.0) por defecto. Los tintes y sombras se generan interpolando el color hacia blanco y negro respectivamente.
«Para diseñadores y desarrolladores, este conversor cubre prácticamente todos los formatos que se encuentran en el flujo de trabajo moderno. La combinación de selector visual + campo de texto + sliders RGB hace que sea cómodo tanto para empezar desde un color visual como para ingresar un código exacto. La generación automática de tintes y sombras es especialmente útil para construir sistemas de diseño completos sin herramientas de pago.»
🎯 Casos de uso principales
Imprescindible en el trabajo creativo y técnico:
- Desarrollo web frontend: Convierte el HEX del branding de un cliente a HSL para manipularlo fácilmente en CSS con variables de color.
- Diseño gráfico: Photoshop e Illustrator usan HSB; Figma y los navegadores usan HEX y HSL. Convierte entre ellos sin perder fidelidad de color.
- Identidad de marca: Genera paletas de tintes y sombras a partir del color principal de una marca para crear sistemas de diseño coherentes.
- Accesibilidad: Ajusta colores con el slider de luminosidad para asegurar contraste suficiente (WCAG AA/AAA).
- Animaciones CSS: Crea variantes de un color para transiciones suaves usando HSL con diferente luminosidad.
- Desarrollo de apps móviles: Android y iOS usan formatos distintos; esta herramienta facilita la conversión entre ellos.
✅ Ventajas
- Seis formatos de color en una herramienta
- Selector de color visual intuitivo
- Paleta de tintes y sombras automática
- Sliders RGB interactivos
- Copia con un clic cada formato
- Botón de color aleatorio para inspiración
❌ Limitaciones
- No guarda paletas para usar más tarde
- No exporta paletas como archivo CSS o JSON
- No verifica el contraste WCAG automáticamente
- No genera paletas complementarias ni análogas
📋 Tutorial paso a paso
Selecciona un color
Haz clic en el círculo de color para abrir el selector visual, o escribe directamente un código HEX en el campo de texto (ej: #FF5733).
Usa el color aleatorio si quieres explorar
Haz clic en '🎲 Color aleatorio' para descubrir colores interesantes y ver cómo se representan en cada formato.
Copia el formato que necesitas
Debajo del área de vista previa verás las tarjetas con HEX, RGB, HSL, RGBA, nombre CSS y HSB. Pulsa 'Copiar' en el que vayas a usar en tu proyecto.
Ajusta con los sliders RGB
Si quieres hacer pequeñas modificaciones al color, usa los sliders de Rojo, Verde y Azul en la parte inferior de la herramienta.
Explora los tintes y sombras
Desplázate hacia abajo para ver la paleta generada automáticamente: versiones más claras y oscuras de tu color base, perfectas para sistemas de diseño.
🔄 Alternativas a esta herramienta
❓ Preguntas frecuentes
Conversor de colores: HEX, RGB, HSL y HSB para diseñadores y desarrolladores
Los colores en diseño digital existen en múltiples espacios de color simultáneamente. Un diseñador en Figma trabaja con HEX y HSL; un desarrollador frontend escribe CSS con rgb() y hsl(); un fotógrafo en Lightroom ajusta HSB. El Conversor de Colores de ToolsNova AI traduce cualquier color entre HEX, RGB, RGBA, HSL y HSB al instante, generando además una paleta completa de tintes y sombras del color base.
Los cuatro espacios de color más usados en diseño digital
| Formato | Sintaxis | Dónde se usa | Ventaja principal |
|---|---|---|---|
| HEX | #2563EB | CSS, HTML, herramientas de diseño | Compacto, fácil de copiar |
| RGB | rgb(37, 99, 235) | CSS, programación | Intuitivo si trabajas con canales de luz |
| RGBA | rgba(37, 99, 235, 0.8) | CSS para transparencias | Único que incluye canal alfa (opacidad) |
| HSL | hsl(221, 83%, 53%) | CSS nativo, Tailwind CSS | Más natural para crear variaciones de un color |
| HSB / HSV | hsb(221, 84%, 92%) | Photoshop, Illustrator, Figma | El Brightness=100% siempre es el color más vivo |
HSL vs. HSB: la diferencia que confunde a diseñadores
Ambos usan los mismos ejes Hue y Saturation, pero difieren en el tercer componente. En HSB/HSV, Brightness (o Value) al 100% produce el color más saturado y brillante posible — el "rojo puro" es hsb(0, 100%, 100%). Al subir el Brightness reduces la oscuridad; al subir la Saturation reduces el blanco.
En HSL, Lightness al 100% siempre es blanco puro, sin importar el Hue o la Saturation. El color más "vivo" ocurre a L=50%. Esto hace que HSL sea más predecible para crear variantes: si quieres una versión más clara de tu color base, aumenta L; si quieres más oscuro, disminúye L — manteniendo siempre el mismo tono (Hue) y pureza (Saturation).
Los navegadores web y CSS usan HSL. Photoshop y Figma usan HSB por defecto. Nuestro conversor calcula ambos simultáneamente para que puedas trabajar en cualquier herramienta sin confusión.
El modelo RGB y los canales de luz aditiva
RGB (Red, Green, Blue) es un modelo de color aditivo: combina luz de los tres colores primarios. En pantalla, cada canal va de 0 a 255. El negro es rgb(0,0,0) — ninguna luz. El blanco es rgb(255,255,255) — toda la luz. El rojo puro es rgb(255,0,0). La mezcla de rojo y verde al máximo produce amarillo: rgb(255,255,0). Esto parece contraintuitivo si estás acostumbrado a mezclar pintura (modelo sustractivo RYB), pero es la física de la pantalla.
Cómo crear una paleta de colores coherente
La herramienta genera automáticamente 14 variaciones del color que selecciones: 9 tintes (más claros) y 4 sombras (más oscuras). Para crear una paleta completa de design system, el proceso estándar es:
- Elige tu color base (el "500" de la escala, como el azul principal de tu marca)
- Los tintes progresivos (100 a 400) son ideales para fondos, hover states y elementos sutiles
- Las sombras (600 a 900) funcionan para texto, bordes y estados activos
- Exporta los HEX de cada variante y defínelos como variables CSS (
--color-primary-500: #2563EB)
Herramientas relacionadas
Para crear más activos de diseño digital: Generador de Códigos QR para tus proyectos. Para todas las herramientas de utilidad: herramientas online gratuitas.