Aclarador/Oscurecedor de color

• Aclarar y oscurecer instantáneos: el aclarador y oscurecedor de color actualiza la vista previa y todos los valores de salida en tiempo real a medida que arrastra el control deslizante. No es necesario presionar ningún botón: ajuste desde -100 % (completamente oscurecido) a +100 % (completamente iluminado) y vea el resultado al instante con muestras de color en vivo.
• Escala de luminosidad interactiva: vea una escala de luminosidad completa de 7 pasos debajo de los controles principales que muestra el color con ajustes de luminosidad de -50%, -25%, -10%, original, +10%, +25% y +50%. Haga clic en cualquier botón preestablecido para saltar directamente a ese nivel de ajuste y explorar rápidamente el color.
• 100% privado: sin carga: todo el procesamiento se realiza localmente en su navegador mediante JavaScript. Sus valores de color nunca salen de su dispositivo y nunca se envían a ningún servidor: completamente seguro para proyectos de clientes y sistemas de diseño propietarios.
• Gratis y sin límites: aclara y oscurece colores ilimitados sin registro, suscripción ni límites de uso. Color Lightener / Darkener es completamente gratuito para siempre y no hay anuncios que bloqueen la interfaz.

• Estados de interacción y desplazamiento de CSS: los desarrolladores de frontend utilizan Color Lightener / Darkener para generar estados de desplazamiento, actividad y enfoque para los elementos de la interfaz de usuario. Al aclarar u oscurecer el color base en un porcentaje constante, garantizan una retroalimentación interactiva uniforme en botones, enlaces y tarjetas sin tener que adivinar manualmente los valores de color.
• Adaptación del color del modo oscuro: los diseñadores y desarrolladores utilizan el aclarador/oscurecedor de color para adaptar las paletas de colores del modo claro al modo oscuro. Al oscurecer sistemáticamente los colores de la interfaz manteniendo el tono y la saturación, crean temas oscuros cohesivos que preservan la identidad de la marca y garantizan la legibilidad.
• Accesibilidad y optimización del contraste: los especialistas en accesibilidad utilizan el aclarador/oscurecedor de color para encontrar variantes de color accesibles que cumplan con los requisitos de contraste de las WCAG. Al aclarar u oscurecer gradualmente un color manteniendo el tono intacto, pueden descubrir el ajuste mínimo necesario para superar las relaciones de contraste AA o AAA.
• Paleta de colores y creación de tintes/sombras: los diseñadores utilizan el aclarador/oscurecedor de colores para generar escalas de colores para los sistemas de diseño. Al crear pasos de luminosidad consistentes a partir de un color base, crean paletas de tintes y sombras cohesivas que mantienen la coherencia de la marca en todos los elementos de la interfaz de usuario, desde los fondos hasta el texto.
• Variantes de componentes de la interfaz de usuario: los diseñadores de productos utilizan el aclarador/oscurecedor de color para crear múltiples variantes visuales de los componentes de la interfaz de usuario. Desde estados sutiles de desplazamiento hasta botones prominentes de llamada a la acción, la herramienta ayuda a generar una gama completa de variantes de color a partir de un único color base con ajustes de luminosidad predecibles y consistentes.
• Generación de tokens del sistema de diseño: los mantenedores del sistema de diseño utilizan el aclarador/oscurecedor de color para generar tokens de color con valores de luminosidad predecibles. Al ajustar los colores en el espacio HSL, crean tokens como --color-primary-50 hasta --color-primary-900 con pasos de percepción consistentes.

El aclaramiento y el oscurecimiento del color son técnicas que ajustan el brillo percibido de un color preservando al mismo tiempo su tono y saturación tanto como sea posible. Cuando aclaras un color, el valor de luminosidad aumenta hasta el 100% (blanco), creando un tinte. Cuando oscureces un color, la luminosidad disminuye hacia el 0% (negro), creando una sombra. Nuestro Aclarador/Oscurecedor de Color realiza estos ajustes en el espacio de color HSL, lo que garantiza resultados de apariencia natural que mantienen el carácter del color original.

1. Ingrese un color base: escriba un valor de color HEX o use el selector de color nativo para seleccionar cualquier color. La herramienta lo convierte instantáneamente al formato HSL (Tono, Saturación, Luminosidad), que separa el color en canales independientes para una manipulación precisa.
2. Ajustar el control deslizante de luminosidad: arrastre el control deslizante hacia la izquierda para oscurecer (porcentaje negativo) o hacia la derecha para aclarar (porcentaje positivo). La pista de degradado muestra el rango completo, desde oscurecido hasta iluminado. Haga clic en cualquier botón preestablecido (-50%, -25%, etc.) para saltos rápidos. La vista previa del color ajustado se actualiza en tiempo real junto con el original para comparar.
3. Explore la escala y copie: La escala de luminosidad de 7 pasos a continuación muestra cómo se ve el color en diferentes niveles de ajuste. Haga clic en cualquier paso para saltar instantáneamente a ese nivel. Utilice el botón Copiar junto a cualquier formato para copiar valores individuales, o copie todos los formatos a la vez con el botón "Copiar todos los valores".

• Aclaramiento (tintes): Cuando aclaras un color, el valor de luminosidad aumenta proporcionalmente hacia el 100% (blanco puro). Un ajuste de +50% en un color con un 50% de luminosidad lo moverá el 50% de la distancia restante al 100%, lo que dará como resultado un 75% de luminosidad. Esto crea tintes similares a pasteles que preservan el tono y la saturación originales.
• Oscurecimiento (sombras): Cuando oscureces un color, el valor de luminosidad disminuye proporcionalmente hacia el 0% (negro puro). Un ajuste de -50 % en un color con un 50 % de luminosidad lo moverá un 50 % de la distancia hacia el 0 %, lo que dará como resultado un 25 % de luminosidad. Esto crea tonos más profundos que conservan el carácter original.
• Preservación de tono y saturación: a diferencia de la combinación RGB simple (mezclar con blanco o negro), los ajustes basados ​​en HSL mantienen los valores de tono y saturación sin cambios. Esto significa que el color se mantiene fiel a su carácter original mientras que solo cambia el brillo, lo que da como resultado variaciones de color más limpias y predecibles.
• El rango de -100% a +100%: el control deslizante abarca desde -100% (completamente oscurecido a negro) hasta 0% (color original) y +100% (completamente aclarado a blanco). En los extremos, el color se vuelve negro puro o blanco puro, pero en valores intermedios el tono y la saturación originales permanecen visibles.

La iluminación (ajustar la luminosidad en HSL) es diferente de ajustar el brillo (V en HSV/HSB). La luminosidad en HSL abarca desde el negro (0%) hasta el color puro (50%) y el blanco (100%), mientras que el brillo en HSV abarca desde el negro hasta el color puro únicamente. Esto significa que los ajustes de luminosidad de HSL producen matices y sombras de apariencia más natural que coinciden con la forma en que los diseñadores piensan sobre el color.

La saturación es una propiedad separada que controla la intensidad del color. Al aclarar u oscurecer, la saturación permanece constante para mantener la vitalidad del color. Si necesita ajustar la luminosidad y la saturación juntas, utilice nuestra herramienta Saturador/Desaturador de color. Para muchos flujos de trabajo de diseño, ajustar la luminosidad por sí solo es suficiente para crear las variantes de color necesarias para los componentes de la interfaz de usuario, los estados de desplazamiento y los tokens del sistema de diseño.