Harmonia de cores - @Curso em Vídeo HTML5 e CSS3

o que isso é mais um vídeo que diz respeito ao capítulo 13 Então já pega o seu caderno porque eu acho que nessa aula você tem bastante anotar [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui que a gente tá falando sobre cores que você fosse HTML e CSS e nessa parte agora a gente vai falar sobre a harmonização de cores ou Harmonia de cores porque na maioria das vezes porém de aprende a desenvolver sites a gente aprende a representar as cores exatamente como a

gente fez no vídeo anterior só que a gente acaba não Aprendendo como fazer essas cores fazerem sentido na verdade deixa abrir um parênteses aqui em bem importante aqui para você tá o estudo de cores o estudo de Harmonia de cores ele não faz parte dessa disciplina de desenvolvimento web ela faz parte da disciplina de design provavelmente a outra Professor provavelmente lá aprender isso em outro lugar mas é muito importante que a gente fala um pouquinho aqui sobre designer é que você possa compreender a importância de certos pontos então eu tô colocando no curso de vocês

aqui era de CSS coisa que eu não tinha feito no curso de CSS lá no YouTube disponível para todo mundo desde 2012/2013 aí as cores mas eu não falei sobre aplicação de cores eu não falei sobre Harmonia eu tô adicionando isso eu também tô adicionando outro conceito de design muito importante que é o próximo assunto que a gente vai falar sobre fonte que fonte é melhor para escolher e determinada situação como eu uso determinada fonte que eu tenho instalado no meu computador no meu site então isso tudo a gente também vai aprender nesse curso mas

não para de papo não diretamente para os slides eu preparei os slides muito legais e não se esquece pega o seu caderno para você poder ir anotando aí fazendo suas anotações senão mais para frente você vai acabar se perdendo e você vai precisar desses conceitos muito bem fundamentados em interromper sua aula só um minutinho para um recado especial da hostnet que é patrocinadora do nosso curso na verdade ela é patrocinadora de quase todos os cursos aqui do canal do consegui vídeo e ela está presente na nossa vida desde o início da história do canal e

nesse vídeo aqui eu vou dar um apanhado Geral de todos os serviços e produtos que a hostnet pode oferecer para você conforme o curso foi avançando eu vou falando um pouco detalhadamente sobre cada um caso você o carro Chevette que historicamente é uma das maiores empresas de hospedagem do Brasil e nesse curso você vai entender coisas como hospedagem como domínio você vai aprender a criar sites e você vai aprender até colocar seu site no ar de forma gratuita Só que essa forma gratuita que você vai aprender esse curso é extremamente limitada mais para frente você

vai se tornar um profissional uma profissional de desenvolvimento de sites e vai precisar de um local para hospedar o seu site de forma profissional a Rosinete oferece esse serviço mas de alguns anos para cá outlet aprimorou ainda mais o seu serviços e além da hospedagem e venda de domínios para quem é assinante de alguns dos planos além de hospedagem você também recebe treinamento e se por acaso você quer montar um site para o seu negócio e começou a aprender a criar sites para desenvolver o seu próprio site do seu próprio negócio mas está sem tempo

de aprender que é o site mais rápido a rotina que também podem desenvolver-se site para você pode ser um site normal uma loja online uma plataforma de Educação a Distância e muitas outras e olha a quantidade de coisas que a Rosinete oferece para você se você quiser saber mais sobre essas possibilidades esse código que tá aparecendo aqui te leva para uma página especial Onde serão apresentados esses itens que eu falei e muitos outros Muito obrigado Rosinete pelo Patrocínio constante do consumo de desde o início da história e agora você pode voltar sua aula então já

estamos aqui no nosso ambiente de slide e como eu falei anteriormente a gente vai falar sobre Harmonia de cores com sucesso na vida a gente vai falar sobre Harmonia de cores como um todo nesse vídeo aplicação de CSS a gente faz mais pra frente também do vídeo anterior eu te mostrei como representar cores Já e agora nesse vídeo eu vou falar sobre o círculo cromático em círculo cromático de diabo é isso com certeza você vai ver círculos cromáticos aqui para frente com outros olhos se eu botar aqui na tela um exemplo de círculo cromático talvez

você receba né porque você procurar no Google Imagens alguns círculos cromáticos com algumas pequenas alterações na posição das cores Esse é supernormal a conta da representação eu vou utilizar que a representação que é mais popular dentro da web né que é utilizando cores com representação RGB basicamente isso aqui que tá aparecendo na sua tela é um círculo cromático só que aqui tem muitas cores aqui a gente tem lá aproximadamente aquele 65 milhões de cores que eu prometi para você no vídeo anterior né que a gente poderia representar só que eu vou dar uma simplificada nesse

círculo cromático pegando 12 cores principais tá tá vendo essas bolinhas eu acabei de colocar aí elas são as coisas que a gente vai pegar e vai considerar para gente poder criar as nossas classificações de cores para a gente falar sobre Harmonia até a sobre harmonização então eu vou dar uma simplificada nesse círculo cromático aqui ó da seguinte maneira tem esse somente os tons principais e vou representar aí aqueles que eu marquei com a bolinha naquele círculo cromático que a gente viu ali no início a primeira coisa que a gente vai fazer o seguinte esse círculo

cromático ele é utilizado principalmente a gente conseguir harmonizar as cores então o foco do estudo do Círculo cromático é para gente poder a harmonia de cores que aquilo que eu falei no material que você tem em PDF sabe quando você acha uma coisa bonita mas você não sabe explicar o porquê Provavelmente quando você acha uma coisa bonita e não sabe explicar porque eles têm duas coisas muito importantes primeiro lugar simetria uma coisa simétrica ela acaba se tornando mais bonita quando você for estudar um pouquinho mais sobre design sobre arte você vai ver que a sincronia

é uma poderosa arma do designer para você conseguir criar uma comodidade visual fazer com que as pessoas acham as suas coisas né Achei o seu site acho que o produto acha seu enfim o que você quisesse embalagem bonita outra coisa que é muito importante além da simetria é a cor cor é muito importante em já falou sobre essa dois meses atrás falando sobre as emoções as cores Psicologia Das Cores reveja esse vídeo caso você precise coladinho com esse vídeo aqui porque eles vão te trazer uma abertura de mente vai abrir somente aí para você poder

entender tão é muito sobre Harmonia de cores e para isso a chave Inicial é esse círculo cromático se você tiver no caderno e tiver disponibilidade de pegar as canetinhas eu tenho bastante canetinha esperar para ver aqui atrás eu uso muita canetinha o poder representar tanto você pegar o Tom exato É só você ir desenhando um círculo cromático básico da sua folha de caderno para você conseguir complementando aqui senão você pega imprimir numa se você tiver impressora colorida e imprimo círculo cromático para você representar em primeiro lugar nós vamos começar a falar sobre as cores primárias

tá a gente tem cores primárias secundárias e terciárias gente tem que entender Qual é a diferença entre esses três as cores primárias dentro do Círculo cromático que a gente representou aqui são o amarelo o vermelho e o azul Então essas são as três principais cores Se você olhar no círculo cromático elas estão simétricas nelas formam um triângulo equilátero é isso essas três coisas estão aparecendo aqui embaixo da minha cabeça tá o que botar em baixo sempre olho embaixo da minha cabeça porque eu tenho ali uma paletinha sem você perceber nessa paleta que tá representava em

baixo as cores tem uma certa Harmonia as cores primárias têm uma Harmonia meio grosseira tá ela ela não fica tão bonita na tela mas as cores primárias são importantes para a gente poder representar as outras cores Então essas aí ó formando um triângulo equilátero formam as cores primárias Como eu disse anteriormente a gente também tem as cores secundárias as cores secundárias vou começar aqui é o laranja o Violeta e o verde Então essas são as três cores que a gente chama de secundária dentro do nosso círculo cromático Tranquilo então olha debaixo a paleta aqui também

são bem grosseiros bem duros vamos dizer assim de se trabalhar as cores terciárias são todas as outras que são misturas das cores primárias e secundárias sempre que você for dar um nome para uma cor terciária você sempre vai colocar o nome da cor primária antes e depois o nome da cor secundária a cor dita terciária está entre uma cor secundária e uma cor primária fechou sempre vou botar primeiro o nome da cor primária e depois o nome da cor secundária como eu tô fazendo aqui ó por exemplo um amarelo esverdeado agora tudo que ele é

um verde amarelado porque amarelo é uma cor primária então ele é um amarelo esverdeado Amarelo Canário Verde secundário a próxima porque a gente vai fazer aqui é o amarelo alaranjado laranja é uma cor secundária fica depois amarelo é a cor primária ficar então é um amarelo alaranjado não um laranja amarelado tá só por questões de classificações a próxima acontece área que a gente vai ver é o vermelho alaranjado tão laranja bem escuro a Gabriela me chama ele de vermelho alaranjado a próxima é um vermelho arroxeado né a gente chama para a cor secundária de Violeta

mas na hora de classificar acontece área a gente considera como se fosse o rosto tá arroxeado a próxima é o azul arroxeado azul é uma cor primária e o violeta é a cor secundária e por último a gente tem um O verdeado que é uma mistura de azul com verde obviamente perto então está aparecendo lá embaixo Pertinho da minha cabeça perto tão longe a minha cabeça mas no final da tela a gente tem as cores especiarias as cores terciárias se você analisar de forma grosseira é o que a gente chama de tons pastéis os tons

pastéis São não são exatamente as cores terciárias mais as cores terciárias tem um tom pastel não sei se você conseguiu entender direito depois seu professor de design pode explicar um pouquinho melhor tá então a gente tem a nota aí no seu caderno cores primárias secundárias e terciárias as primárias amarelo vermelho e azul as secundárias laranja Violeta e verde e as especiarias são essas estão aparecendo aí na tela e a gente completa duas e cores do nosso círculo cromático beleza outra coisa que a gente consegue fazer no círculo cromático é dividir fazer uma distinção o visual

Clara do que são as temperaturas de cores se a gente pegar esse círculo cromático dividir no meio Claro que não dá para dividir no meio certinho assim impedem o deitadinho que são porta uma cor no meio faz eu vou dividir ali ó entre o amarelo esverdeado e o amarelo eu vou fazer um hemisfério ali certo então você vai pegar nesse o amarelo e o amarelo esverdeado vai dividir ele e vai dividir também entre o Violeta e o vermelho arroxeado perto fez uma esfera ele exatamente como tá aparecendo aqui na tela tudo que está do lado

esquerdo é o que a gente chama de cores frias dá uma olhada na paleta que eu coloquei ali embaixo então todas essas cores são que a gente chama de cores frias e todas as cores que estão no hemisfério da direita desse círculo cromático é o que a gente chama de cores quentes também acabei de representar cores quente Então se você quiser representar algo que tenha a ver com frio você vai utilizar mais cores frias né E também então representar lá embaixo pertinho de Denver a dor de acima delas também dá para perceber claramente são as

cores ditas quentes que dá uma sensação de algo mais quente certo e acho que não uma Harmonia entre elas já percebeu que Já começamos a falar sobre harmonias que elas são cores análogas já vai ver como funciona isso agora vamos as classes e buscando a harmonia todas essas classificações que a gente vai ver agora elas buscam Harmonia quando você for desenvolver um site tudo mais uma das coisas que você tem que se preocupar muito é com a criação da sua paleta de cores é justamente para isso que eu tô fazendo esse vídeo aqui para te

ajudar a escolher a paleta de cores para o teu site que eu tô no serviço que tô produto o que quer que seja tá a paleta ela sempre parte de uma cor principal então por exemplo eu gosto muito de dizer o seguinte eu vou fazer um restaurante Eu quero ter um site um restaurante eu vou procurar naquele vídeo anterior Qual é a cor que mais condiz com a ideia de um polimento eu quero fazer um restaurante mas é um restaurante chique em um restaurante elegante tá elegância tem a ver com o dourado tem a ver

um pouquinho com preto não é um marrom mais escuro Então vou trabalhar essas cores decidiu essa cor mais ou menos um marrom Ah mas beleza eu preciso de além do marrom e uma cor que seja similar ao marrom Eu preciso de uma cor que contraste bem com o marrom em qual o tom de marrom que é melhor trabalhar quando eu trabalho com o branco é que o branco é uma cor muito utilizado em sites né porque o conteúdo ele vai ser lido já falei sobre isso fundo branco letra preta aí qual a cor desse papel

branco com letra preta que eu vou fazer qual a cor que eu coloco atrás qual o melhor tom de marrom esse marrom né novo essa outra cor que você decide também vai fazer parte da sua paleta geralmente uma paleta ela tem de três a cinco cores no máximo de considera branco e preto branco e preto sempre vai estar no seu site tá mas você vai ter de três a cinco uma média de quatro é o recomendado são quatro cores mas você tem às vezes paletas com três e às vezes paletas com quatro ou cinco certo

então três quatro cinco cores vai ter que decidir a paleta outra forma de decidir a paleta é assim se o seu cliente tem uma logo e essa marca né uma a marca no teu cliente é algo muito importante você vai verificar qual é a cor primária da marca desse meu cliente então não sai o cliente normalmente eu vou utilizar a cor primária que está sendo utilizado na logo dele perto então também são várias dicas que eu posso te dar mais importante paleta de cores três a cinco cores Fechou então o que eu vou falar partir

de agora vai te ajudar bastante na escolha dessas coisas e eu trouxe aqui mais um recado muito rápido bem tranquilo e um pedido para você não sei se você sabe mas Além daqui do YouTube Eu também estou bem ativo lá nas minhas redes sociais no Instagram e no Instagram do curso em vídeo então que eu vim te pedir nesse vídeo é bem simples gostou da aula tá gostando do curso segue a gente no Instagram Vamos tornar essa comunidade muito maior e ajudar a divulgar o trabalho de Quem produz conteúdo com tanto carinho e tanta dedicação

primeiro lugar nós vamos ver o que a gente chama de cores complementares o que que são as cores complementares as cores complementares são aquelas cores que tem mais contraste entre si então se você quer saber qual é a cor que mais contrasta com uma roupa por exemplo que você vai considerar o marrom e vai escolher a cor imediatamente oposta do Círculo cromático utilizam o exemplo aqui ó por exemplo vou pegar aqui o Violeta Guanabara qual dessas cores aí é aqui tem um maior contraste com violeta que eu quero botar um Violeta no fundo e eu

quero uma letra que contraste bastante porque se eu colocar um violeta em um azul vai ficar horroroso Porque elas estão bem próximas no círculo cromático se você quiser o Violeta e o extremo oposto Qual é a cor que mais contrasta com ele é só você traçar uma reta para o outro lado perto então dá uma olhada ali na paleta que eu coloquei aqui embaixo o Violeta e a cor que mais contrasta com o violeta é o amarelo tá se você não precisa ficar criando uma lista dizer não o violeta é sempre com amarelo é se

eu quiser usar cores complementares é óbvio Mas se você quiser uma cor que contraste tá com outra você vai utilizar esse conceito de cores complementares na próxima aula eu vou te mostrar na prática como fazer isso mas você precisa desses conceitos que dessa aula que eu tô dizendo assim olha só o Violeta o camarão não que você pode girar essa essa barra aí para qualquer lado por exemplo entre o vermelho Você escolheu o vermelho eu tenho vermelho a complementar é sempre verde Então eu tenho um contraste entre elas não estou dizendo que elas necessariamente ficam

bonitas tá até porque existem tons de vermelho e tons de verde que pode ser adaptado sair pelas cores complementares posso ter a outra exemplo aqui eu tenho azul a imediatamente oposta é o laranja então você vê azul com laranja vai ter um contraste muito grande inclusive uma curiosidade não custa em vídeo de Python que existe lá disponível no YouTube também vestido eu usei muito a tonalidade de azul e laranja porque elas têm um contraste muito grande Tá não é uma coisa assim eu não vou deixar aqui o azul com laranja verde fica muito triste ficou

vou usar não tudo tem um princípio tudo tem uma ciência é importante aí você vai falar por um lugar na barra Às vezes eu não quero ter um contraste tão grande eu quero saber as as cores meio que irmãs as coisas que tem a ver uma com a outra aí você vai utilizar o conceito de cores análogas as cores análogas ao contrário das cores complementares são aquelas cores que não tem contraste tão grande entre elas na seleção e civis que estão vou usar um exemplo aqui ou Violeta pegar Violeta como que eu sei as cores

análogas ao violeta é só você pegar as cores e imediatamente a ao lado na as vizinhas vão dizer assim e aí eu tenho uma uma similaridade através de cores dá uma olhada na paleta lá embaixo ele não tem contraste entre elas mas tem uma Harmonia Ficou claro aí fala para o Guanabara mas eu queria é uma mistura disso eu queria usar o violeta violeta minha cor principal Tá vendo aquela bolinha escura ali é o violeta é minha por principal para eu criar uma uma simetria é para criar uma Harmonia semelhante eu pego as vizinhas né

eu pego as cores vizinhas E se eu quiser contratar é só você traçar uma cor para complementar então por exemplo o a cor análoga e uma complementar uma outra técnica também muito utilizada vou utilizar o Violeta que era o Tom Central vou pegar as cores análogas à ele e também vou pegar uma complementar isso é daquele. Mais escurinho ali eu vou traçar uma reta lá para cima do lado completamente oposto e você queria o resultado que tá aqui embaixo olha só a gente tem o Violeta que é bem forte a gente tem as duas cores

análogas que dão uma suavidade não uma harmonia e nós temos sobre o amarelo que contraste tá completamente com violeta Viu como é que a gente acabou acabou de criar uma paleta de quatro cores será que pode ser utilizado no seu site também e com Harmonia só você usar essas coisas aí que não tem erro você vai ver que vai ficar bem bonitinho aí mais uma vez você pode gerar esse para qualquer lado por exemplo pegando laranja como cor principal eu pego duas análogas e uma complementar dá uma olhada na paleta aqui embaixo de mim ver

se não ficou bonitinho Vê se não ficou sem me ver se não ficou bonito esse teu olho não falasse assim aí tá aí é só um coisa de bonitinho viu Tem uma ciência na parada vamos falar sobre também sobre cores análogas relacionadas as cores análises relacionadas a seguinte cura análogas são três vizinhos não é uma na sequência da outra complementando três as cores análogas relacionadas é um princípio um pouco diferente porque as cores análogas elas criam degradê né na verdade elas prometo não te agradeço e depois mas não cria um contraste se eu pegar na

lugar em uma complementar eu que não voltaste muito forte às vezes você não tá procurando um contraste tão forte assim você pode fazer o seguinte essas cores análogas relacionadas estão aqui embaixo a seguinte vão pegar duas cores vejo você pegar uma conta principal você pega duas coisas que são vizinhos uma colada na outra você já tem meio que um degradê Zinho ali para você trabalhar as cores análogas eu não tenho três só tem duas dessas duas você vai pular uma cor ou então a gente vai pular uma cor não vamos pegar o laranja ali no

caso e vamos pegar a terceira cor que seria o vermelho alaranjado dá uma olhada aí na paleta eu tenho duas cores são bem similares e uma outra que é similar também mas ela tem um certo contraste não tão grande mas tenho um contraste viu então já tem mais uma mini paleta aí para você poder escolher e esse pular pode ser tanto para o lado do laranja quanto pro lado do verde então beleza vou pular aquele amarelo-esverdeado ali eu consigo criar uma paleta também aqui ó olha aqui embaixo é bem cômoda aí para já suas visões

você consegue ter e isso a gente chama de cores análogas relacionadas a gente também tem as ditas cores intercaladas as cores intercaladas elas são parecidos com tipo anterior que só que elas têm um contraste maior entre elas então por exemplo tem como referência o amarelo leva que a gente sempre tem que escolher uma cor como referência escolher o amarelo ali como exemplo eu vou pular uma para fazer uma cor intercalada pode ser uma pode ser duas pode ser três época cores intercaladas elas eram é todos os outros que a gente vai ver a partir de

agora quase todos os outros máquina esse nosso exemplo vou pular uma eu vou escolher a outra então eu tenho o amarelo de pulei o amarelo alaranjado ou pegar o laranja vou pular de novo um na coleira ali o vermelho alaranjado e pegar o vermelho Então essas três cores intercaladas elas também formam uma paleta perto Só que essa paleta ela fica um pouco mais dura tá eu não gosto muito de usar esse tipo de paleta que tá aparecendo aqui embaixo Mas pode ser uma opção também e mais uma vez e para qualquer lado ali peguei aqui

embaixo também tá uma uma paleta de cores intercaladas dentro do nosso círculo cromático de cores intercaladas existem três cores intercaladas que são muito famosas que são as cores triádicas as coisas práticas é o seguinte você vai pegar uma cor de referência Como usar o amarelo aqui por exemplo é você vai pular sempre três cores porque ela triádica né então certo lá três cores e vai pegar a outra coisa depois vai pular mais três tirando no mesmo sentido e vai pegar outra cor basicamente isso vai gerar um triângulo equilátero no caso aqui as cores primárias no

caso a gente pegou a cor primária Mas você pode virar para qualquer lado as cores primárias e secundárias são consideradas cores triádicas Terra elas estão simetricamente distribuídas no círculo cromático aqui embaixo também tá uma paleta three a dica que no caso é a minha paleta de cores primárias Mas você consegue girar esse triângulo que tá qualquer lado e gerar outras paletas criativas existe também as cores enquadrado que e são parecidas com as cores triádicas que só que vejo por lá três cores eu vou pular duas cores Então vou pegar lá amarela como referência vejo para

o lado três e direto vermelho eu puro duas e vou direto pro vermelho alaranjado certo vou pular mais duas vou falar o vermelho e o vermelho arroxeado vou pegar o Violeta vou pular mais duas vou pegar um azul esverdeado E aí eu formo meio que um quadrado meio que não eu formo um quadrado né exatamente dentro do meu círculo cromático e olha aqui embaixo a paleta também tá bem legal também interessante ser utilizado tem variações entre cores primárias secundárias e terciárias Então essa é uma maneira quando eu quero usar cores fortes e bem balanceadas outro

tipo de cores que a gente tem também são as cores cítricas a qualquer a dica é conseguir da seguinte maneira você vai escolher qualquer cor perto vou escolher uma cor qualquer aqui Verde por Então você vai achar Qual é a cor complementar desse verde o complementar de verde ou vermelho Beleza agora vai pegar uma outra cor por exemplo peguei ali o laranja você também vai fazer o oposto né o complementar do laranja que é o azul perto então você pegou duas cores eu peguei o verde o laranja e traz em uma paralela né eu cortei

na metade o círculo cromático Agora eu tenho quatro cores eu vou formar um retângulo com essas cores e agora eu tenho também uma palha Olha que legal a gente conseguiu chegar a cores a razoáveis a cores que conversam entre si utilizando cores te táticas as cores de trás dicas quando você escolher por exemplo eu escolhi o verde o laranja né se eu escolhesse o verde e o azul esverdeado ficaria mais simétrica ainda a paleta certo faz suas experiências aí no próximo vídeo a gente vai te mostrar como fazer isso e estão ligando o último a

última forma de trabalhar com cores é a monocromia a monocromia ela não trabalha com várias cores ela trabalha com uma cor só então por exemplo vou escolher uma com qualquer laranja perto você vai pegar essa cor laranja e você vai modificar duas características a Furação e o brilho a gente falou na última aula lá saturação EA luminosidade você alterando essas duas utilizando o SQL por exemplo que a gente viu lá no INSS vai conseguir esse resultado ó Então eu tenho laranja modificando a mais três vezes as características de saturação e luminosidade eu consegui essas outras

cores aqui dá uma olhada na paleta que eu tô colocando lá embaixo a paleta Ela é bem simétrica ela é bem homogênea é bem harmônica e ela é baseada em monocromia também existem vários sites que trabalham com esse conceito no mundo crônico principalmente para Fundos e tudo mais ela cria um efeito que genericamente a gente chama de degradê Fechou então degradê basicamente a gente modificar saturação e luminosidade de qualquer cor seja ela qual for Então é isso meu querido esse minha querida Espero que você tenha gostado desse vídeo e provavelmente Esse é um vídeo que

você vai voltar constantemente Espero que você tenha anotado bastante coisa anote se precisar volta aqui assistir o vídeo de novo porque é importante você entender o que você criar cores harmônicas utilizando o círculo cromático como base no próximo vídeo vou te mostrar que eu vou fazer isso na prática agora a gente sabe que a cor complementar cor análogo a cor quadrática criar dica tem tudo a gente vai aplicar isso utilizando os serviços que estão disponíveis gratuitamente na internet para você beleza então você a gente não pede para esperar no próximo vídeo A Gente Bota a

mão na massa entende melhor essa coisa de Harmonia de cores um grande abraço Bons estudos da nossa tudo bonitinho e a gente se vê na próxima [Música] [Aplausos] [Música] E aí [Música] [Aplausos] [Música]