Conversor de Color — HEX, RGB y HSL
Convierte cualquier color entre HEX, RGB y HSL y copia el código al instante — herramienta gratis para diseñadores.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)La conversión ocurre en local
Seguro para marcas sin anunciar
Sin cuenta
Conexión segura
Cómo funciona
- 1
Introduce un color
Pega un código HEX, escribe valores RGB o ajusta HSL: lo que tengas a mano.
- 2
Lee las otras notaciones
Las dos restantes se actualizan al momento, junto a una muestra del color resultante.
- 3
Copia lo que necesites
Toma la notación que usa tu hoja de estilos, tu herramienta de diseño o tu documento de marca.
Por qué usar esta herramienta
Tres notaciones a la vez
HEX, RGB y HSL se mantienen sincronizadas al cambiar cualquiera de ellas: no hay que convertir dos veces para comprobar.
Edita en HSL, entrega en HEX
HSL es el modelo sobre el que puedes razonar; HEX es lo que siguen pidiendo la mayoría de hojas de estilo y archivos de diseño.
Muestra en vivo
El color se dibuja mientras escribes, así que una errata en un código hex se ve al instante.
Copia en un clic
Toma la cadena exacta que espera tu CSS, tu configuración de Tailwind o tu herramienta de diseño, ya formateada.
No se sube nada
La conversión es aritmética hecha en tu navegador: ningún valor se envía a ningún sitio.
Gratis y sin cuenta
Sin registro, sin límite de conversiones y sin marca de agua en nada.
HEX, RGB y HSL describen el mismo color de forma distinta
Las tres notaciones se dirigen a los mismos colores de pantalla; se diferencian en cómo está organizado el número, y esa organización es lo que hace que una sea más cómoda que otra según la tarea. HEX empaqueta tres valores en una cadena compacta: `#3B82F6` es rojo 59, verde 130 y azul 246 escritos en base 16. RGB indica esos tres canales directamente. HSL reestructura la misma información en tono (qué color, como un ángulo de 0 a 360), saturación (cuán vivo, de 0 a 100%) y luminosidad (cuán claro, de 0 a 100%). Convertir entre ellas no pierde nada: `#3B82F6`, `rgb(59, 130, 246)` y `hsl(217, 91%, 60%)` son el mismo color escrito de tres maneras.
Por qué HSL es el que merece la pena aprender
Razonar con HEX y RGB es difícil porque cambiar un color significa cambiar tres números a la vez sin una relación evidente con lo que ves. Aclara un azul en RGB y tendrás que subir los tres canales en cantidades que has de adivinar. En HSL esa misma edición es un solo número: sube la luminosidad. ¿Quieres una versión apagada de un color de marca? Baja la saturación y deja el resto. ¿Necesitas un estado hover algo más oscuro que el base? Resta diez a la luminosidad. Por eso HSL es también la vía práctica para construir una escala de color: fija tono y saturación, escalona la luminosidad, y la familia queda coherente por construcción y no a base de prueba y error.
Dónde se usa realmente cada notación
HEX domina en la entrega de diseño: los manuales de marca, Figma y la mayoría de hojas de estilo siguen especificando colores como códigos de seis dígitos, y es el formato que con más probabilidad te enviará un cliente o una imprenta. RGB aparece donde hay que manipular canales por programa, y en la forma `rgba()` cuando entra la transparencia. HSL es cada vez más el formato que se escribe a mano en CSS, precisamente porque quien mantiene el código lee `hsl(217, 91%, 60%)` y sabe que es un azul saturado de luminosidad media, mientras que `#3B82F6` no le dice nada hasta renderizarlo. Un flujo habitual es razonar en HSL mientras se diseña y convertir a HEX para el documento de entrega: justo la conversión que esta herramienta existe para hacer instantánea.
Leer un código HEX sin conversor
Un código HEX de seis dígitos son tres pares: rojo, verde y azul, cada uno de `00` a `FF` (0 a 255). Hay dos patrones que conviene reconocer a ojo. Cuando los tres pares son iguales —`#333333`, `#CCCCCC`— el color es un gris neutro, y cuanto mayor el valor más claro es. Cuando un par domina claramente, ese canal es el color: `#CC3333` se lee como rojo y `#33CC33` como verde. Esto basta para cazar un error evidente antes de renderizar, pero no para juzgar si dos colores están cerca, que es exactamente donde convertir a HSL y comparar los tres componentes resulta más rápido que mirar fijamente cadenas hexadecimales.
Convertir un color no es comprobar que funciona
Un conversor te dice qué color es, no si resulta legible sobre su fondo. Son preguntas distintas, y la segunda tiene un umbral y no una opinión: WCAG exige una relación de contraste de al menos 4,5:1 para el texto de cuerpo normal. Una pareja de colores puede ser perfectamente fiel a la marca y aun así no superarlo. Si el color que estás convirtiendo va a llevar texto —o es texto— pasa la pareja por el verificador de contraste antes de comprometerte. Del mismo modo, si estás construyendo un conjunto de colores en vez de convertir uno solo, el generador de paletas trabaja sobre relaciones entre tonos, algo que la conversión por sí sola no aborda.
Alfa, transparencia y la forma de ocho dígitos
Tanto HEX como RGB tienen variantes transparentes: el HEX de ocho dígitos añade dos caracteres de alfa, y `rgba()` suma un cuarto valor de 0 a 1. Esta herramienta convierte la forma opaca de seis dígitos, que es la que usan los documentos de marca, los archivos de diseño y la abrumadora mayoría de declaraciones de estilo. Si necesitas transparencia, convierte aquí el color sólido y añade el canal alfa en tu hoja de estilos: así el color base sigue siendo una única fuente de verdad y cada uso fija su propia opacidad, en lugar de hornear en la paleta docenas de variantes semitransparentes casi idénticas.
Errores comunes que conviene evitar
- Ajustar un color editando los canales RGB. Aclararlo o apagarlo en RGB obliga a tocar tres números en cantidades que hay que adivinar. Convierte a HSL, cambia el único componente que describe lo que quieres y vuelve a convertir.
- Construir una escala eligiendo tonos a ojo. Escalonar la luminosidad en HSL manteniendo tono y saturación produce una familia coherente; elegir códigos hex a mano produce una que deriva de tono y se ve embarrada en el medio.
- Dar por hecho que un color convertido es accesible. La conversión es aritmética y no dice nada sobre legibilidad: la pareja sigue teniendo que superar 4,5:1 para texto de cuerpo, y eso solo lo dice una comprobación de contraste.
- Copiar un código hex sin la almohadilla, o con ella, en un campo que espera lo contrario. Ambas formas son habituales y ninguna se acepta universalmente; comprueba qué quiere tu herramienta en vez de suponerlo.
- Esperar que un color de pantalla se imprima igual. HEX, RGB y HSL describen luz emitida por una pantalla; la impresión usa tintas CMYK, y los colores vivos de pantalla —sobre todo azules y verdes saturados— no tienen equivalente exacto en tinta.
Comparativa
| KeroTools | Software de diseño | Conversores de buscador | |
|---|---|---|---|
| HEX, RGB y HSL juntas | Las tres, en vivo | Sí | Normalmente una cada vez |
| Valores enviados a un servidor | Nunca | No | A menudo |
| Muestra en vivo | Sí | Sí | A veces |
| Cuenta o licencia | Ninguna | Licencia requerida | Ninguna |
| Funciona sin conexión | Tras la primera carga | Sí | No |
| Coste | Gratis | De pago | Gratis |
Características
Entrada y salida HEX
Notación de seis dígitos, con o sin la almohadilla inicial.
Entrada y salida RGB
Tres canales de 0 a 255, en el formato que CSS acepta directamente.
Entrada y salida HSL
Tono en grados, saturación y luminosidad en porcentaje: el modelo en el que los diseñadores piensan de verdad.
Vista previa en vivo
Una muestra dibuja el valor actual, así los errores se detectan a ojo.
Bidireccional
Edita cualquiera de las tres y las otras dos la siguen; no hay un campo de origen fijo.
Cadenas listas para copiar
La salida se formatea para pegarse directamente en CSS sin retoques.
Sin instalación
Nada que descargar ni instalar: funciona en la propia página web.
Compatible con árabe y RTL
Interfaz completa en ocho idiomas, incluido el árabe de derecha a izquierda.
Seguro por defecto
Servido por HTTPS, sin rastreo de archivos ni subidas a terceros.
Quién la usa
Desarrolladores front-end
Pasar la entrega en HEX de un diseñador a los valores HSL con los que una hoja de estilos se mantiene mejor.
Diseñadores
Leer un color de marca en HSL para construir tintes y sombras que se queden en la misma familia de tono.
Marketing y responsables de marca
Obtener la notación exacta que pide el editor de temas de cada plataforma, partiendo de un solo color de marca.
Cualquiera que edite un tema
Encajar un color tomado de una herramienta en un campo que espera otro formato.
Preguntas Frecuentes
No. Todo se ejecuta localmente en tu navegador — nada se sube, guarda ni comparte.
Sí — totalmente gratis, sin cuenta y sin límites.