Cores no design

Cor

É o termo geral que usamos para descrever cada matiz, tonalidade, ou tom que vemos.

Paleta de Cores

• Criar bons esquemas de cores é combinar e equilibrar hue, matiz, tom, sombra e temperatura.
• Para fazer isso com sucesso em seus aplicativos de design, você só precisa saber quais alavancas puxar.
• Harmonia de cores e teoria das cores oferecem algumas fórmulas que podemos usar para iniciar nossas paletas de cores, é uma base importante para entender.
• Mas criar belas paletas de cores não é apenas sobre essas fórmulas, é também sobre sutilezas de equilíbrio de matiz, tonalidade, tom e temperatura.

Hue

Refere-se à família de cores dominantes da cor específica que estamos analisando. Branco, preto e cinza geralmente não são referidos como matiz ou cor.

Matiz

• Um matiz é qualquer matiz ou mistura de cores puras com apenas branco adicionado, dissolvendo a cor até o branco.
• A Matiz clareia a cor, mas não a torna mais brilhante.
• Portanto, um matiz pode variar de um pouco mais claro que sua cor original, até o branco, com quase nenhuma das cores misturadas.

Tom

• É qualquer matiz ou mistura de cores puras com apenas cinza adicionado.
• Para ser preciso, esta definição considera Cinza como verdadeiramente neutro.
• Em outras palavras, não há pigmentos adicionais no cinza além do branco mais o preto.
• Uma mistura neutra de cinza, não importa quão claro ou escuro, irá atenuar a intensidade de qualquer cor.
• As cores tonificadas são geralmente consideradas mais agradáveis aos olhos.
• Eles são complexos, sutis e sofisticados.
• Isso porque cores puras brilhantes são mais frequentemente associadas a crianças.

Tonalidades

• Tonalidade é qualquer matiz puro ou mistura de cores puras com apenas preto adicionado.
• Em outras palavras, não contém absolutamente nenhum branco ou cinza.
• Um tom escurece a cor.
• Permanece o mesmo que o Matiz, mas com apenas uma versão mais escura.
• Como foi observado acima, mesmo uma pequena quantidade de Branco ou Cinza adicionado a uma cor, a transforma em um Tom.
• Portanto, um tom pode variar de um pouco mais escuro do que sua cor original, até quase preto com quase nenhuma das cores misturadas.
• Feito adicionando um toque de preto à sua cor.

Temperada

• É mais sobre como percebemos o tom que estamos vendo. e tendemos a dividi-los em quentes ou frios.
• Cores quentes - são as cores que geralmente vêm de aumentar os tons de vermelho ou amarelo em uma tonalidade. Estes tendem a evocar os sentimentos de paixão, aconchego, energia e movimento.
• Eles nos lembram da luz do sol e do calor.
• Cores frias - são as cores que aumentam os azuis e os verdes. Estes tendem a evocar frescor, inverno, quietude, calmante. Eles nos lembram de gelo, neve e água.

Modelos de Cores

• CMYK — Cyan (Ciano), Magenta, Amarelo, Preto: usa o que é chamado de mistura subtrativa de luz para derivar cores diferentes.
• RGB - Vermelho, Verde e Azul: usam o que é chamado de mistura aditiva de luz para derivar cores diferentes.
• HSB (V) - Matiz, Saturação e Brilho (às vezes modelado como Valor ou Luminosidade) usa uma mistura desses atributos para derivar cores diferentes

CMYK

• Usa mistura de cores subtrativas.
• Refere-se à maneira como a luz reflete de uma página em branco física.
• A sobreposição de cores resulta em preto.
• Como uma página não pode projetar luz e iluminá-la para você, ela precisa ter luz refletida nela.
• Então, a mistura dessas cores somadas você está cobrindo o branco da página e, assim, reduzindo a quantidade de luz que pode ser refletida.
• Como uma criança misturando todas as cores de tinta a dedo e ficando preta.
• Usado para páginas e com impressoras;
• Quando essas 4 cores são misturadas, a sobreposição resulta em preto;
• Subtrativo - Porque você está removendo o branco que está lá.

RGB

• RGB é chamado de mistura aditiva de luz.
• Refere-se à forma como as telas digitais projetam a luz para nós.
• As cores com brilho total nos fazem ver uma sobreposição de branco.
• Tipo como ser cegado por luzes de inundação brilhantes.
• Usado para design de tela digital;
• Como 3 luzes vermelhas, azuis e verdes brilhantes projetando-se em você;
• Transforme-os em brilho total, você obtém luz branca pura;
• Desligue todos eles e você verá escuridão.

HSB

• Significa Matiz (Hue), Saturação (Saturation) and Brilho (Brightness).
• Como as pessoas realmente veem as cores e como nossos cérebros funcionam;
• Usado por Ul e designers de tela visual;
• Matiz - uma escala radial 360 de todas as cores;
• Saturação - Quão maçante ou rica a cor,
• Brilho - Se a cor está mais próxima do branco ou mais próxima do preto na escala
• Usado em aplicativos de design e UI/UX e Designers de Produto.
• O modelo de cores HSB nos fornece um radial de cores (ou uma roda de cores) em que temos uma gama de matizes (a cor), saturação (quanta cor) e brilho (quão próximo do branco ou preto na escala é ) valores.
• É assim que nossos olhos e cérebros interpretam as cores HSB tem tudo a ver com o que nossos olhos veem, independentemente de ser a luz projetada de uma tela ou no papel.
• Ao misturar o matiz (cor da roda de cores) a saturação (quão vibrante é a cor ou quanto cinza é adicionado a ela) e brilho (quanto branco ou preto é adicionado). Isso resultaria em uma cor específica.
• Portanto, para fins de escolha de cores para nossos designs de interface do usuário, usaremos o modelo de cores HSB.

Categoria de cores

• TONS DE JOIAS - JEWEL TONES
• TONS DE PASTEL - PASTEL TONES
• TONS DA TERRA - EARTH TONES
• TONS NEUTROS - NEUTRAL TONES
• TONS FLUORESCENTES - FLUORESCENT TONES
• TONS - SHADES

Joias (Jewels)

• Saturação: S:83-73
• Brilho: B: 76-56
• Essas cores que são tons ricamente saturadas nomeadas para gemas, incluindo azul safira, vermelho rubi, roxo ametista, amarelo citrino e verde esmeralda.
• Pense na riqueza profunda de um colar de rubi vermelho ou uma coroa roxa real.
• Essas cores são régias, profundas e transmitem uma sensação de luxo.
• O ideal saturado e brilho para criar paletas de cores com tons de joias, está com um valor de saturação (intervalo) entre e o valor de brilho entre eles.

Pastel

• S:14-21 - B: 89-96
• As cores pastel pertencem à família pálida das cores. Rosa, malva e azul bebê são cores pastel comumente usadas, bem como cores como menta mágica, pêssego, pervinca e lavanda.
• As cores desta família são geralmente descritas como “calmantes”.
• Criamos essas cores reduzindo a saturação e ajustando a tonalidade (arrastando para a área branca).

Cores da Terra (Earth Tones)

• S: 36-41 - B: 77-36
• Estas são cores comumente encontradas na natureza.
• Muitos tons de terra se originam de pigmentos de argila como umbre, ocre e sienna.
• Eles podem ser criados combinando um tom puro com branco, preto ou cinza.
• Estes são considerados no sentido mais amplo uma cor neutra.
• Eles são influenciados pelos tons das árvores, florestas, mares e céu e são suaves e planos para imitar as cores naturais.
• Criamos tons de terra aumentando a saturação e ajustando o tom (arrastando para cinza).

Neutras

• S: 1-10 - B: 99-70
• Cores neutras puras incluem preto, branco, bege e todos os cinzas, enquanto os neutros próximos incluem marrons, bege e cores mais escuras.
• Estes são criados por cores dessaturantes. Eles podem ser combinados com qualquer uma das categorias acima para criar equilíbrio,
• Criamos neutros diminuindo a saturação e ajustando o tom, matiz e sombra (arrastando para mais perto do lado branco/cinza/preto do seletor de cores).

Fluorescentes / Neon

• S: 100-63 - B: 100-82
• A fluorescência é um resultado da fotoluminescência. A cor fosforescente emite luz quando excitada por luz visível ou ultravioleta.
• No mundo físico, isso é criado por tubos de néon ou cores de tinta reagentes ultravioleta, mas no mundo digital podemos obter esse mesmo efeito aplicando cores muito brilhantes e altamente saturadas aos nossos projetos.
• Nós os criamos aumentando o brilho e o tom.
• Podem ser irritantes.

Sombras - Shades

• S: 0-0 - B: 0-100
• Os dois tons principais são preto e branco (que normalmente não são considerados cores, mas sim a ausência de claro ou escuro ou a adição de tom puro ou tom puro), outros tons também incluem vários graus de cinza.

Tema Dark

• O modo escuro seria uma versão de uma interface com fundo escuro e elementos em tons claros.
• Quando combinados com outros modos de cor, permitem uma personalização da plataforma, sendo uma boa feature de produto;
• Uma pessoa pode optar por usar o modo claro durante o dia e o modo escuro à noite, para descansar os olhos;
• O fundo escuro emite menos luz e, portanto, gasta menos bateria, podendo assim, também, aumentar a vida útil do dispositivo;
• Alguns dispositivos oferecem o modo escuro automático, o que não é o ideal, pois perdemos o controle de como fica a experiência uma vez que não controlamos as cores;
• Diminui as chances de se desenvolver miopia ou evita o seu agravamento;
• Uma parcela de pessoas daltônicas se sente mais confortável de usar a plataforma escura;
• Pessoas com questões de saúde que envolvem a visão serão menos prejudicadas e se sentirão melhor ao interagir com a plataforma;
• O produto será mais acessível e estará consequentemente melhorando experiência dos usuários como um todo.

Alto Contraste

• O alto contraste em Ul é uma característica que melhora a legibilidade e a acessibilidade das interfaces de usuário.
• Em Ul, utiliza cores que têm uma grande diferença de luminância ou tonalidade entre o fundo e o primeiro plano, facilitando a distinção dos elementos visuais.
• O alto contraste em UI é importante para atender às necessidades de pessoas com deficiência visual ou outras condições que afetam a percepção das cores.
• Existem diferentes tipos de deficiência visual, como deuteranopia, protanopia, tritanopia e acromatopsia, que reduzem a sensibilidade ao contraste e à capacidade de distinguir cores.

O uso de cores no Design

As cores têm um papel fundamental na experiência do usuário e podem influenciar a percepção e a emoção dos visitantes. A seguir, estão as características psicológicas associadas a algumas das principais cores:

Amarelo (Yellow)

• Energia: o amarelo é uma cor que estimula a atenção e evoca sentimento de energia e otimismo.
• Esperança: o amarelo também está ligado à esperança e ao futuro, tornando-o popular em branding para empresas que buscam inspirar confiança nos clientes.

Exemplos:

• Google (cor primária)
• McDonald’s (cor secundária)

Azul (Blue)

• Fidelidade: o azul é uma cor associada à lealdade e ao comprometimento, tornando-o popular em branding para empresas que buscam construir relacionamentos com os clientes.\
• Confiança: o azul também está ligado à confiança e às emoções seguras.

Exemplos:

• Facebook (cor primária)
• American Express (cor secundária)

Verde (Green)

• Natureza: o verde é uma cor associada à natureza, ao crescimento e à renovação.\
• Segurança: o verde também está ligado à segurança e estabilidade.

Exemplos:

• Starbucks (cor primária)
• Whole Foods Market (cor secundária)

Vermelho (Red)

• Atração: o vermelho é uma cor que atrae atenção e evoca sentimento de paixão.\
• Energia: o vermelho também está ligado à energia e ao entusiasmo.

Exemplos:

• Coca-Cola (cor primária)
• Target (cor secundária)

Preto/Negro (Black)

• Sombreamento: o preto é uma cor que pode ser usada para criar contraste e enfatizar outros elementos.\
• Luxo: o negro também está ligado à luxuria e ao glamour.

Exemplos:

• Apple (cor primária)
• Louis Vuitton (cor secundária)

Cinza (Gray)

• Neutralidade: o cinza é uma cor neutra que pode ser usada para criar equilíbrio visual.\
• Seriedade: o gris também está ligado à seriedade e ao formalismo.

Exemplos:

• Microsoft (cor primária)
• IBM (cor secundária)

Laranja (Orange)

• Vivacidade: o laranja é uma cor que evoca sentimento de alegria e entusiasmo.\
• Creactividade: o orange também está ligado à criatividade e ao pensamento outside the box.

Exemplos:

• Nickelodeon (cor primária)
• Fanta (cor secundária)

Roxo

• Espiritualidade.
• Realeza

É importante lembrar que essas são apenas generalizações e que a percepção das cores pode variar dependendo da cultura, do contexto e da personalidade individual.