Chromaverse
Descrição
O Chromaverse é um aplicativo da Web sofisticado que permite aos usuários gerar e comparar paletas de cores com base em valores hexadecimais, entradas aleatórias ou descrições baseadas em humor. Os usuários podem gerar várias paletas, visualizar detalhes de cores individuais, baixar as paletas e compará-las em uma visão lado a lado. O design é elegante e profissional, com efeitos de pairar, visualizações de cores e recursos avançados de download para paletas de cores e gradientes.
Características
- Entrada hexadecimal múltipla : os usuários podem inserir vários valores hexadecimais separados por vírgulas para gerar amostras de cores individuais e um gradiente.
- Detecção automática de cores : insira qualquer descrição do texto ou humor, e o sistema tentará extrair valores hexáticos relevantes ou gerar cores com base na entrada.
- Exibição da cor do círculo : Cada cor gerada é exibida em uma amostra circular para uma melhor visualização.
- Geração de gradiente : um gradiente de todas as cores geradas é fornecido automaticamente.
- Download de cores : faça o download de toda a paleta ou o gradiente gerado como uma imagem PNG.
- Exibição de valor hexadecimal : Exiba os valores HEX individuais para cada cor da paleta, com um botão "cópia" para copiar facilmente o código hexadecimal.
- Efeitos do mouse : os efeitos do pau aprimorado fazem com que as cores individuais apareçam quando mirados, melhorando a experiência do usuário.
- Seletor de cores : uma ferramenta de coloração está disponível, permitindo que os usuários selecionem manualmente as cores e exibam seus valores hexadecimais em tempo real.
- Múltiplas paletas : gerar várias paletas em sucessão. Cada paleta tem a opção de excluí -la, com uma mensagem de alerta para confirmação.
- Compare paletas : adicione paletas a uma "lista de comparação" para comparar visualmente diferentes combinações de cores em uma visão lado a lado.
- Remova e limpe todas as paletas : os usuários podem remover paletas individuais da lista de comparação ou limpar todas as paletas com uma confirmação de alerta antes da limpeza.
- Baixe a lista de comparação : baixe todas as paletas na lista de comparação como uma única imagem PNG.
- Estilo profissional : design avançado de interface do usuário com técnicas modernas de CSS, como glassmorfismo, transições suaves e design responsivo, garante que o aplicativo pareça polido e profissional.
Como usar
- Digite os valores Hex : No campo de entrada, você pode inserir um ou mais valores Hex separados por vírgulas. Opcionalmente, insira descrições ou humor de texto e o sistema detectará automaticamente e gerará cores para você.
- Gere a paleta : clique no botão "Gereate" para gerar uma paleta de cores. As cores são exibidas como amostras circulares e um gradiente de todas as cores também é mostrado.
- Passe o mouse sobre as cores : mova o mouse sobre as cores individuais para ver visualizações aprimoradas e visualizar os respectivos códigos hexadecimais.
- Download Opções : use os botões fornecidos para baixar a paleta de cores gerada ou o gradiente como um arquivo PNG.
- Copie os valores hexadecimais : copie códigos hexáticos individuais usando o botão "copiar" ao lado de cada cor.
- Adicionar à lista de comparação : clique em "Adicionar à lista de comparação" para mover a paleta gerada para uma seção de comparação.
- Compare e exclua paletas : veja e compare várias paletas, remova paletas individuais ou limpe tudo com um alerta de confirmação.
- Faça o download da lista de comparação : Depois de comparar paletas, faça o download de todos como uma única imagem PNG para referência futura.
Instruções de instalação
Clone o repositório :
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
Open index.html em seu navegador:
Estrutura de arquivo
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
Visão geral do código
Html
- O HTML fornece a estrutura para o campo de entrada, botões, exibição colorida, lista de comparação e opções de download.
- Ele usa elementos
<input> , <button> , <div> e <canvas> para estruturar a interface do usuário e interagir com JavaScript para funcionalidade.
CSS
- O CSS inclui estilos avançados para efeitos de pairar, glassmorfismo, suporte ao modo escuro, design responsivo e outros elementos modernos da interface do usuário.
- As cores são controladas usando variáveis CSS, facilitando a alternância entre os modos claros e escuros.
JavaScript
- O JavaScript é usado para gerar paletas de cores a partir de entrada do usuário, manipular a extração de valor hexadecimal, gerenciar a lista de comparação, ativar o download de imagens e adicionar interatividade como efeitos e alertas do mouse.
- O código aproveita a tela para renderizar imagens para API de download e quadro de transferência para copiar valores hexadecimais.
Tecnologias usadas
- Html5 : fornece a estrutura para o aplicativo.
- CSS3 : Responsável pelo design responsivo, efeitos de pairar e pelo moderno estilo Glassmórfico.
- JavaScript : lida com a lógica para gerar paletas, extrair cores, baixar imagens e interatividade.
- API de tela : usado para gerar imagens PNG para download de paletas de cores e gradientes.
Licença
Este projeto está licenciado sob a licença do MIT. Consulte o arquivo de licença para obter detalhes.
