document.getElementById('aestheticForm').addEventListener('submit', function(e) {

e.preventDefault();

const colorHex = document.getElementById('colorHex').value;

const brightness = parseInt(document.getElementById('brightness').value);

const saturation = parseInt(document.getElementById('saturation').value);

// Convertir hex a RGB

const r = parseInt(colorHex.slice(1, 3), 16);

const g = parseInt(colorHex.slice(3, 5), 16);

const b = parseInt(colorHex.slice(5, 7), 16);

// Aplicar brillo y saturación

const newR = Math.min(255, Math.max(0, r + (brightness / 100) * 255));

const newG = Math.min(255, Math.max(0, g + (brightness / 100) * 255));

const newB = Math.min(255, Math.max(0, b + (brightness / 100) * 255));

const avgLuminance = (newR + newG + newB) / 3;

const satMult = 1 + (saturation / 100);

const satR = avgLuminance + (newR - avgLuminance) * satMult;

const satG = avgLuminance + (newG - avgLuminance) * satMult;

const satB = avgLuminance + (newB - avgLuminance) * satMult;

// Convertir de vuelta a hex

const resultHex = '#' +

Math.round(Math.min(255, Math.max(0, satR))).toString(16).padStart(2, '0') +

Math.round(Math.min(255, Math.max(0, satG))).toString(16).padStart(2, '0') +

Math.round(Math.min(255, Math.max(0, satB))).toString(16).padStart(2, '0');

document.getElementById('resultText').textContent = `Color resultante: ${resultHex}`;

document.getElementById('result').classList.remove('d-none');

});

2. Guía de uso

Cómo usar la Calculadora Aesthetic

Paso 1: Ingresar el color hexadecimal

En el primer campo, introduce el código de color hexadecimal que deseas modificar. Este código debe comenzar con un "#" seguido de 6 caracteres alfanuméricos (0-9 y A-F). Por ejemplo: #FF00FF para un magenta brillante.

Paso 2: Ajustar el brillo

En el segundo campo, ingresa un valor entre -100 y 100 para ajustar el brillo del color. Un valor positivo hará el color más claro, mientras que uno negativo lo oscurecerá. Por ejemplo, 50 aumentará significativamente el brillo, mientras que -30 lo reducirá moderadamente.

Paso 3: Modificar la saturación

En el tercer campo, introduce un valor entre -100 y 100 para cambiar la saturación del color. Un valor positivo intensificará el color, mientras que uno negativo lo desaturará hacia un tono más grisáceo. Por ejemplo, 80 hará el color mucho más vibrante, mientras que -60 lo suavizará considerablemente.

Paso 4: Calcular el resultado

Una vez ingresados todos los valores, haz clic en el botón "Calcular". La calculadora procesará la información y mostrará el nuevo código de color hexadecimal resultante.

Interpretación de los resultados

El resultado se mostrará en formato hexadecimal, que puedes usar directamente en diseño web, edición de imágenes o cualquier otra aplicación que acepte códigos de color hex. Por ejemplo, si el resultado es #A3C4D5, este será el nuevo color aesthetic calculado basado en tus inputs.

Ejemplos prácticos

1. Para aclarar un azul oscuro (#000080) y hacerlo más vibrante:
   • Color Hex: #000080
   • Brillo: 30
   • Saturación: 50
   • Resultado posible: #0000FF (un azul más claro y vibrante)
2. Para suavizar un rojo intenso (#FF0000):
   • Color Hex: #FF0000
   • Brillo: 20
   • Saturación: -30
   • Resultado posible: #FF9999 (un rosa suave)

Limitaciones y consideraciones

Ten en cuenta que los valores extremos de brillo o saturación pueden resultar en colores que se salgan del espectro visible o se conviertan en blanco o negro. La calculadora ajustará automáticamente estos casos para mantenerse dentro del rango de colores válidos. Además, la percepción del color puede variar según el dispositivo y la pantalla utilizados.

3. Artículo informativo

La Estética del Color: Explorando la Calculadora Aesthetic

En el mundo del diseño y la creatividad digital, la elección y manipulación del color juega un papel fundamental. La calculadora aesthetic surge como una herramienta innovadora que permite a diseñadores, artistas y entusiastas del color explorar y crear paletas de colores únicas y armoniosas. Este artículo profundizará en el concepto de la estética del color, la importancia de la calculadora aesthetic y cómo puede revolucionar tu enfoque en el diseño visual.

¿Qué es la Estética del Color?

La estética del color se refiere a la percepción y apreciación de los colores y sus combinaciones desde un punto de vista artístico y emocional. Va más allá de la simple teoría del color, abarcando cómo los colores nos hacen sentir, cómo interactúan entre sí y cómo pueden utilizarse para crear ambientes, transmitir mensajes y evocar emociones específicas.

En el contexto digital, la estética del color ha cobrado una importancia sin precedentes. Con la proliferación de contenido visual en redes sociales, diseño web y marketing digital, la capacidad de crear esquemas de color atractivos y