Cores

Psicologia das cores

• 
• Jamais subestime o poder das cores, elas podem influenciar na quantidade de tempo que seu visitante passa visitando o seu site e pode até mesmo ser um poderoso critério de decisão para uma compra.
• as pessoas levam cerca de 90 segundos para decidir se querem ou não um produto, e que 90% dessa decisão se baseia na sua cor
• As cores passam emoção para o subconsciente das pessoas

Representando Cores com CSS3

• No CSS3 podemos representar cores de diferentes formas:
• NOMES style="background-color: blue; color: white;"
• HEXADECIMAIS style="background-color: #0000ff; color: #ffffff;"
• RGB style="background-color: rgb(0, 0, 255); color: rgb(255, 255, 255);"
• HSL style="background-color: hsl(240, 100%, 50%); color: hsl(0, 0%, 100%);"
• E também pela forma mais facíl no VS Code:
• - Clicando em cima do quadrado que mostra a cor podemos alterar a cor, a forma representada e a transparência.

Harmonia das cores

• Os slides abaixo explicam cada conceito por trás da harmonia entre as cores!

O círculo cromático

Slide 5

Slide 6

Slide 7

Slide 8

Paleta de cores

• Para criar, se inspirar, copiar e extrair paleta de cores podemos usar como ferramenta 3 sites:
• https://color.adobe.com
• https://paletton.com
• https://paletton.com
• Aula 5 do Curso em vídeo HTML e CSS - Módulo 2 de 5

Como capturar cores

• Como capturar cores de um site ou de qualquer lugar?
• Basta adcionar a extensão ColorZilla no navegador
• ou
• Fazer uma captura de tela ou print e enviar no site color.adobe para extrair as cores.

Aplicando cores com CSS na prática

• Para adicionar uma cor degradê em todo o site configure:
• body {
• background-image: linear-gradient(-500deg, #A4A5A6, #5C6373);
• }
• Para que a página inteira fique com a cor desejada sem bug configure
• body {
• background-attachment: fixed;
• }
• Para adicionar uma sombra à caixa configure:
• main {
• box-shadow: 5px 5px 15px #1a1d25a1;
• }
• Dica para sombras: use a mesma cor do background-image e trabalhe a monocromia. Ao passar o mouse em cima da cor, no painel que vai abrir arraste o ponto selecionado para baixo, diminua também a transparência.
• Para adicionar sombra ao texto configure:
• h1 {
• text-shadow: 1px 1px 2px #565e70a2;
• }