ANÁLISE GRÁFICA

Cor

ANÁLISE GRÁFICA
Seminário 2: Cor

DATA
28/11/2023
ANÁLISE GRÁFICA
Cor
INTEGRANTES

Elisa Cristina Giselle Giovanna Júlia Fabiana

Júlia Fernandes Ícaro Maíra

ANÁLISE GRÁFICA
Cor SUMÁRIO

INTRODUÇÃO:
01 O QUE É COR? 05 COR EM IDENTIDADE VISUAL

PROPRIEDADES DA
02 COR 06 COR EM INTERFACES

03 HARMONIAS CROMÁTICAS 07 ATIVIDADES

COR NA ILUSTRAÇÃO
04 DIGITAL
ANÁLISE GRÁFICA
Cor

O QUE É
“NO SENTIDO FÍSICO, REALMENTE NÃO EXISTE COR,
APENAS ONDAS DE LUZ DE DIFERENTES
COMPRIMENTOS DE ONDA.”-ADAMS, 2006.

COR?
COR É LUZ: O intervalo visível pelos seres
humanos, visto ao ativar determinadas partes do
nosso organismo nos permite enxergar as cores,
é chamado ESPECTRO VISÍVEL.

Cada variação de frequência é responsável por

uma "cor", que não existe na natureza por si só,
mas na nossa percepção.
 Fonte: Abstract - Episódio Olafur Eliasson: O Design da arte

È uma sensação visual resultante da distinção entre

comprimentos de onda, que vibram em velocidades
diferentes.

O olho humano consegue distinguir essa variação e nosso

cérebro as interpreta, causando efeitos fisiológicos e
psicológicos.
ANÁLISE GRÁFICA
Cor

COMO
EXERGAMOS AS

Fonte: BenRG/Wikimedia
CORES?
Células fotossensíveis: cones (ondas
longas, medias e curtas) e bastonetes
(reconhecem variação luminosa)
interpretam as variações de
frequência e as enviam a informação;

As células ganglionárias a traduzem

recebida para o cérebro.

OC OM OL
ANÁLISE GRÁFICA
Cor

SÍNTESE
ADITIVA (RGB)
Tem como cores primarias o vermelho,
o verde e o azul, que se somadas,
resultam em branco.
ANÁLISE GRÁFICA
Cor

SÍNTESE
SUBTRATIVA (CMY)
Tem como cores primarias o ciano,
magenta e amarelo, que se somados
resultam em preto.
ANÁLISE GRÁFICA
Cor

PROPRIEDADES
DA COR
Matiz ou croma:
vermelho; azul; amarelo;

Saturação ou pureza: quanto

menos pura, mais ela tende ao
cinza.

Brilho, Luminância ou Valor:

intensidade da cor, quanto mais
intensa, mais próxima do branco,
quanto menos intensa, mais
próxima do preto.
ANÁLISE GRÁFICA
Cor

HARMONIAS
CROMÁTICAS
É um sistema de regras coerente e
lógico em que parte componentes
formam um todo uniforme.

Todas as tensões obtidas nas

relações e proporções da
composição colaboram para o
resultado pretendido, que as cores
possam ser identificadas sem que o
todo se desfaça.
 HARMONIA
MONOCROMÁTICA
DE BRILHO:
Variação de luz na matiz, que
acaba por afetar a saturação ao
se aproximar do polo pois ao
diminuir o brilho também se
aproxima do eixo.

É uma das composições mais

simples e sofisticada.
 HARMONIA
MONOCROMÁTICA
DE SATURAÇÃO:
A cor de aproxima do centro (ou
seja, tende para o cinza), e acaba
afetando o brilho pois diferentes
cores saturadas possuem brilhos
distintos em função da
sensibilidade dos nossos cones da
visão. Pode criar mistério, o
estranho, o antigo.
 HARMONIA
COMPLEMENTAR:
Quando se selecionam cores
primarias com secundarias opostas
no circulo cromático. Traz vigor à
composição. É uma imagem forte e
impactante.
 HARMONIA
COMPLEMENTAR
TERCIÁRIAS:
Quando se combina duas cores
terciárias no circulo. São
composições impactantes e menos
previsíveis.
 HARMONIA POR
SEMELHANÇA DE
DOMINANTES:
Seleção de duas cores primárias da
mesma síntese. É difícil estabelecer uma
hierarquia. Mais impactante das
composições, pede uma variação de
brilho ou saturação em uma das cores.
 HARMONIA
ANÁLOGA
Formada por uma cor primária
combinada com duas cores vizinhas
(secundarias) no circulo cromático.
Composição menos previsível que a
monocromática, mas também mais suave.
 HARMONIZAÇÃO
DO COMPLEMENTO
DIVIDIDO:
Mistura de uma tonalidade da escala
cia as duas vizinhas da cor oposta a
primeira. Possui uma dominante, o
que facilita a hierarquia visual.
A COR NA
ILUSTRAÇÃO
DIGITAL
COR DAS SOMBRAS
A cor das sombras de um
objeto é resultado da
mistura de sua cor original
e a cor predominante do
ambiente
 1

CÉU ABERTO
A cor azul do céu aberto
exerce influência na cor dos
objetos da ilustração
tornando-os mais azulados

2
1 2 3
3
Influência de cor
do céu aberto

SAMDOESARTS
 4

PERPECTIVA
ATMOSFÉRICA
3
Quanto mais longe se encontra um 2
objeto no horizonte, mais sua cor se
aproximará da cor do céu.

1 2 3 4
1
MAIS MAIS
PERTO LONGE
DEVINELLEKURTZ
 SUBSURFACE
SCATTERING
O subsurface scatterimg (SSS) é um
mecanismo de transporte de luz no
qual a luz que penetra na superfície
de um objeto translúcido é espalhada
ao interagir com o material e sai da
superfície em um ponto diferente.
DEVINELLEKURTZ
OPOSIÇÃO DE TEMPERATURA
LUZ E SOMBRA

DJAMILAKNOPF
SAMDOESARTS
A COR EM
IDENTIDADE
VISUAL
 ANÁLISE GRÁFICA
IMPORTÂNCIA DAS CORES Cor

EM UMA MARCA

93%
Das pessoas baseiam suas decisões
de compra nas cores. Isso acontece
porque os seres humanos têm grande
parte de suas percepções baseadas
no visual, gerando estímulos que
movem nossas ações.

The Psicology Of Color

Quick Sprout, Neil Patel
ANÁLISE GRÁFICA
Cor

73%
Pode aumentar
a capacidade de
aprendizado em

55%
Auxilia na
legibilidade das
informações em até

40%
A cor pode melhorar a
compreensão de uma
mensagem em até

The Psicology Of Color

Quick Sprout, Neil Patel
 ANÁLISE GRÁFICA
SIGNIFICADO Cor

MERCADOLÓGICO

A identidade visual é a primeira impressão que uma marca causa no público,

contribuindo para que o consumidor decida, em questão de segundos, se existe
identificação, ou não, com a proposta de venda de uma empresa. Por isso, quando
um empreendedor pensa em lançar o seu produto e serviço no mercado, a
preocupação com seu logotipo e embalagem é eminente.

Desde o início do grande mercado empresarial, as cores para além das emoções,
são utilizadas para representar também sensações e identificar características
específicas de produtos e sua origem.
Mas mesmo com alta funcionalidade, o uso ANÁLISE GRÁFICA
Cor
inadequado das cores no mercado pode influenciar
de forma negativa na conversão de vendas de um
produto, tirando-o de contexto ou remetendo à
sensações contrárias às quais gostariam de transmitir.

Assim como a Maionese Hellmanns, que utiliza

em seus saches a cor amarela, majoritariamente
utilizada em seu nicho para representar embalagens
de Mostarda. Pegando de surpresa o cliente desatento
e gerando uma experiência nem sempre positiva.
 ANÁLISE GRÁFICA
Venenoso/Horripilante
Cor

SIGNIFICADO CULTURAL
A diversidade cultural pode afetar o significado das cores
em diferentes locais. Quando uma marca é desenvolvida, é
necessário refletir sobre relações de significado que as
cores definidas podem agregar à identidade visual.

VERDE ESPERANÇA?
Sagrado

COR X DIVERSIDADE Litúrgico

A psicologia das cores, Eva Heller

 ANÁLISE GRÁFICA
Cor

No desenvolvimento da marca, uma das

métricas mais importantes para a
definição de um público alvo é o gênero.

O vermelho masculino e o vermelho feminino

A autora Eva Heller traz um capítulo

destacando a variedade de contextos em
que “o vermelho” é ligado aos gêneros.

As definições variam desde significados

contemporâneos e transpassando a
antiguidade.

GÊNERO X PÚBLICO
A psicologia das cores, Eva Heller
 ANÁLISE GRÁFICA
Cor

Nesse quadro de questões

desenvolvido em uma tese,
é possível vislumbrar as
várias camadas da
significação das cores.

A Cor no Branding:
um estudo sobre design de marca e
comunicação visual estratégica, Flavia Igliori Gonsales
SIGNIFICAÇÃO
 A partir do quadro de
questões anterior, a
autora faz uma
proposição de modos das
cores significarem marcas.

A Cor no Branding:
um estudo sobre design de marca e
comunicação visual estratégica, Flavia Igliori Gonsales
SIGNIFICAÇÃO
“Cada tipo discursivo se revela
como uma possibilidade de
protagonismo cromático na
manifestação de marca....”

A Cor no Branding:
um estudo sobre design de marca e
comunicação visual estratégica, Flavia Igliori Gonsales
 ANÁLISE GRÁFICA
Cor

HORA DE ESCOLHER
AS CORES: O QUE
NÃO ESQUECER
1. Qual o significado dessa cor no contexto em que a marca será
inserida?
2. Qual impacto procura-se causar no público através dessa cor?
3. Existe uma relação identitária entre os aspectos do branding da
marca e a cor?
4. Como a escolha dessa cor influencia os objetivos da marca?
5. Quais as possíveis relações históricas/sensoriais/culturais podem
ser feitas a partir da escolha da cor?
 ANÁLISE GRÁFICA

QUE TAL UM Cor

FAZERMOS
UM TESTE?
Você consegue identificar
uma marca através das
suas cores principais?
ANÁLISE GRÁFICA
Cor

A COR EM
INTERFACES
 CRIANDO PALETA DE
CORES PARA INTERFACE
A paleta segue o padrão de uma cor principal

cor principal

É ideal adicionar em média de três tons

neutros a cada paleta, além de uma cor
de destaque.

branco,

cinza escuro,

cinza claro (opcional).

cor destaque.
 COR INICIAL
Use o que você tem

Elimine as cores dos seus concorrentes

Pense no seu público-

alvo

Não use estereótipos como padrão

Jogue um jogo de palavras

 Va ao site Designspiration e
DICA PARA ESCOLHER clique no link “Cores”.

O TOM O site te permite escolher ate

5 cores e te mostra designs
ANÁLISE GRÁFICA
Cor
reais que usam essas cores, ou
cores parecidas.
 No site Designspiration
DICA PARA ESCOLHER também é possível ver paletas
de projetos;
O TOM
Essas paletas também são
ANÁLISE GRÁFICA
alteráveis e vão te levar para
Cor
mais projetos com tons
similares
Padrão Bright Muted Deep Dark

Fotos que representam o

DICA PARA ESCOLHER cliente podem ser uteis

O TOM O Adobe Capture CC, tira

paletas automaticamente de
ANÁLISE GRÁFICA
fotos
Cor

É possível mudar os modos e

tons das cores
 ANÁLISE GRÁFICA
Cor

HARMONIZANDO
NEUTROS

Crie duas formas e preencha-as com #424242 #fafafa

Insira uma camada de preenchimento de cor acima das

duas formas.

Mude esse preenchimento para sua cor base

Defina o modo de mesclagem para sobreposição e

reduza a opacidade para entre 5 e 40%

Use o seletor de cores e copie seus novos valores.

 ANÁLISE GRÁFICA
Cor

ACHANDO COR DE
DESTAQUE
Sua cor de destaque será usada em quantidades
muito pequenas em seu site e serve para chamar
atenção.

Uma dica é ir ao Paletton e digitar o código HEX

da sua cor principal

Primeiro, você pode clicar no botão “Adicionar

Complementar”

Você pode clicar nos ícones na parte superior

para encontrar outras cores complementares, e
também, análogas.
PALETTON ANÁLISE GRÁFICA
Cor

Cria paletas monocromáticas (com ou sem complementar)

Cria paletas análogas (com ou sem complementar)

Cria paletas por semelhança de dominantes(com ou sem complementar)

Cria paletas tetraédricas de complemento dividido

PALETTON ANÁLISE GRÁFICA
Cor

Mostra combinações entre as cores escolhidas

Mostra texto branco e preto sobre as cores

PALETTON ANÁLISE GRÁFICA
Cor

Mostra exemplos de combinações em layouts

Disponibiliza códigos de todas as cores

SISTEMAS DE CORES
EM INTERFACES

O sistema de core em interface refere-se a

coleção de cores ou núcleos que abrangem
todo o projeto

Elas se dividem em 3 tipos:

Núcleos de interface (cores da UI)

Núcleos semânticos ou núcleos de feedback

Núcleos de Layout
NÚCLEOS DE INTERFACE
(CORES DA UI)

Cor primária

Se aplica aos principais aspectos

da interface

Exemplos: botões, texto e inputs.

Assim como o padrão, passe o
mouse e pressione.
NÚCLEOS SEMÂNTICOS OU
NÚCLEOS DE FEEDBACK

Cor secundária

Inclui núcleos que podem ser usados ​

para comunicar sucesso, alerta,
notificações, destaques e erros.

Aspectos semânticos
NÚCLEOS DE LAYOUT
Cor terciária

Núcleos que serão usados ​no fundo,

containers, modais, bordas, cartões,
cabeçalhos, rodapés e barras
laterais.
 COMO ORGANIZAR AS
CORES DO SISTEMA?
A regra dos 60-30-10 fornece uma diretriz para escolher e aplicar as cores na interface do
usuário de maneira estratégica e equilibrada.
REGRA 60-30-10
Escolher, inicialmente, 3 cores para o
sistema em geral ( uma para cada núcleo)

A partir dessa definição, divide-se as três

cores selecionadas onde:
60% é a tonalidade dominante
30% é a cor secundária
10% é para a cor de destaque.
 ACESSIBILIDADE
EM INTERFACES
“Globalmente, estima-se que
aproximadamente 1.3 bilhão de pessoas
tenham alguma forma de deficiência visual
que afetam especificamente a interação das
pessoas com as cores em uma interface.”

Saúde ocular. Disponível em:

<https://www.paho.org/pt/topicos/saude-ocular>. Acesso
em: 30 out. 2023.

Dessa forma é papel do designer pensar em

projetos com princípios universais e inclusivos.
 A ACESSIBILIDADE
NA COR
Para Dondis o contraste tonal, ou seja, o contraste entre claro e escuro é considerado o mais efetivo
de todos os tipos de contrastes. Sendo assim, é a carcteristica mais importante para acessibilidade.

“No alfabetismo visual, a importância

do significado do contraste começa no
nível básico da visão ou da ausência
desta, através da presença ou
ausência de luz.”

DONDIS, Donis A. Sintaxe da linguagem visual. São Paulo: Martins Fontes, 2003.
DICAS
Padrões WCAG (W3C)

Cores não devem ser utilizadas como única

maneira de transmitir conteúdo ou distinguir
elementos visuais. Utilize elementos gráficos
para complementar a comunicação visual.

Dica: Color add

COLOR ADD
DICAS
Padrões WCAG (W3C)

Existem níveis de conformidade de acordo com as

melhores práticas de acessibilidade que definem:

O nível AA:
Requer uma taxa de contraste de pelo menos 4,5:1 para
texto normal e 3:1 para texto grande
Requer uma taxa de contraste de pelo menos 3:1 para
gráficos e componentes de interface do usuário.
O nível AAA:
Requer uma taxa de contraste de pelo menos 7:1 para
texto normal e 4,5:1 para texto grande.

Dica:

WAVE
WAVE
 DICAS
Um outro método para teste de contraste pode ser
recursos de escala de cinza.

Alguns tipos daltonismo fazem com que os usuários

enxerguem em tons de cinza ou com luminosidade
bem baixa. Então esse tipo de teste pode ser bem
útil.

Dica:
Colorblindly
COLORBLINDLY
ANÁLISE GRÁFICA
Cor

PROPOSTA DE
ATIVIDADE
• A marca Epiphany está sendo lançada no
mercado e precisa de uma paleta de cores.
Defina uma paleta de cores para a marca e crie
um cartaz a partir dessa paleta justificando suas
escolhas!
Epiphany é uma marca de velas artesanais que
promete ao consumidor uma experiência de
Critérios de correção: epifania ao acender uma de suas velas. A
Epiphany leva em conta que o cheiro é o sentido
1. Coerência entre a escolha de humano mais ligado a memória e busca trazer
cores e o perfil da marca - 3pt boas lembranças e conforto a seus clientes. É
uma marca jovem, envolta pelo sentimento
2. Trabalhar composição de no
vintage que embarca a geração atual!
mínimo 3 cores - 4pt

3. Coerência na justificativa - 3pt

REFERÊNCIAS
4DEVS, A. Acessibilidade das cores . Disponível em: <https://medium.com/accessibility4devs/acessibilidade-das-cores-conhe%C3%A7a-os-3-principais-erros-
e-como-resolver-9cd4d6626e8>. Acesso em: 30 out. 2023.

Acessibilidade . Disponível em: <https://developer.apple.com/design/human-interface-guidelines/accessibility>. Acesso em: 30 out. 2023.

ADAMS, Sean, et al. Color Design Workbook: A Real World Guide to Using Color in Graphic Design, Beverly: Rockport Publishers, 2006

ALVES; SILVA; PASCHOARELLI. A importância das cores no desenvolvimento e aplicação nas identidades visuais presentes no mercado, uma revisão. e-Revista
LOGO - v. 4, n. 2, p. (17-26). Dezembro, 2015. Disponível em: https://incubadora.periodicos.ufsc.br/index.php/erevistalogo/article/view/3726

CHAPMAN, C. Color theory for designers, part 3: How to create your own color schemes. Disponível em:
<https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/>. Acesso em: 7 nov. 2023

Designspiration - design inspiration. Disponível em: <https://www.designspiration.com/>. Acesso em: 7 nov. 2023.

Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 . Disponível em: <https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/>. Acesso em: 30 out.
2023.

DONDIS, Donis A. Sintaxe da. Linguagem Visual. São Paulo: Martins. Fontes, 1994.

ELIZABETH, L. A simple web developer’s color guide. Disponível em: <https://www.smashingmagazine.com/2016/04/web-developer-guide-color/>. Acesso
em: 7 nov. 2023.

FARINA, M. et. al. Psicodinâmica das cores em comunicação, 5º ed. São Paulo: Edgard Blücher, 2006.

FONSECA, K. Como usar os núcleos em UI Design - UX Collective 🇧🇷 . Disponível em: <https://brasil.uxdesign.cc/como-usar-as-cores-em-ui-design-

9e145cb21664>. Acesso em: 30 out. 2023.

GARNEY, J. Color and Light: A Guide for the Realist Painter. Andrews McMeel Publishing, 2010.
REFERÊNCIAS
GOETHE, J. W. Doutrina das cores. [s.l.] Editora Nova Alexandria, 2018.

GONSALES, Flavia Igliori. A Cor no Branding: um estudo sobre design de marca e comunicação visual estratégica. 2018. Tese (Doutorado em Estudo dos Meios e
da Produção Mediática) - Escola de Comunicações e Artes, Universidade de São Paulo, São Paulo, 2018. doi:10.11606/T.27.2018.tde-12072018-172911. Acesso
em: 2023-11-07.

HELLER, EVA. A Psicologia das cores. Editora Garamond Ltda, 2014.

MOZETTO, V. Acessibilidade na Interface do Usuário: “Quem está excluindo com meu design?” Disponível em: <https://medium.com/academy-
eldoradocps/acessibilidade-na-interface-do-usu%C3%A1rio-quem-estou-excluindo-com-meu-design-42e921f9b4a0>. Acesso em: 30 out. 2023.

NASCIMENTO, J. Entendendo sistema de cores semântico — especificação de cores e naming. Disponível em: <https://brasil.uxdesign.cc/entendendo-
sistema-de-cores-sem%C3%A2ntico-especifica%C3%A7%C3%A3o-de-cores-e-naming-5a8a118a4d79>. Acesso em: 30 out. 2023.

Paletton - the Color Scheme Designer. Disponível em: <https://paletton.com/>. Acesso em: 7 nov. 2023.

Saúde ocular . Disponível em: <https://www.paho.org/pt/topicos/saude-ocular>. Acesso em: 30 out. 2023.

Subsurface Scattering | Substance 3D Painter. Disponível em: <https://helpx.adobe.com/substance-3d-painter/features/subsurface-scattering.html>.

The Psychology Of Color, Quicksprout, Neil Patel, 2023.

OBRIGADA PELA
ATENÇÃO!