Convertidor de colores (HEX, RGB, HSL)
Convierta colores entre HEX (#RRGGBB), RGB (0–255) y HSL (tono, saturación, luminosidad) en tiempo real. Ajuste el selector o escriba valores para ver todos los formatos actualizados juntos, ideal para CSS, transferencia de Figma y pautas de marca. HSL hace que los ajustes intuitivos (más claro/más oscuro sin cambio de tono) sean más fáciles que editar dígitos hexadecimales.
Color
Result
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
¿Cómo convertir colores
1. Elige un color visualmente o ingrese valores HEX, RGB o HSL.
2. Ve valores equivalentes en todos los formatos admitidos al instante.
3. Ajuste la luminosidad de HSL para estados de desplazamiento mientras mantiene la marca tono.
4. Copia el formato que necesitas tu pila (#hex para CSS, rgb() para navegadores modernos).
Ejemplos de conversión de color
Marca azul #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Oscurecer el cursor: hsl(217, 84%, 45%) sin adivinar hexadecimal.
CSS rgb a HEX para SVG
rgb(255, 87, 51) → #FF5733 para relleno SVG y recursos de color XML de Android.
Gris neutro para bordes
hsl(220, 10%, 90%) → gris frío muy claro; aumente ligeramente la saturación para fondos de interfaz de usuario teñidos.
¿Cuándo usar esta herramienta
• Cuando traduce tokens de diseño entre HEX en Figma y HSL en variables CSS.
• Cuando crea temas claros/oscuros consistentes cambiando la luminosidad de HSL.
• Cuando documenta paletas de marca para desarrolladores y especialistas en marketing.
¿Cuándo elegir otra cosa
• Cuando deba verificar el contraste WCAG: usa el verificador de contraste.
• Cuando necesites CMYK o Pantone para imprimir: use herramientas específicas de impresión.
• Cuando genere gradientes completos: usa el generador de gradiente CSS.
Teoría del color para el trabajo de UI
Los colores complementarios se ubican opuestos en la rueda de tono (180° de separación): alto contraste, úsalo con moderación para las llamadas a la acción. Los tonos análogos (±30°) resultan armoniosos en los salpicaderos. El cromo de la interfaz de usuario neutral a menudo usa azules o grises de baja saturación (hsl 220, 10 %, 96 %) en lugar de #EEE puro, que puede verse cálido o frío en diferentes pantallas. Limite la paleta de la marca a un tono principal, 2 o 3 neutros y verdes/rojos semánticos para el estado.
La accesibilidad comienza en la conversión
Un hermoso #7C3AED morado sobre blanco puede fallar en contraste para texto pequeño. Después de elegir los colores aquí, ejecute pares de primer plano y fondo a través del verificador de contraste. Prefiera ajustes de HSL para corregir fallas: oscurecer el texto o aclarar el fondo conservando el tono. No confíe únicamente en el color para detectar errores: combínelo con iconos y etiquetas (WCAG 1.4.1).
Preguntas frecuentes
¿Para qué sirve HSL? ¿para?
Ajustar la luminosidad y la saturación mientras se mantiene el tono estable, p. primario, primario-desplazado, primario-silenciado desde un valor de tono.
¿Abreviatura HEX #RGB?
#F53 se expande a #FF5533. Aceptamos hexadecimal de 3 o 6 dígitos (# opcional).
sRGB vs display-P3?
Esta herramienta utiliza sRGB, estándar para CSS web. Las pantallas de gama amplia pueden mostrarse ligeramente diferentes.
¿Alfa/transparencia?
¿Es posible que se admitan HEX de 8 dígitos (#RRGGBBAA) y rgba() cuando la herramienta expone alfa: verifique los campos de la interfaz de usuario.
¿Por qué mis sumas RGB se ven mal en hexadecimal?
Cada canal tiene 0–255 → dos dígitos hexadecimales. 255 = FF, no “255” concatenado.
¿Mis datos se envían a un servidor?
No.
¿Esta herramienta es gratuita?
Sí.