# Desplazador de Matiz de Color Desplaza matices de colores y crea variaciones con controles de rotación horaria/antihoraria > Página canónica: https://elysiatools.com/es/tools/color-hue-shifter - **Categoría:** Design - **Palabras clave:** color, matiz, desplazamiento, rotación, rueda, ajuste, tono, sombra, ajuste de color ## Descripción general El Desplazador de Matiz de Color es una herramienta de diseño intuitiva que permite rotar el tono de cualquier color base a lo largo de la rueda cromática, facilitando la creación de paletas armónicas y variaciones de color precisas. ## Entradas - **Color Base** (color) - **Tipo de Ajuste** (select) - **Cantidad de Desplazamiento de Matiz (grados)** (range): Cantidad de desplazamiento de matiz para rotación de color (0° a 360°) - **Pasos del Gradiente** (number): Solo se aplica cuando "Gradiente (rueda completa)" está seleccionado. Controla cuántos colores generar en la secuencia del gradiente de matiz (2-20 pasos) - **Incluir Colores Complementarios** (checkbox) - **Preservar Valor de Luminosidad** (checkbox) ## Cuándo usarlo - Cuando necesitas generar esquemas de colores complementarios o análogos a partir de un tono base. - Al crear gradientes de color suaves que requieren una transición uniforme a través de la rueda cromática. - Para ajustar la consistencia visual de una marca manteniendo el mismo nivel de luminosidad en diferentes variaciones de color. ## Cómo funciona - Selecciona tu color base utilizando el selector de color integrado. - Elige el tipo de ajuste, ya sea rotación horaria, antihoraria, gradiente o un desplazamiento personalizado. - Define la cantidad de grados de rotación o el número de pasos si estás generando un gradiente. - Aplica opciones adicionales como la preservación de la luminosidad para asegurar que el brillo del color no se altere durante el proceso. ## Casos de uso - Diseño de interfaces de usuario para crear estados de botones (hover, activo, deshabilitado) basados en un color primario. - Desarrollo de sistemas de diseño para generar paletas de colores secundarias que mantengan la armonía con el color de marca principal. - Creación de visualizaciones de datos donde se requiere una progresión de color lógica y equilibrada para representar diferentes categorías. ## Preguntas frecuentes ### ¿Qué hace la opción 'Preservar Valor de Luminosidad'? Mantiene el nivel de brillo original del color base, asegurando que el nuevo color tenga la misma intensidad visual tras el desplazamiento del matiz. ### ¿Puedo generar más de 20 pasos en un gradiente? No, la herramienta permite configurar entre 2 y 20 pasos para garantizar un rendimiento óptimo y una transición de color coherente. ### ¿Cómo funciona el modo de gradiente? El modo gradiente divide la rueda cromática según el número de pasos definidos, creando una secuencia de colores equidistantes a partir de tu color base. ### ¿Es posible obtener colores complementarios automáticamente? Sí, al activar la casilla 'Incluir Colores Complementarios', la herramienta calculará y mostrará el color opuesto en la rueda cromática. ### ¿En qué formato se obtienen los resultados? Los resultados se generan en formato HTML, permitiéndote visualizar y copiar los códigos de color resultantes directamente para tu proyecto. ## Herramientas relacionadas - [Colores Análogos](https://elysiatools.com/es/tools/color-analogous): Generar esquemas de colores análogos armoniosos con colores adyacentes en la rueda de color, creando combinaciones unificadas y pacíficas - [Complemento de Color](https://elysiatools.com/es/tools/color-complement): Encontrar colores complementarios y crear esquemas armoniosos con relaciones triádicas, tetraédricas y análogas - [Inversor de Color](https://elysiatools.com/es/tools/color-inverter): Invertir colores y crear versiones negativas con métodos de inversión RGB, HSL y brillo - [Aclarar/Oscurecer Color](https://elysiatools.com/es/tools/color-lighten-darken): Ajusta el brillo de los colores y crea variaciones - [Saturar/Desaturar Color](https://elysiatools.com/es/tools/color-saturate-desaturate): Ajusta la saturación del color y crea variaciones de saturación - [Generador de Sombras de Color](https://elysiatools.com/es/tools/color-shade): Genere variaciones más oscuras de un color agregando negro, creando sombras ricas para profundidad y contraste en el diseño - [Herramienta de Tétrade de Color](https://elysiatools.com/es/tools/color-tetrad): Generar esquemas de color tétricos con cuatro colores dispuestos en patrones rectangulares en la rueda de color, creando relaciones de color ricas y complejas - [Generador de Tintes de Color](https://elysiatools.com/es/tools/color-tint): Genere variaciones más claras de un color agregando blanco, creando tintes brillantes y aéreos para estéticas de diseño frescas ## Ejemplos - [Ejemplos de Códigos de Color](https://elysiatools.com/es/samples/color-code): Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato ## Contenido relacionado - [Herramientas para sistemas de color accesibles](https://elysiatools.com/es/hubs/color-design-tools): Crea un sistema de color reutilizable transformando colores, generando armonías, comprobando contraste y visión cromática, y documentando tokens. - [Flujo de sistema de color y efectos CSS](https://elysiatools.com/es/hubs/design-generate): Extrae una paleta, construye relaciones accesibles, genera tokens y aplica efectos CSS coherentes en estados reales de interfaz.