SEO y utilidadesGratis
Conversor de Colores Hex / RGB / HSL
Convierte un código de color entre Hex, RGB y HSL. Muestra el color, el código CSS listo para copiar y el nombre aproximado del color. Útil para diseño y desarrollo.
- Sin registro
- Funciona en el navegador
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 y HTML inline.
- RGB: transparencia (canal alfa) con rgba().
- HSL: sistemas de diseño y variantes más claras u oscuras (ajusta solo la 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, busca un contraste de al menos 4,5:1.
Cómo funciona
Cómo funciona el Conversor de Colores Hex / RGB / HSL
La herramienta maneja las tres formas de describir el mismo color. Hex usa seis dígitos en base 16 (ej: #FF6B35), RGB separa los tres canales en valores de 0 a 255, y HSL describe matiz, saturación y luminosidad. Pegas un código en cualquier formato y la herramienta recalcula los otros dos, muestra el color, el código CSS listo para copiar y el nombre aproximado del color.
En la práctica: pega el naranja de tu marca como #FF6B35 y al instante se convierte en rgb(255, 107, 53) y hsl(16, 100%, 60%). La muestra confirma el tono en pantalla, y copias la línea CSS directo a tu botón de comprar o a la barra de envío gratis sin abrir Photoshop solo para sacar el valor.
Consejo para el e-commerce brasileño: estandariza la paleta de la tienda en un solo formato (Hex es lo ideal) y guarda los códigos del CTA, del sello de descuento y del banner. Cuidado con el atajo de 3 dígitos (#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.
Dudas
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.
Blog
Artículos sobre el tema
Guía
Las Mejores Herramientas para Monitorear a la Competencia en 2026 (Comparativa Honesta)
Ninguna herramienta lo hace todo — y quien te dice lo contrario quiere venderte una. La comparativa directa por objetivo, con precios, para que armes el stack correcto sin desperdicio.
10 min de lectura
Canales
Cómo Monitorear el Sitio de un Competidor (Precios, Lanzamientos y Cambios)
El sitio es donde la estrategia del competidor se materializa primero — y es el canal menos vigilado. Cómo detectar cada precio nuevo, lanzamiento y banner sin vivir dando F5.
9 min de lectura