https://github.com/ninja1375/gerador-de-cores-exadecimais

Gerador de Cores Exadecimais
https://github.com/ninja1375/gerador-de-cores-exadecimais

css html javascript

Last synced: 2 months ago
JSON representation

Gerador de Cores Exadecimais

Host: GitHub
URL: https://github.com/ninja1375/gerador-de-cores-exadecimais
Owner: Ninja1375
Created: 2024-11-24T02:02:32.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-11-24T22:11:56.000Z (6 months ago)
Last Synced: 2025-03-20T05:47:32.801Z (2 months ago)
Topics: css, html, javascript
Language: JavaScript
Homepage: https://ninja1375.github.io/Gerador-de-cores-exadecimais/
Size: 14.6 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

**Veja o projeto ao vivo:**

**[Gerador de Cores Exadecimais ](https://ninja1375.github.io/Gerador-de-cores-exadecimais/)**

Este é um **gerador de paleta de cores** simples, criado com HTML, CSS e JavaScript, que permite ao usuário visualizar uma seleção solicitada de cores com seus respectivos códigos hexadecimais. A interface é interativa e permite copiar o código hexadecimal de qualquer cor com um simples clique.

# Funcionalidades:

**Gerar Paleta de Cores Aleatórias:**

Ao acessar a página ou clicar no botão "Gerar Cores", uma nova paleta de 14 núcleos levantadas é exibida na tela. Os núcleos são gerados de forma dinâmica utilizando JavaScript, com a função `getRandomColor()` para criar códigos hexadecimais aleatórios.

**Exposição de Cores:**

Cada cor é apresentada em uma caixa colorida, com seu código hexadecimal correspondente localizado no centro da caixa. As caixas são organizadas de forma responsiva para serem ajustadas a diferentes tamanhos de tela.

**Copiar Código Hexadecimal:**

Ao clicar em qualquer caixa de cor, o código hexadecimal correspondente é copiado automaticamente para a área de transferência do usuário. Após copiar o código, um alerta é exibido confirmando a cópia do código.

## Interface Responsiva:

A paleta de cores é responsiva, ou seja, adapta-se automaticamente ao tamanho da tela, seja em dispositivos móveis ou desktops, garantindo uma boa experiência de usuário.

**Estilo Moderno e Interativo:**

O design utiliza um estilo simples e moderno, com caixas de cor que aumentam de tamanho quando o usuário passa o mouse sobre elas, criando um efeito visual interessante e interativo.

## Uso da API da área de transferência:

A funcionalidade de cópia automática usa a API Clipboard, permitindo que o código hexadecimal seja copiado sem a necessidade de seleção manual.

## Objetivo do Projeto:

Este projeto foi desenvolvido para fornecer uma forma simples e visual de trabalho com núcleos em desenvolvimento web. Ele é útil para designers, desenvolvedores web ou qualquer pessoa que precise de uma paleta de cores rapidamente para testes ou criação de interfaces.

Além disso, é um exemplo de como usar HTML , CSS e JavaScript de forma eficiente para criar um aplicativo web interativo e funcional com foco na experiência do usuário.

## Tecnologias Utilizadas: