Ficha 03 · Cor e gradientes
- Distinguir RGB, CMYK, HSL e Pantone
- Compreender o conceito de gamut
- Escolher o modelo de cor adequado ao destino
- Aplicar diferentes tipos de gradiente
Parte I · Modelos de cor
Exercício 1 · Identificar modelo adequado
Para cada cenário, indique o modelo de cor mais adequado (RGB, CMYK, HSL, Pantone, ou Hex):
a) Desenhar um banner para o sítio web da escola. ___
b) Preparar um cartaz A2 para enviar à gráfica. ___
c) Definir as cores oficiais de uma nova marca, que vão ser usadas internacionalmente. ___
d) Ajustar cores num design — quero variar a saturação mantendo o matiz. ___
e) Especificar cor em código CSS. ___
f) Capturar a cor exacta de uma foto. ___
a) RGB (ou Hex, equivalente) — destino é ecrã.
b) CMYK — destino é impressão profissional.
c) Pantone — garante reprodução exacta em qualquer fabricante / país.
d) HSL — modelo onde matiz é independente da saturação/luminosidade.
e) Hex (#RRGGBB) — convenção CSS.
f) Pode-se usar RGB ou Hex (capturar com a ferramenta "conta-gotas" / eyedropper).
Exercício 2 · Aditivo vs subtractivo
Indique se cada afirmação descreve um modelo aditivo (RGB) ou subtractivo (CMYK):
a) Começa em preto (ausência de luz) e adiciona luz. ___ b) Começa em branco (papel) e adiciona tintas. ___ c) Quando todos os componentes estão a 100%, o resultado é branco. ___ d) Quando todos os componentes estão a 100%, o resultado é (quase) preto. ___ e) É o modelo usado em ecrãs (TV, monitor, smartphone). ___ f) É o modelo usado em impressão profissional. ___
a) Aditivo (RGB) — começa em preto e adiciona luz. b) Subtractivo (CMYK) — começa em branco e adiciona tintas que subtraem luz reflectida. c) Aditivo (RGB) — R+G+B a 100% produz branco luminoso. d) Subtractivo (CMYK) — C+M+Y a 100% produz quase-preto (daí o K = Key/Black para puro preto). e) Aditivo (RGB) — ecrãs emitem luz. f) Subtractivo (CMYK) — tintas no papel reflectem luz.
Exercício 3 · Hex ↔ RGB
Converta:
a) #FF0000 em RGB: ( ___ , ___ , ___ ). Que cor é? ___
b) #6366F1 em RGB: ( ___ , ___ , ___ ).
c) RGB (0, 255, 0) em hex: . Que cor é? ______
d) RGB (128, 128, 128) em hex: . Que cor é? ______
Dica: cada par hexadecimal representa um valor de 0-255.
FF= 255,00= 0,80= 128.
a) #FF0000 = RGB(255, 0, 0) — vermelho puro.
b) #6366F1 = RGB(99, 102, 241) — azul-violeta (cor Aulify).
c) RGB(0, 255, 0) = #00FF00 — verde puro.
d) RGB(128, 128, 128) = #808080 — cinzento médio.
Parte II · Gamut e impressão
Exercício 4 · Conceito de gamut
Explique, em 2-3 frases:
a) O que é o gamut de um modelo de cor?
b) Porque é que uma cor que parece vibrante no ecrã pode parecer baça quando impressa?
c) Como evitar surpresas na impressão?
a) Gamut é o conjunto de cores que um modelo (ou um dispositivo) consegue representar/reproduzir. Cada modelo tem um gamut diferente.
b) Porque o gamut do RGB é maior que o gamut do CMYK — há cores em RGB (especialmente azuis e verdes muito saturados) que simplesmente não conseguem ser reproduzidas com tintas CMYK. Ao converter de RGB para CMYK na impressão, essas cores são "achatadas" para a cor reproduzível mais próxima, perdendo vibração.
c) Trabalhar no modelo do destino final desde o início. Se vai imprimir, configurar o documento em CMYK em Inkscape/Illustrator. Fazer testes de impressão antes da tiragem grande. Usar provas de cor (color proofs) para projetos críticos.
Parte III · Paletas de cor
Exercício 5 · Tipos de paleta
Faça corresponder cada tipo de paleta cromática à sua descrição:
| Tipo | Descrição | |
|---|---|---|
| A. Monocromática | 1. Cores em lados opostos do círculo cromático | |
| B. Análoga | 2. Uma só cor + variações de saturação/luminosidade | |
| C. Complementar | 3. 3 cores em triângulo equilátero no círculo | |
| D. Triádica | 4. Cores adjacentes no círculo cromático | |
| E. Tetrádica | 5. 4 cores em duas pares complementares |
A — , B — , C — , D — , E — ___
A — 2 (monocromática: 1 cor + variações) B — 4 (análoga: adjacentes no círculo, ex: azul, azul-roxo, roxo) C — 1 (complementar: opostos, ex: laranja e azul) D — 3 (triádica: 3 cores em triângulo equilátero, ex: vermelho, amarelo, azul primários) E — 5 (tetrádica: 4 cores em rectângulo, dois pares complementares)
Exercício 6 · Aplicar paletas
Para cada objetivo de design, sugira o tipo de paleta mais adequado e justifique:
a) Logo de uma clínica de saúde — quer transmitir tranquilidade. ___
b) Cartaz de um festival de música pop. ___
c) Identidade visual para uma associação cultural. ___
d) UI de uma app de meditação. ___
e) Sinalética para um centro comercial — distinguir 5 categorias. ___
a) Monocromática ou análoga em tons azuis/verdes — transmite calma, profissionalismo, frescura. b) Tetrádica vibrante ou complementar muito saturada — energia, contraste, impacto. c) Análoga ou triádica com cores quentes — diversidade, vitalidade. d) Monocromática ou análoga em tons frios (azuis, lavandas) — minimalismo, foco. e) Triádica ou 5 cores distintas — fácil distinguir cada categoria; alta saturação para legibilidade.
Parte IV · Gradientes
Exercício 7 · Identificar tipo de gradiente
Para cada efeito visual descrito, indique o tipo de gradiente adequado (Linear, Radial, Malha):
a) Fundo de cartaz com transição céu (azul claro em cima → laranja em baixo). ___
b) Botão web com efeito de brilho ao centro. ___
c) Pintura digital realista de uma maçã com volume. ___
d) Texto com gradiente de letras (cor varia da esquerda à direita). ___
e) Spotlight de palco (círculo de luz num fundo escuro). ___
a) Linear vertical — direcção fixa de cima para baixo. b) Radial — cor varia a partir do centro. c) Malha — múltiplos pontos de cor para simular volume e iluminação realista. d) Linear horizontal — varia ao longo da extensão do texto. e) Radial — círculo de luz que se desvanece para escuro.
Exercício 8 · Sintaxe CSS
Escreva a propriedade CSS para os seguintes gradientes:
a) Gradiente linear vertical do branco (topo) ao indigo #6366F1 (base).
b) Gradiente linear diagonal (135°) do azul #3B82F6 ao rosa #EC4899.
c) Gradiente radial do amarelo no centro ao laranja nas extremidades.
a)
background: linear-gradient(to bottom, #ffffff, #6366f1);
b)
background: linear-gradient(135deg, #3b82f6, #ec4899);
c)
background: radial-gradient(circle, #fef08a, #ea580c);
(Aceitam-se variações como linear-gradient(180deg, ...) equivalente a to bottom.)