Conversor de Color: HEX, RGB, HSL
Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.
Qué hace esta herramienta
Conversor de colores que pasa entre HEX, RGB y HSL al vuelo. Pega cualquier formato, los demás aparecen al instante. Perfecto para diseñadores y desarrolladores frontend.
Cuando ya tengas el color, llévalo a generador de paletas para una paleta armónica o a generador de gradientes para crear un degradado.
Para qué te sirve
- Pasar un HEX de Figma a RGB para usarlo en una variable CSS.
- Convertir un RGB exportado de Photoshop a HSL para ajustar saturación.
- Comprobar el equivalente HSL de un color de marca.
- Verificar que dos colores con notación distinta son realmente el mismo.
Cómo se usa
- Pega un color en cualquier formato: #ff5500, rgb(255, 85, 0) o hsl(20, 100%, 50%).
- Las demás representaciones aparecen automáticamente.
- Copia la que necesites con un clic.
- Cambia el valor y la conversión se actualiza al instante.
Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.
Colores frecuentes con sus tres representaciones
Para que veas la equivalencia entre HEX, RGB y HSL, aquí tienes algunos colores de marca habituales y cómo se escriben en cada notación.
Verde Toolfarm
HEX: #22C55ERGB: rgb(34, 197, 94)HSL: hsl(142, 71%, 45%)Negro Spotify
HEX: #191414RGB: rgb(25, 20, 20)HSL: hsl(0, 11%, 9%)Azul Twitter
HEX: #1DA1F2RGB: rgb(29, 161, 242)HSL: hsl(203, 89%, 53%)Rosa Stripe
HEX: #FF5996RGB: rgb(255, 89, 150)HSL: hsl(338, 100%, 67%)Naranja Hacker
HEX: #FF6600RGB: rgb(255, 102, 0)HSL: hsl(24, 100%, 50%)Negro tinta
HEX: #0F172ARGB: rgb(15, 23, 42)HSL: hsl(222, 47%, 11%)
Combina bien con
Otras herramientas que la gente suele usar en el mismo flujo.
- Generador de Paletas de Color
generar paletas de colores
Una vez tienes el color base.
- Generador de Gradientes CSS
crear gradientes CSS
Una vez tienes el color base.
- Convertir Imagen: PNG, JPG, WebP
convertir imágenes entre PNG, JPG y WEBP
Para extraer o ajustar los colores.
- Verificar Contraste de Color (WCAG)
comprobar el contraste de color WCAG
Una vez tienes el color base.
- Generador de sombras CSSEn camino
crear sombras CSS
Una vez tienes el color base.
Otras herramientas del mismo campo
DiseñoGenerador de Paletas de Color
Genera paletas de color armónicas a partir de cualquier color base: análogas, complementarias y más. Gratis, en tu navegador, listas para copiar.
Generador de Gradientes CSS
Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.
Verificar Contraste de Color (WCAG)
Comprueba el contraste de color WCAG entre texto y fondo, con vistas previas en vivo, resultado aprobado o suspenso y sugerencias accesibles.
Generador de border radius CSS
Crea un border-radius en CSS con vista previa: redondea cada esquina por separado en píxeles o porcentaje y copia el código. Gratis y en tu navegador.
Preguntas frecuentes
¿Qué formatos de color acepta?
Acepta HEX (con o sin almohadilla, 3 o 6 dígitos), RGB (rgb() y rgba()) y HSL (hsl() y hsla()). Si pegas un color con transparencia, se conserva en los demás formatos cuando es posible.
¿Cómo se convierten entre sí HEX, RGB y HSL?
HEX y RGB son la misma información en notación distinta: 8 bits por canal. HSL describe el color por matiz, saturación y luminosidad, y se calcula a partir de RGB con una fórmula reversible. La conversión es matemáticamente exacta.
¿Puedo usar la herramienta para revisar contrastes?
La conversión no calcula contraste WCAG, pero el formato HSL te ayuda a entender qué tan claro u oscuro es un color (componente L), lo que sirve para emparejar tonos accesibles.
¿Funciona con nombres de color CSS como «tomato»?
De momento la herramienta solo entiende notaciones numéricas. Para nombres CSS, busca su equivalente HEX en cualquier referencia y pégalo aquí.