Cromado
Descripción
El Chromaverse es una aplicación web sofisticada que permite a los usuarios generar y comparar paletas de colores basadas en valores hexadecimales, entradas aleatorias o descripciones basadas en el estado de ánimo. Los usuarios pueden generar múltiples paletas, ver detalles de color individual, descargar las paletas y compararlas en una vista de lado a lado. El diseño es elegante y profesional, con efectos de desplazamiento, vistas previas de color y capacidades de descarga avanzada tanto para paletas de colores como para gradientes.
Características
- Entrada hexadecimal múltiple : los usuarios pueden ingresar múltiples valores hexadecimales separados por comas para generar muestras de color individuales y un gradiente.
- Detección automática de colores : ingrese cualquier descripción de texto o estado de ánimo, y el sistema intentará extraer valores HEX relevantes o generar colores basados en la entrada.
- Pantalla de color círculo : cada color generado se muestra en una muestra circular para una mejor visualización.
- Generación de gradiente : un gradiente de todos los colores generados se proporciona automáticamente.
- Descarga del color : descargue toda la paleta o el gradiente generado como una imagen PNG.
- Pantalla de valor hexadecimal : Muestre valores hexadecimales individuales para cada color en la paleta, con un botón "Copiar" para copiar fácilmente el código hexadecimal.
- Efectos de desplazamiento : los efectos de desplazamiento mejorados hacen que los colores individuales se desplomen cuando se desplazan, mejorando la experiencia del usuario.
- Selector de color : hay una herramienta de selección de color disponible, lo que permite a los usuarios seleccionar manualmente los colores y mostrar sus valores hexadecimales en tiempo real.
- Múltiples paletas : genere múltiples paletas sucesivas. Cada paleta tiene una opción para eliminarla, con un mensaje de alerta para la confirmación.
- Compare paletas : agregue paletas a una "lista de comparación" para comparar visualmente diferentes combinaciones de colores en una vista de lado a lado.
- Eliminar y borrar todas las paletas : los usuarios pueden eliminar paletas individuales de la lista de comparación o borrar todas las paletas con una confirmación de alerta antes de borrar.
- Descargar Lista de comparación : Descargue todas las paletas en la lista de comparación como una sola imagen PNG.
- Estilización profesional : el diseño avanzado de la interfaz de usuario con técnicas modernas de CSS como Glassmorfismo, transiciones suaves y diseño receptivo asegura que la aplicación se vea pulida y profesional.
Cómo usar
- Ingrese valores hexadecimales : en el campo de entrada, puede ingresar uno o más valores hexadecimales separados por comas. Opcionalmente, ingrese descripciones de texto o estados de ánimo, y el sistema detectará automáticamente y generará colores para usted.
- Genere la paleta : haga clic en el botón "Generar" para generar una paleta de colores. Los colores se muestran como muestras circulares, y también se muestra un gradiente de todos los colores.
- Pase los colores : mueva el mouse sobre los colores individuales para ver avances mejoradas y ver los códigos hexadecimales respectivos.
- Opciones de descarga : use los botones proporcionados para descargar la paleta de colores generada o el gradiente como un archivo PNG.
- Copiar valores hexadecimales : copie códigos hexadecimales individuales usando el botón "Copiar" junto a cada color.
- Agregue para comparar la lista : haga clic en "Agregar para comparar la lista" para mover la paleta generada a una sección de comparación.
- Comparar y eliminar paletas : Ver y comparar múltiples paletas, eliminar paletas individuales o borrar todo con una alerta de confirmación.
- Descargar Lista de comparación : Después de comparar paletas, descargarlas todas como una sola imagen PNG para referencia futura.
Instrucciones de instalación
Clon el repositorio :
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
Abra index.html en su navegador:
Estructura de archivo
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
Descripción general del código
Html
- El HTML proporciona la estructura para el campo de entrada, los botones, la pantalla de color, la lista de comparación y las opciones de descarga.
- Utiliza elementos
<input> , <button> , <div> y <canvas> para estructurar la interfaz de usuario e interactuar con JavaScript para la funcionalidad.
CSS
- El CSS incluye estilos avanzados para los efectos del flujo, el morporfismo de vidrio, el soporte del modo oscuro, el diseño receptivo y otros elementos de IU modernos.
- Los colores se controlan con variables CSS, lo que facilita el cambio entre modos de luz y oscuridad.
Javascript
- JavaScript se utiliza para generar paletas de colores a partir de la entrada del usuario, manejar la extracción de valor hexadecimal, administrar la lista de comparación, habilitar la descarga de imágenes y agregar interactividad, como efectos y alertas de desplazamiento.
- El código aprovecha el lienzo para representar imágenes para la descarga y la API del portapapeles para copiar valores hexadecimales.
Tecnologías utilizadas
- HTML5 : proporciona la estructura para la aplicación.
- CSS3 : Responsable de diseño receptivo, efectos de desplazamiento y el estilo moderno de Glassmorphic.
- JavaScript : maneja la lógica para generar paletas, extraer colores, descargar imágenes e interactividad.
- API de lona : se usa para generar imágenes PNG descargables de paletas de colores y gradientes.
Licencia
Este proyecto tiene licencia bajo la licencia MIT. Consulte el archivo de licencia para obtener más detalles.
