Conversor de Colores Hex / RGB / HSL
Pega un código Hex, RGB o HSL y convierte entre los tres formatos. Muestra vista previa visual, código CSS listo para copiar y nombre aproximado del color. Útil para diseñadores y desarrolladores.
Color seleccionado
#0F3D2E
Verde azulado oscuro
CSS listo
color: #0F3D2E; background-color: rgb(15, 61, 46); border-color: hsl(160, 61%, 15%);
Cuándo usar cada formato
- • HEX — herramientas de diseño (Figma, Sketch), CMS, HTML inline.
- • RGB — alfa/transparencia mediante rgba().
- • HSL — sistemas de diseño y variantes claro/oscuro (solo ajusta L).
Accesibilidad rápida
El texto negro sobre este color es difícil de leer. Usa texto claro para un contraste adecuado. Para cumplir WCAG AA en texto pequeño, apunta a contraste ≥ 4,5:1.
Cómo funciona
Como funciona el Conversor de Colores Hex / RGB / HSL
La herramienta maneja las tres formas de describir el mismo color. Hex usa seis digitos en base 16 (ej: #FF6B35), RGB separa los tres canales en valores de 0 a 255, y HSL describe matiz, saturacion y luminosidad. Pegas un codigo en cualquier formato y la herramienta recalcula los otros dos, muestra la vista previa visual, el codigo CSS listo para copiar y el nombre aproximado del color.
En la practica: pega el naranja de tu marca como #FF6B35 y al instante se convierte en rgb(255, 107, 53) y hsl(16, 100%, 60%). La vista previa confirma el tono en pantalla, y copias la linea CSS directo a tu boton de comprar o a la barra de envio gratis sin abrir Photoshop solo para sacar el valor.
Consejo para el e-commerce brasileno: estandariza la paleta de la tienda en un solo formato (Hex es lo ideal) y guarda los codigos del CTA, del sello de descuento y del banner. Cuidado con el atajo de 3 digitos (#F63 no es igual a #FF6B35) y recuerda que la pantalla del cliente puede mostrar el color algo distinto a la etiqueta impresa o al empaque.
Aprende más
Artículos para sacarle partido a esta herramienta
Melhores Ferramentas para Monitorar Concorrentes em 2026 (Comparativo Honesto)
Nenhuma ferramenta faz tudo, e quem te diz o contrário quer vender uma. O comparativo direto por objetivo, com preços, pra você montar o stack certo sem desperdício.
Como Monitorar o Site de um Concorrente (Preços, Lançamentos e Mudanças)
O site é onde a estratégia do concorrente se materializa primeiro — e é o canal menos vigiado. Como detectar cada preço novo, lançamento e banner sem viver dando F5.
Preguntas frecuentes
Preguntas frecuentes
- ¿Cuál es la diferencia entre Hex, RGB y HSL?
- Hex usa un código hexadecimal de 6 dígitos (ej: #FF5733); RGB define el color por canales de rojo, verde y azul (ej: rgb(255,87,51)); HSL usa tono, saturación y luminosidad. Los tres representan el mismo color, solo cambia la notación. El conversor traduce entre los tres formatos.
- ¿Cómo convertir Hex a RGB?
- Pega el código Hex (ej: #FF5733) en el conversor y devuelve el RGB equivalente, en este caso rgb(255, 87, 51). La conversión separa el Hex en pares (FF, 57, 33) y transforma cada par en un valor de 0 a 255. Funciona en ambos sentidos: RGB a Hex también.
- ¿Cómo encontrar el código de un color en CSS?
- Pega el color en cualquier formato (Hex, RGB o HSL) y el conversor muestra el código CSS listo para copiar, además de una vista previa visual y el nombre aproximado del color. Solo pégalo directo en tu hoja de estilos.
- ¿El conversor de colores es gratis?
- Sí, el conversor de Hex, RGB y HSL es 100% gratuito, funciona en el navegador y no requiere registro. Ideal para diseñadores y desarrolladores que necesitan alternar entre formatos de color rápidamente.
- ¿Cuándo usar HSL en lugar de Hex en CSS?
- Usa HSL cuando necesites ajustar un color de forma intuitiva: aclarar, oscurecer o desaturar cambiando solo la luminosidad y la saturación. Hex y RGB son más comunes en herramientas de diseño, pero HSL facilita crear variaciones y paletas. El conversor muestra los tres para que elijas.
