Unidade Curricular 4
Fundamentos da
Teoria da Cor
Guia técnico sobre como a luz interage com os objetos e como o sistema visual humano traduz frequências em comunicação visual.
Desenvolvido por Italo Roberto inspirado na 1ª versão desenvolvida pelo instrutor Gustavo Elian.
Objetivo
"Proporcionar a aquisição dos fundamentos técnicos e científicos referentes à utilização da cor na comunicação visual, considerando suas características físicas, seus aspectos técnicos e estéticos e suas influências psicológicas."
Pasta do Google Drive
Acesso aos slides e materiais complementares
O que é a Cor?
É a percepção visual da luz captada pelos nossos olhos e processada pelo cérebro.
No design, a cor não atua apenas como estética; ela tem um papel fundamental na hierarquia visual e no impacto emocional do utilizador.
A cor não existe no escuro absoluto. Ela depende de ondas eletromagnéticas.
Elementos da Existência
Luz
Estímulo Físico
Matéria
O Objeto
Visão
O Observador
Espectro Visível
Comprimentos de onda captados pelo olho humano:
Violeta e Azul
Ondas curtas e alta frequência. Vibrantes e energéticas.
Laranja e Vermelho
Ondas longas e baixa frequência. Quentes e expansivas.
Interação com a Matéria
Quando a luz atinge um objeto, três fenômenos podem ocorrer:
Absorção
O objeto retém certos comprimentos de onda.
Reflexão
A luz "bate" e volta. A cor que vemos é a luz refletida.
Transmissão
A luz atravessa o objeto (vidros, filtros).
Mecanismo da Visão
Células Fotorreceptoras
Cones
Responsáveis pela visão em cores (Vermelho, Verde, Azul).
Bastonetes
Sensíveis à luz e movimento (visão preto e branco).
"O olho capta a luz, mas é o cérebro que cria a imagem colorida."
Sistemas de Cor
RGB
Síntese Aditiva | Digital
- 🖥️ Monitores e Ecrãs
- ⚪ Soma de luzes gera o Branco
- 🧬 Baseado na biologia dos Cones
CMYK
Síntese Subtrativa | Impresso
- 🖨️ Impressão Gráfica e Tintas
- ⚫ Mistura de pigmentos gera o Preto
- 🎨 Filtro seletivo de luz
Hexadecimal
Codificação padrão para Web (#RRGGBB). Traduz valores RGB em base 16.
#0E4194
HSL (Modelo)
Linguagem humana: controla Matiz (H), Saturação (S) e Brilho (L) de forma independente.
hsl(217, 82%, 31%)
Pantone (PMS)
Cores spot para impressão. Garante fidelidade absoluta e padronização global.
Sugestões de Estudo
Vídeo Complementar
Como funciona o sistema RGB
Uma explicação técnica e visual sobre os fundamentos dos sistemas de cor para digital e impressão.
Vídeo Complementar
Misturar todas as cores dá PRETO ou BRANCO?
Aprenda na prática quando utilizar cada um desses perfis de cor nos seus projetos gráficos.
Percepção e Daltonismo
O daltonismo (ou discromatopsia) é um distúrbio visual hereditário que causa dificuldade em distinguir cores, principalmente o verde e o vermelho.
Protanopia
Vermelho
Deuteranopia
Verde
Tritanopia
Azul
Acromatopsia
Acromática
Classificação das Cores
Primárias
Vermelho, Amarelo e Azul (RYB)
Secundárias
Verde, Laranja e Violeta
Terciárias
Mistura de Primária + Secundária
Classificação das Cores no Círculo
Selecione uma cor
Este círculo demonstra a relação entre cores primárias, secundárias e terciárias no sistema RYB (Red, Yellow, Blue).
Laboratório Interativo de Misturas
Siga as instruções para inserir as cores nos tubos. O sistema fará a síntese subtrativa instantaneamente e revelará o nome e a classificação da cor gerada. (Idealizado pelo Instrutor Gustavo Elian)
Tubo 1
Tubo 2
Resultado da Mistura
Laranja
Propriedades da Cor
Matiz (Hue)
É a própria cor (vermelho, azul, verde). Define a posição no círculo cromático.
Saturação
A pureza da cor. Quanto mais saturada, mais vibrante; menos saturada, mais cinzenta.
Brilho / Valor
A luminosidade da cor. Define se uma cor é mais clara (adição de branco) ou escura (adição de preto).
Contraste e Legibilidade
O contraste é a diferença percebida entre cores adjacentes. No design, ele tem dois objetivos principais:
Impacto Visual
Criar vibração e atrair o olhar rapidamente. Ideal para logotipos e ícones.
Legibilidade
Garantir que o olho decodifique letras sem esforço. Essencial para textos longos.
Ranking de Legibilidade
| Rank | Cor da Letra | Cor do Fundo | Exemplo |
|---|---|---|---|
| 1º | Preta | Amarela | Texto |
| 2º | Amarela | Preta | Texto |
| 3º | Verde | Branca | Texto |
| 4º | Vermelha | Branca | Texto |
| 5º | Preta | Branca | Texto |
| 6º | Branca | Azul | Texto |
*A lista completa contém 18 níveis de legibilidade baseados no contraste de valor e matiz.
Ruído Visual
O que é?
É uma sobrecarga de sinais conflitantes para o cérebro. Ocorre principalmente por causa do Efeito de Borda em cores complementares puras.
Consequências
Bordas Instáveis
O olho não sabe onde termina a letra e começa o fundo.
Fadiga Ocular
O cérebro faz um esforço triplo para "limpar" a imagem.
Acessibilidade e Valor
Teste de Valor (P&B)
"Se o seu texto não pode ser lido em preto e branco, ele não tem contraste de valor suficiente para ser acessível."
Use este teste para garantir que seu design funcione para todos os públicos e dispositivos.
Ferramentas para Testar Contraste:
Abordagem e Correção na Prática
Análogas de Baixo Valor
Falha: Cores próximas e escuras somem uma na outra.
✅ Solução: Use branco ou tons muito claros para o texto.
Complementares Puras
Falha: Vibração extrema nas bordas das letras.
✅ Solução: Escureça muito o fundo ou clareie muito o texto.
Fundos Complexos
Falha: Legibilidade varia conforme o detalhe da imagem.
✅ Solução: Use um Overlay escuro ou caixa sólida.
Círculo Cromático Interativo
Vermelho
Matiz: 0°
Escolha uma Harmonia:
Paleta Gerada:
Misturador de Cores RGB
A mistura aditiva de luzes. No RGB, 0,0,0 é preto e 255,255,255 é branco.