Introdução
Neste tutorial, você aprenderá a criar um Gerador de Paleta de Cores simples e funcional usando apenas HTML, CSS e JavaScript. Ao clicar em um botão, o projeto gera caixas de cores aleatórias, exibindo o código hexadecimal de cada cor. Além disso, é possível copiar o código da cor com um clique.
Resultado Final
Você terá um gerador que se parece com isso:
- Um botão para gerar cores.
- Caixas de cores aleatórias com seus respectivos códigos.
- Função para copiar o código da cor ao clicar.
Veja o projeto em funcionamento neste link. Gerador de Paleta de Cores Exadecimais.
Estrutura do Projeto
1. HTML: Estrutura Básica
O arquivo index.html cria a estrutura inicial do projeto.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de Cores</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Gerador de Paleta de Cores</h1>
<button onclick="generateColors()">Gerar Cores</button>
<div class="palette" id="palette"></div>
<script src="script.js"></script>
</body>
</html>
Explicação:
- O botão chama a função
generateColors()ao ser clicado.
- O elemento
<div class="palette" id="palette">será usado para exibir as caixas de cores.
2. CSS: Estilizando o Projeto
O arquivo style.css define o layout e o design visual.
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
h1 {
color: #0E2959;
}
.palette {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px auto;
max-width: 1200px;
}
.color-box {
width: 120px;
height: 120px;
margin: 10px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: transform 0.2s;
}
.color-box:hover {
transform: scale(1.1);
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 20px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
Explicação:
body: Define o estilo geral da página.
.palette: Alinha as caixas de cores em um layout flexível.
.color-box: Estiliza cada caixa de cor.
button: Estiliza o botão de gerar cores.
3. JavaScript: Gerando Cores Aleatórias
O arquivo script.js adiciona a funcionalidade principal do projeto.
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function generateColors() {
const palette = document.getElementById('palette');
palette.innerHTML = ''; // Limpar paleta anterior
for (let i = 0; i < 14; i++) {
const color = getRandomColor();
const colorBox = document.createElement('div');
colorBox.className = 'color-box';
colorBox.style.backgroundColor = color;
colorBox.textContent = color;
// Copiar automaticamente ao clicar
colorBox.onclick = () => {
navigator.clipboard.writeText(color).then(() => {
alert(`Cor ${color} copiada para a área de transferência!`);
}).catch(() => {
alert('Erro ao copiar a cor!');
});
};
palette.appendChild(colorBox);
}
}
// Gerar cores ao carregar a página
generateColors();
Explicação:
getRandomColor(): Gera um código hexadecimal de cor aleatório.
generateColors(): Cria 14 caixas de cores e insere no elemento#palette.
- Função de clique: Copia o código da cor para a área de transferência.
Como Personalizar
- Número de caixas: Altere o valor
14na funçãogenerateColorspara mudar a quantidade de cores geradas.
- Tamanho das caixas: Modifique as propriedades
widtheheightem.color-boxno CSS.
- Alerta de cópia: Personalize a mensagem exibida após copiar a cor.
Se preferir, os códigos estão no meu Repositório no GitHub.
Conclusão
Com este tutorial, você aprendeu a criar um Gerador de Paleta de Cores interativo e responsivo. Experimente e personalize o projeto conforme suas necessidades.
Comentários
Postar um comentário
Obrigado pelo seu feedback!