Cores

Captura De Tela 2024 08 23 151245 (binary/octet-stream)

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!

Imagem 2024 08 25 220842139 (binary/octet-stream)

O círculo cromático

O círculo monocromático

Imagem 2024 08 25 222422363 (binary/octet-stream)

Imagem 2024 08 25 222513101 (binary/octet-stream)

Imagem 2024 08 25 222946261 (binary/octet-stream)

Imagem 2024 08 25 224822529 (binary/octet-stream)

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

Paleta de 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.

Como capturar 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;   }