# Aclarar/Oscurecer Color Ajusta el brillo de los colores y crea variaciones > Página canónica: https://elysiatools.com/es/tools/color-lighten-darken - **Categoría:** Design - **Palabras clave:** color, aclarar, oscurecer, brillo, ajustar, tono, sombra, ajuste de color, luminancia ## Descripción general Esta herramienta permite ajustar con precisión el brillo de cualquier color, facilitando la creación de paletas consistentes, sombras suaves o resaltes brillantes para tus proyectos de diseño. ## Entradas - **Color Base** (color) - **Tipo de Ajuste** (select) - **Cantidad de Ajuste (%)** (range): Cantidad de ajuste para el brillo del color (-100% a +100%) - **Pasos del Gradiente** (number): Solo se aplica cuando "Gradiente (rango completo)" está seleccionado. Controla cuántos colores generar en la secuencia del gradiente (2-20 pasos) - **Incluir Colores Complementarios** (checkbox) - **Preservar Saturación Relativa** (checkbox) ## Cuándo usarlo - Cuando necesitas generar variantes de un color corporativo para estados de botones o elementos de interfaz. - Al crear una paleta de colores completa a partir de un solo tono base para mantener la armonía visual. - Para ajustar la legibilidad de un texto sobre un fondo modificando ligeramente su luminosidad. ## Cómo funciona - Selecciona tu color base utilizando el selector de color o ingresando el código hexadecimal. - Elige el tipo de ajuste deseado: aclarar, oscurecer, generar un gradiente o aplicar una configuración personalizada. - Define el porcentaje de ajuste o el número de pasos si optas por crear una escala de gradiente. - Obtén instantáneamente los nuevos códigos de color listos para copiar y usar en tu código CSS o herramientas de diseño. ## Casos de uso - Diseño de sistemas de diseño (Design Systems) para definir estados 'hover' y 'active' de botones. - Creación de esquemas de colores para gráficos y visualización de datos que requieren jerarquía visual. - Desarrollo web para generar sombras suaves o fondos sutiles basados en el color principal de la marca. ## Preguntas frecuentes ### ¿Puedo generar múltiples variaciones a la vez? Sí, seleccionando la opción 'Gradiente' puedes definir el número de pasos para obtener una escala completa de tonos. ### ¿Qué hace la opción 'Preservar Saturación Relativa'? Mantiene la intensidad del color original mientras ajusta únicamente su luminosidad, evitando que el color se vuelva grisáceo al aclararlo. ### ¿Es posible obtener colores complementarios? Sí, activando la casilla 'Incluir Colores Complementarios' la herramienta generará automáticamente el tono opuesto en el círculo cromático. ### ¿Qué rango de ajuste puedo aplicar? Puedes ajustar el brillo desde -100% (negro total) hasta +100% (blanco total) con incrementos precisos. ### ¿En qué formato se entregan los resultados? Los resultados se presentan en formato HTML/CSS, mostrando los códigos hexadecimales listos para implementar. ## Herramientas relacionadas - [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 - [Desplazador de Matiz de Color](https://elysiatools.com/es/tools/color-hue-shifter): Desplaza matices de colores y crea variaciones con controles de rotación horaria/antihoraria - [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 - [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 - [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 - [Generador de Colores Neón](https://elysiatools.com/es/tools/neon-colors): Genere colores neón vibrantes y brillantes con alta saturación y brillo, creando efectos de luz eléctrica llamativos perfectos para pantallas digitales y diseño moderno - [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 ## 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.