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. ___
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. ___
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.
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?
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 — ___
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. ___
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). ___
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.