Cores e Teoria das Cores

01. O que são cores?

📌 Definição

🌐 Cores em um site

Um site pode utilizar cores para criar uma identidade visual e estabelecer uma comunicação visual com o usuário.

• Cor de fundo da página.
• Cor dos textos.
• Cor dos títulos.
• Cor dos botões.
• Cor dos links.
• Cor das bordas.
• Cor dos menus.
• Cor dos ícones.
• Cor de destaque.
• Cor de mensagens de erro.
• Cor de mensagens de sucesso.
• Cor de avisos.

02. O que é Teoria das Cores?

No desenvolvimento de interfaces, conhecer esses conceitos ajuda o desenvolvedor a escolher combinações mais equilibradas.

🎨 Alguns conceitos importantes

• Cores primárias.
• Cores secundárias.
• Cores terciárias.
• Cores complementares.
• Cores análogas.
• Cores monocromáticas.
• Cores quentes.
• Cores frias.
• Cores neutras.
• Contraste.
• Saturação.
• Luminosidade.

03. Cores Primárias

🎨 Modelo tradicional

No modelo tradicional de pigmentos, são normalmente apresentadas como:

• 🔴 Vermelho
• 🟡 Amarelo
• 🔵 Azul

04. Cores Secundárias

05. Cores Terciárias

Elas permitem criar uma quantidade maior de possibilidades para construir paletas de cores.

06. Cores Quentes e Cores Frias

🔥 Cores quentes

Exemplos:

• 🔴 Vermelho
• 🟠 Laranja
• 🟡 Amarelo

❄️ Cores frias

Exemplos:

• 🔵 Azul
• 🟢 Verde
• 🟣 Roxo

07. Percepção e Significado das Cores

08. Cores Complementares

🎯 Quando utilizar?

Combinações complementares podem criar bastante contraste e são úteis para destacar determinados elementos.

09. Cores Análogas

Esse tipo de combinação costuma criar uma aparência mais harmoniosa e suave.

10. Paleta Monocromática

11. RGB — Red, Green e Blue

💻 Exemplo

rgb(255, 0, 0)

Nesse exemplo, o vermelho possui intensidade máxima, enquanto verde e azul estão em zero.

12. HEX — Código Hexadecimal

💻 Estrutura

#RRGGBB

Os dois primeiros caracteres representam o vermelho, os dois seguintes representam o verde e os dois últimos representam o azul.

#FF0000 → Vermelho

#00FF00 → Verde

#0000FF → Azul

#000000 → Preto

#FFFFFF → Branco

🎯 Exemplo no CSS

body {
  background-color: #f5f5f5;
}

h1 {
  color: #0b4ea2;
}

button {
  background-color: #0b4ea2;
}

13. RGBA e Transparência

💻 Sintaxe

rgba(vermelho, verde, azul, alpha)

📌 Exemplo

background-color: rgba(0, 0, 0, 0.5);

Nesse caso, a cor preta possui 50% de opacidade.

14. HSL — Matiz, Saturação e Luminosidade

💻 Sintaxe

hsl(hue, saturation, lightness)

📌 Os três componentes

• Hue: representa a tonalidade.
• Saturation: representa a intensidade da cor.
• Lightness: representa a luminosidade.

hsl(210, 80%, 45%)

O HSL pode ser bastante útil para criar diferentes variações de uma mesma cor.

15. Aplicando Cores com CSS

🎨 color

Define a cor do texto.

p {
  color: #333333;
}

🎨 background-color

Define a cor de fundo.

body {
  background-color: #ffffff;
}

🎨 border-color

Define a cor da borda.

div {
  border-color: #0b4ea2;
}

🎯 Exemplo completo

.card {
  background-color: #ffffff;
  color: #333333;
  border: 2px solid #0b4ea2;
}

16. Como Criar uma Paleta de Cores para um Site

🎨 Uma estrutura simples

1. Escolha uma cor principal.
2. Escolha uma cor secundária.
3. Escolha uma cor de destaque.
4. Defina cores para textos.
5. Defina cores para fundos.
6. Defina cores para bordas.
7. Defina cores para estados de interface.

💻 Exemplo de paleta

Cor principal:
#0B4EA2

Cor secundária:
#1565C0

Cor de destaque:
#FFC107

Texto principal:
#333333

Texto secundário:
#666666

Fundo:
#F5F5F5

Branco:
#FFFFFF

Sucesso:
#198754

Erro:
#DC3545

Aviso:
#FFC107

17. Criando um Sistema de Cores com Variáveis CSS

💻 Exemplo

:root {
  --cor-principal: #0b4ea2;
  --cor-secundaria: #1565c0;
  --cor-destaque: #ffc107;
  --cor-texto: #333333;
  --cor-fundo: #f5f5f5;
  --cor-branco: #ffffff;
}

🎯 Utilizando as variáveis

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

h1 {
  color: var(--cor-principal);
}

button {
  background-color: var(--cor-principal);
  color: var(--cor-branco);
}

18. Contraste entre Texto e Fundo

Um bom contraste facilita a leitura e melhora a acessibilidade da interface.

❌ Exemplo de problema

Texto cinza claro
sobre fundo branco

A diferença entre as duas cores pode ser pequena, dificultando a leitura.

✅ Exemplo melhor

Texto #333333
sobre fundo #FFFFFF

19. Cores e Acessibilidade

♿ Cuidados importantes

• Utilize contraste adequado.
• Não dependa somente da cor para transmitir uma informação.
• Utilize textos e ícones quando necessário.
• Teste diferentes combinações.
• Evite textos muito claros sobre fundos claros.
• Evite textos muito escuros sobre fundos extremamente escuros.

❌ Exemplo inadequado

Erro = somente vermelho
Sucesso = somente verde

✅ Exemplo melhor

❌ Erro: senha incorreta

✅ Sucesso: cadastro realizado

⚠️ Atenção: campo obrigatório

20. Cores em Componentes de Interface

🔘 Botões

.btn {
  background-color: #0b4ea2;
  color: #ffffff;
}

🔗 Links

a {
  color: #0b4ea2;
}

❌ Erros

.erro {
  color: #dc3545;
}

✅ Sucesso

.sucesso {
  color: #198754;
}

⚠️ Avisos

.aviso {
  color: #856404;
  background-color: #fff3cd;
}

21. Gradientes

➡️ Linear Gradient

background: linear-gradient(
  90deg,
  #0b4ea2,
  #1565c0
);

⭕ Radial Gradient

background: radial-gradient(
  circle,
  #0b4ea2,
  #001f4d
);

22. Cores em Sombras

🌑 box-shadow

.card {
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.15);
}

✏️ text-shadow

h1 {
  text-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.2);
}

23. Cores em Tema Claro e Tema Escuro

☀️ Tema claro

:root {
  --fundo: #ffffff;
  --texto: #333333;
}

🌙 Tema escuro

.escuro {
  --fundo: #121212;
  --texto: #f5f5f5;
}

Os componentes podem utilizar as mesmas variáveis.

body {
  background-color: var(--fundo);
  color: var(--texto);
}

24. Cores e Identidade Visual

Entre esses elementos estão:

• Logo.
• Cores.
• Tipografia.
• Ícones.
• Imagens.
• Elementos gráficos.

25. Regra 60-30-10

• 60%: cor dominante.
• 30%: cor secundária.
• 10%: cor de destaque.

60% → branco ou cinza claro

30% → azul

10% → amarelo ou outra cor de destaque

26. Erros Comuns ao Escolher Cores

27. Organizando as Cores do Projeto

💻 Exemplo

:root {

  /* Cores principais */
  --cor-primaria: #0b4ea2;
  --cor-secundaria: #1565c0;

  /* Destaques */
  --cor-destaque: #ffc107;

  /* Textos */
  --cor-texto: #333333;
  --cor-texto-secundario: #666666;

  /* Fundos */
  --cor-fundo: #f5f5f5;
  --cor-superficie: #ffffff;

  /* Estados */
  --cor-sucesso: #198754;
  --cor-erro: #dc3545;
  --cor-aviso: #ffc107;
}

28. Exemplo Completo — Site com Sistema de Cores

📄 HTML

<section class="card">

  <h2>Meu Projeto</h2>

  <p>
    Este é um exemplo de cartão utilizando
    um sistema de cores.
  </p>

  <a href="#" class="btn">
    Conhecer projeto
  </a>

</section>

🎨 CSS

:root {
  --primaria: #0b4ea2;
  --destaque: #ffc107;
  --texto: #333333;
  --fundo: #f5f5f5;
  --branco: #ffffff;
}

body {
  background-color: var(--fundo);
  color: var(--texto);
}

.card {
  background-color: var(--branco);
  padding: 30px;
  border-radius: 12px;
}

.card h2 {
  color: var(--primaria);
}

.btn {
  display: inline-block;
  background-color: var(--primaria);
  color: var(--branco);
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--destaque);
  color: var(--texto);
}

29. Ferramentas para Trabalhar com Cores

🎨 Color Picker

O seletor de cores presente em ferramentas de desenvolvimento permite visualizar e alterar cores rapidamente.

🛠️ DevTools

O navegador permite testar cores diretamente no código CSS através das ferramentas de desenvolvedor.

♿ Ferramentas de contraste

Ferramentas de contraste permitem verificar se uma combinação de texto e fundo possui uma diferença visual adequada.

30. Alterando Cores com o DevTools

📝 Passo a passo

1. Abra uma página no navegador.
2. Clique com o botão direito sobre um elemento.
3. Escolha Inspecionar.
4. Localize as regras CSS.
5. Encontre propriedades como color ou background-color.
6. Clique no valor da cor.
7. Experimente outras cores.
8. Observe o resultado diretamente na página.

31. Passo a Passo para Criar as Cores de um Site

1️⃣ Defina o objetivo do site

É um site institucional? Loja? Portfólio? Sistema escolar? Sistema financeiro? Blog?

2️⃣ Conheça o público

A escolha visual deve considerar quem utilizará o sistema.

3️⃣ Escolha uma cor principal

Essa será uma das cores mais importantes da identidade visual.

4️⃣ Escolha uma cor secundária

Utilize uma cor que combine com a principal.

5️⃣ Escolha uma cor de destaque

Utilize essa cor para chamar atenção para determinadas ações.

6️⃣ Defina as cores neutras

Escolha cores para fundos, textos, bordas e áreas secundárias.

7️⃣ Defina estados

• Sucesso.
• Erro.
• Aviso.
• Informação.

8️⃣ Verifique o contraste

Confirme se os textos continuam fáceis de ler.

9️⃣ Crie as variáveis CSS

:root {
  --primaria: #0b4ea2;
  --secundaria: #1565c0;
  --destaque: #ffc107;
  --texto: #333333;
  --fundo: #f5f5f5;
  --branco: #ffffff;
}

🔟 Utilize as cores de forma consistente

Depois de definir a paleta, mantenha o padrão em todo o projeto.

32. Checklist — Meu Projeto está com as Cores Organizadas?

• Tenho uma cor principal definida.
• Tenho uma cor secundária definida.
• Tenho uma cor de destaque.
• Defini uma cor para textos.
• Defini uma cor para o fundo.
• Defini cores para mensagens de sucesso e erro.
• Verifiquei o contraste.
• Não estou utilizando cores aleatórias.
• Utilizei variáveis CSS.
• Mantive as cores consistentes em todo o projeto.

🧪 Atividade Prática

📝 Você deverá definir:

1. Nome do projeto.
2. Objetivo do site.
3. Público-alvo.
4. Cor principal.
5. Cor secundária.
6. Cor de destaque.
7. Cor de fundo.
8. Cor dos textos.
9. Cor dos links.
10. Cor de sucesso.
11. Cor de erro.
12. Cor de aviso.

💻 Depois crie no CSS:

:root {
  --cor-principal: #________;
  --cor-secundaria: #________;
  --cor-destaque: #________;

  --cor-fundo: #________;
  --cor-texto: #________;

  --cor-sucesso: #________;
  --cor-erro: #________;
  --cor-aviso: #________;
}

🏆 Desafio Final — Crie a Identidade Visual de um Site

🎯 Etapa 1 — Definição

1. Escolha o nome do projeto.
2. Defina o objetivo.
3. Defina o público.

🎨 Etapa 2 — Paleta

1. Escolha uma cor principal.
2. Escolha uma cor secundária.
3. Escolha uma cor de destaque.
4. Escolha cores neutras.
5. Defina cores de estado.

💻 Etapa 3 — CSS

Crie as variáveis CSS.

:root {

  --cor-principal: #000000;

  --cor-secundaria: #000000;

  --cor-destaque: #000000;

  --cor-fundo: #000000;

  --cor-texto: #000000;

  --cor-sucesso: #000000;

  --cor-erro: #000000;

  --cor-aviso: #000000;

}

♿ Etapa 4 — Acessibilidade

• Verifique o contraste.
• Verifique a leitura dos textos.
• Não utilize somente cores para indicar informações.
• Teste diferentes combinações.

🧪 Etapa 5 — Teste

• Teste no computador.
• Teste no celular.
• Observe os botões.
• Observe os textos.
• Observe os links.
• Verifique os estados de erro e sucesso.

📚 Resumo da Aula