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

e esse é mais um vídeo do conteúdo abordado no nosso Capítulo 13 do material em PDF [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS nós estamos na parte de design o juiz anteriores foram muito esclarecedores em relação a cores a gente falou muitas coisas que Psicologia Das Cores a composição das cores Harmonia de cores Já te mostrei como representar uma cor só que agora a gente vai colocar em prática aquele conceito que a gente viu no vídeo anterior a gente pode harmonização de cores e agora vou te mostrar algumas ferramentas muito úteis para o dia a dia de quem principalmente não é designer como nós né a gente tá estudando na parte de programação Você já tem o conhecimento design Provavelmente você já conhece das Ferramentas mais fica de olho Aí talvez você não tenha nem ouvido falar nela agora é importante antes da gente ir para a tela do computador que eu te digo o seguinte não faz sentido você vê esse vídeo com ferramentas práticas se você não viu os vídeos anteriores principalmente o vídeo anterior que fala sobre Harmonia de cores você não vai entender nada você não viu o Paulo esse vídeo aqui ele não vai sumir você vai lá assistir o vídeo anterior é o primeiro vídeo tá me espera ele sente todos os vídeos se você vai conseguir entender o que que é um código de cor hexadecimal é se você viu tudo Tá tudo bonitinho tá tudo anotado nessa caderno vamos usar nossa parte prática interrompemos a sua aula para um recado rapidinho de um dos nossos patrocinadores a plataforma estuda Now e se você já conhece o projeto do curso em vídeo é muito tempo sabe que é plataforma estudou na alta surgiu essa ideia de produção de conteúdo de qualidade para lançamento de cursos profissionais e vão te ajudar desde o iniciozinho para quem não sabe nada de programação até para quem já sabe que é criar por exemplo um aplicativo para celular e o estudo alta não é um projeto gratuito Como é o do curso em vídeo onde a gente disponibiliza cursos como esse que você tá assistindo Mas é uma plataforma que além de alguns cursos do curso em vídeo que podem ser ampliados e alguns até já são Como por exemplo o nosso curso de Responde pai que além das aulas que tem aqui no canal do curso em vídeo tem muitas outras aulas também tem cursos inéditos como por exemplo de linguagens modernas como C Sharp linguagem controle sente e pronto se você quiser saber mais informações sobre astronauta aqui ó nesse código é só apontar a câmera do seu celular você vai para uma página especial e se por acaso estivermos sem vaga na plataforma você pode deixar o seu cadastro lá e a gente te avisa assim que novas vagas surgirem Obrigado estudou na alta pelo Patrocínio e você pode seguir com a sua agora então já estou aqui estou com o Gulu Gulu aberto Abrir o Google você vai primeiro acessar esse site aqui ó color. Adobe. com falar mas eu não tenho assinatura do Be não tem problema o Adobe color ele é gratuita grande parte dele é gratuito você só vai conseguir salvar suas paletas que você não tem uma conta na do B basicamente quando você abre cara olha aí ele já te deu uma sugestão de palito a 40 fica aqui e fica aqui em cima igual fiz durante a gravação das aulas né Foi meio inspirado aqui no Adobe color você não pode clicar em salvar porque você não tá com perfil né A não ser que você queria que faça login e tenha uma conta na dúvida se seja assinante do serviço está dormindo eu sou até assinante mas eu não vou A grande maioria dos alunos não é então não faz sentido se você é assinante é só você ver os manuais lá que ele te ensina como gerenciar suas paletas salvas então basicamente aqui ó primeira coisa você vai ver o modo de cor RGB para monitores ou cmyk que é para impressoras né que a impressora ela não usa o Red Green Blue ele usa o ciano Magenta amarela e preto que aqui que a chave que a cor de Chaves e aqui o hsv que é Rio saturation valor a uma outra forma de representar e leve que eu sinceramente não faço ideia do que seja a gente vai deixar aqui marcado RGB tá aqui ó laço círculo cromático agora agora que que é isso se colocar mais você pulou o vídeo anterior expliquei quer círculo cromático expliquei aqui Quais são as cores primárias são o amarelo o vermelho e o azul que são as principais a e mostrar também as cores secundárias que são laranja o verde e tem mais o Violeta então sim você tá você viu da aula anterior aqui quando em algumas delas estão com ligeiras modificações aqui mas não tem grandes problemas não é a primeira coisa que a gente vai fazer a gente pode conversar aqui ó a trabalhar por exemplo Cortei a dica a gente viu por ter a dica a gente viu Cor análoga na a gente viu o composto complementar Cadê complementar aqui a complementar como eu falei totalmente oposta e que cria um grande contraste a gente viu ó se eu colocar o amarelo você quer com esse sombras né Deixa eu botar aqui com os de luxo Se eu colocar aqui o amarelo o extremo oposto é o Violeta porque a gente viu ele já criou uma paleta aqui para mim uma sugestão de paleta se você quiser você pode ir configurando aqui ó alguma associação monocromática tá vendo para você conseguir ter uma harmonização melhor e aquilo que eu te falei uma paleta de cores normalmente é de três a cinco cores e excluindo Branco e Preto que tem todo lugar né Principalmente em sites mas ele te dá aquela sugestão de paleta disse bom e você pode perceber aqui ó ele também já te dar o código hexadecimal de cada uma das cores cara olha isso é só você copiar viu aqui ó clicou duas vezes 13 né se você quiser três vezes já pega a hashtag se você não clicar ele só pega o código de 6 dígitos aqui que vão de 0 até o f como a gente viu na aula anterior então beleza tão complementar por exemplo é cores análogas são aquelas coisas que se parecem muito tá vendo olha o que ele faz ó ele cria um degradê sem muito para o contraste entre eles bem que a última a primeira e a última tem um contraste razoável mais é isso aquilo que você anotou no vídeo anterior a cores análogas são aquelas que se parecem aqui ó tá na prática um negócio você consegue fazer modificações aqui ó de tonalidade deixando ela mais clara mais saturada mais saturada ou menos saturada também tá então você consegue ter essas coisas você consegue por exemplo cores triádicas aquilo que eu fiz da mesma forma um triângulo aqui você consegue a qualquer momento girar aqui ó qual o pau do seu cliente a essa daqui aí ele faz o código que ou por exemplo se o cara botar tem um código um b8fe quatro de falar deu enter ele vai pegar a cor que seu cliente não se você recebeu um código de cor é só você digitar ele na tua cor primária aqui e ele já faz a paleta baseado nisso cara isso aqui é sensacional isso aqui é muito útil tá e você consegue sem problema nenhum cara sem esforço sem nenhuma dedicação de estudo você consegue criar paletas aqui e interessantes claro você não pode salvar nesse caso aqui mas você consegue vir aqui em copiando essas cores né vai vai é só a sua paleta oficial você vai fazer aqui a gente já vai falar sobre o Palito oficial dividir complementar e aqui ó eu vou pegar as cores análogas aqui ó a coisa que tem a ver uma com umas com as outras Mas eu também vou pegar um contraste aqui pra gente falou assim análoga mais uma de contraste aqui ó as análogas aqui essas duas aqui do as duas aqui ó são análogas essa aqui também e essa aqui é a cor de contraste tá certo aqui você clica aqui para você definir qual é a cor de Base a minha cor de base se eu defino essa como cor de base ele vai criar o contrário seu d-fine essa daqui ó essa daqui da semi a cor de base aí criança eu contrário Tá vendo você tem a certinho aqui tá definir qual é a sua cor de base para ele fazer o cálculo das outras cores exatamente como a gente tinha feito na aula anterior e pode dividir complementar duas vezes também tá vendo que aí fica meio aquela quadrática você pega duas complementares e mais uma é você tem a de quadrado né aquela que a gente fez na hora que formam um quadrado enfim você consegue harmonizar as cores criando paletas muito interessante só que o Adobe Cola não para por aqui cara dá uma olhada só ainda tem mais recurso para te mostrar outro serviço está é uma outra coisa que pode acontecer o seguinte o vamos imaginar aqui ó atrás da minha cabeça eu tenho ao longo da hostnet aqui Aí o cara da Rússia Net chegou lá falou assim ah eu quero criar uma paleta para as minhas propagandas enfim para os meus materiais a minha lo é isso essas aqui me as cores oficiais tranquilo é só você vir aqui ó extrair tema isso aqui é sensacional isso dentro da dor de colo dentro do criar você vem aqui Extra sistema Aí você pega qualquer aqui vou pegar essa logo e vou arrastar para cá ele já pegou as paletas Ele já pegou aqui para mim e eu consigo organizar que a paleta Olha isso essa aqui é a planeta-anão mas não ficou tão bom aí você arrasta aqui a bolinha ó exatamente para o Tom que você achar que a mais ó esse aqui tá mais para cá esse aqui tá mais para cá enfim você consegue ir criando o degradê com tons que estão nessa e marca Olha isso aqui a gente tá com dois tons bem parecidos alterado aqui olha isso que sensacional cara E aí você vai fazer a mais ca de acordo essa daqui já tá aqui ó é só você vir aqui o disco de cores já veio a paleta para cá e você já consegue pegar todas as cores aqui perto então olha isso que legal ele já viu aqui qual foi o tipo a paleta que foi escolhida se você quiser montar um degradê sei lá deixou voltar aqui com o negócio por algum motivo eu quero montar um degradê você fica aqui ó extrair Gradiente ele vai montar um degradê baseada nas cores a gente vai ver vídeo como montar um degradê no site na CSS você pode escolher aqui Quantos limites eu quero a cinco limites ele vai montar cinco limites para você que ele vai botar aqui eu consigo ir montando Quais cores vão estar no meu degradê e aqui ó tá tudo todos os códigos hashtag 232 f82 se você clicar aqui ele já Copie né é um pouquinho diferente do outro eu preferia que o outro fosse assim de você né sua ver aqui clicar aquele da control c mas enfim dance tudo é perfeito mas tá lá cara você consegue montar um um degradê baseado em ainda tem aqui ó as características que eu posso botar as cores mais escuras o mais colorido ovo que tem mais brilho que é mais suave enfim você consegue montar é de cores aqui é extraindo da logo do seu cliente caso seja necessário isso é simplesmente sensacional mas Guanabara eu não tenho um cliente eu não tenho logo eu queria uma uma paleta uma sugestão de paleta também tenho você vem aqui ó aí explorar por aqui em cima aí ele vai aparecer um monte de coisa mas você vem aqui em exibir você pode clicar temas de cores e eu posso botar o mais usado Ele vai me dizer quais são as paletas mais utilizadas aqui olha que sensacional então apresentar essa daqui gostei muito dessa você clica nela e você tem cada um cada uma das cores é que quem é o autor da paleta todas as cores aqui feitas automaticamente fica isso é muito maneiro Você pode até pessoal copiar como o CSS você copiou deixa eu abrir até um editor de texto de simples aqui eu ver o que que ele copiou é um novo documento vou colar aqui olha isso ele já te deu as cores já pré copiadas no formato CSS inclusive com h s l a a enfim perfeito essa ferramenta Ela É Sensacional e Eu Gosto bastante dela anota aí só para você voltar só clicar aqui em voltar Adobe color você pode vir aqui em casa pode vir aqui em tendências você quiser buscar inspirações e tudo mais você pode ver aqui em tendências ele vai te mostrar algumas fotos mais modernas inclusive embaixo mostrando a paleta vendo a paleta extraída de algumas fotos ditas modernas né interativa algumas peças de Publicidade inclusive com a paleta aqui para te inspirar então se você tem uma quantidade muito grande de material para consumir aqui na o dobro Cola muitos alunos sempre entrar em contato comigo dizendo assim armas Guanabara às vezes sai um vídeo novo Augusto novo não consegui vídeo eu não sou avisado pelo Youtube tem algum outro jeito de você me avisar pois agora tem é só você acessar ó t.

me/consegui vídeo esse é o nosso link do canal mas não ao canal do YouTube é nosso canal no telegram Eu costumo sempre dizer o telegram tipo um WhatsApp só que E é só você acessar esse link confirmar a inscrição no nosso canal isso é gratuito e você vai receber sempre notificações daquilo que a gente vai lançar essa é a maneira mais segura de se manter sempre atualizado o atualizada com as novidades do curso em vídeos só que eu vou te dar um outro exemplo além do Adobe color que foi que eu recomendo aí no material em PDF eu vou te indicar uma outra ferramenta que essa daqui ó paletton. com olha como é que escreve a p a l t o n. Com você acesso paletton.