Como criar paletas de cores para web design e UI (no Figma)

1. Boas-vindas ao curso: Se você já teve dificuldade em escolher cores que realmente funcionassem juntas ou acabou com designs que parecem um pouco errados, esta aula ajudará Em apenas alguns minutos, passaremos de uma única cor para uma paleta completa, equilibrada, versátil e pronta para uso em um design real Todo mundo. Eu sou Adi. Bem-vindo a esta breve aula sobre como criar suas próprias paletas de cores para web e design de interface Começaremos explorando as harmonias de cores com ferramentas como o Adobe Color Em seguida, começaremos a criar tonalidades e sombras diretamente na Figma Por fim, aplicaremos nossa paleta a um layout pronto que você possa vê-lo em ação imediatamente Não precisa ser um especialista em teoria das cores. Vamos mantê-lo prático e prático e, no final, você saberá exatamente como criar e aplicar suas próprias paletas com confiança Incluí um arquivo inicial na seção Projeto de classe com tudo o que você precisa Instruções, um espaço para sua paleta e um layout de amostra com o qual você pode jogar Tudo bem, vamos mergulhar e começar a criar nossa paleta. 2. Entendendo a harmonia das cores: Antes de entrarmos no Figma, vamos falar sobre harmonias de cores Uma harmonia de cores é basicamente um conjunto de regras para escolher cores que naturalmente funcionam bem juntas Você provavelmente já viu termos como complementar, análogo, triádico Esses são basicamente atalhos para criar paletas balanceadas Cada um tem seu próprio uso. A cortesia é ótima quando você quer contraste forte, como destacar uma ação de cota Analogous cria esquemas unificados calmos, perfeitos para quando você deseja usar cores semelhantes entre si E o triadic oferece uma variedade, geralmente usada em designs divertidos e mais coloridos, designs divertidos e mais coloridos Agora, você não precisa memorizar tudo isso. A beleza é que ferramentas como Adobe Color fazem o trabalho pesado por você. Então, vamos entrar e gerar rapidamente algumas paletas. Posteriormente, podemos refinar o Figma. Antes de começarmos, deixe-me mostrar com o que estamos trabalhando. Então, aqui, eu tenho uma cópia do arquivo inicial que você pode baixar seguindo os links na descrição da classe E lá dentro, encontraremos algumas instruções basicamente sobre o que precisamos fazer junto com alguns recursos. E então temos um layout prático que podemos usar para aplicar nosso esquema de cores e , em seguida, algumas molduras adicionais para definir nossas cores. Temos uma para a cor primária ou para a cor da marca. Temos um para o cinza e outro para a harmonia. Falando em harmonia, deixe-me mostrar uma ferramenta que eu uso o tempo todo para criar paletas de cores, que é o Adobe Assim, você pode acessá-lo acessando color.adobe.com e clicando em Criar Aqui, você basicamente escolheria sua cor base. É essa no meio, e você pode clicar aqui para mudar a cor. Não sei, talvez você queira um verde mais escuro, algo assim E depois de selecionar essa cor, você precisa ir até aqui onde diz harmonia de cores e escolher entre as várias harmonias. Então, por padrão, temos uma harmonia análoga selecionada, e isso basicamente cria uma paleta de cores para cores que estão próximas umas das outras na paleta de cores Mas se mudarmos isso, por exemplo, para um monocromático, isso é totalmente diferente Agora, ele nos dá vários tons dessa cor. Você pode ver que eles estão em linha reta. Mas se mudarmos isso para tríade, agora isso escolhe cores de pontos eqüidistantes na paleta de pontos eqüidistantes na Temos essa laranja bem pastel. Temos esse tipo de cor magenta ou lavanda, então é totalmente diferente, E você verá que, se eu mudar a cor aqui na roda de cores, as outras cores são atualizadas automaticamente mantendo basicamente o mesmo algoritmo. Então, também temos cortesia. Isso é muito usado. Isso basicamente seleciona cores opostas na roda de cores E então você tem alguns adicionais, divididos gratuitamente. Você tem um composto quadrado. Na verdade, não vamos abordá-los agora, mas fique à vontade para brincar com eles. Portanto, essa é uma forma de gerar uma paleta de cores com base em uma cor inicial Outra forma, você pode clicar em Explorar, e o Adobe Color tem várias paletas de cores em seu Você pode pesquisar, por exemplo, comida, e isso lhe dará paletas de cores relacionadas à E há até paletas de cores derivadas de uma foto específica como esta aqui Portanto, esse é um ótimo recurso para encontrar cores. Outro que eu poderia recomendar é coolers.co. Você pode iniciar o gerador aqui e simplesmente pressionar a barra de espaço, e isso gerará uma paleta de cores para você, embora, até onde eu sei, isso realmente não permita que você crie paletas de cores com base em Então, isso é algo que você tem em mente. Vamos voltar ao nosso projeto e realmente criar uma harmonia para isso. E a cor com a qual vou começar este projeto é essa laranja. É f97 400. É uma cor que eu acho que funciona bem para esse tipo de projeto. Obviamente, cada cor da marca deve ser exclusiva desse projeto específico, mas para esta demonstração, vou usar essa laranja. Então, na verdade , vou copiar isso e voltar ao Adobe Color e criar uma paleta de cores. Vou clicar aqui. Vou colar essa cor e escolher cores complementares porque as cores complementares geralmente funcionam muito bem juntas. Eles se complementam, certo? E também oferecem um alto grau de contraste entre si porque estão nos lados opostos da roda de cores. Então, isso é exatamente o que vou usar neste projeto, e eu simplesmente vou clicar para copiar essa cor e colá-la no meu arquivo Figma Copie isso, cole aqui, e então eu vou pegar este e esse, e eu tenho minha harmonia pronta. Então eu tenho minha cor primária e minha harmonia. Agora, vou usar todas essas quatro cores complementares? Não necessariamente, mas eu os tenho para o caso de precisar deles, certo? Eu tenho algo com que trabalhar. E acho que esse deve ser o primeiro passo no processo de design. Descubra a cor principal da sua marca e crie uma harmonia com base nela. E que harmonia, que tipo de harmonia realmente depende do projeto. Na maioria dos casos, eu sugeriria uma aposta gratuita porque é, eu acho, a aposta segura, mas existem outros tipos à vontade para percorrê-los e escolher aquele que você acha adequado para o seu projeto. Tudo bem. Agora você tem um conjunto básico de cores para trabalhar. Em seguida, tornaremos essa paleta mais versátil adicionando tons e sombras Portanto, funciona com planos de fundo, sotaques e tudo 3. Criando tons e nuances: Ter algumas cores principais é ótimo, mas em designs reais, você precisa de variações mais claras e mais escuras para profundidade, hierarquia e contraste É aí que entram os tons e tonalidades, e você pode criá-los com muita facilidade no Figma ou na web. Deixe-me te mostrar. Então, primeiro de tudo, deixe-me explicar tons e tonalidades. É muito simples. Uma tonalidade é uma variação mais clara de uma cor. Uma sombra é uma variação mais escura. É como adicionar branco ou preto a essa cor específica. E há muitas maneiras de criar tons e sombras Deixe-me mostrar uma maneira muito rápida no Figma, usando o modo de cores HSL Então, se selecionarmos um elemento e abrirmos o preenchimento, podemos clicar aqui e, por padrão, você provavelmente selecionará hexadecimal É o formato de cor que todos conhecemos. Mas se mudarmos para HSL, isso significa saturação de matiz E essa é outra forma de representar uma cor. Nesse caso, 28 é a tonalidade, e isso é controlado por esse controle deslizante aqui Basicamente, ele nos mostra a cor pura que estamos usando. Esse valor significa saturação, então, quão saturada é essa cor E você verá que, se deixarmos isso de lado, a cor fica mais pastel E se descermos até o fim, fica apenas uma cor cinza, certo? Vamos manter isso em 100 por enquanto. E então o terceiro parâmetro aqui é leveza. Agora, a luminosidade controla o quão clara ou escura é uma cor. E essa é sua principal ferramenta para criar tons ou sombras. Então, se você começar com a cor base, que no nosso caso, é essa, e abrir o controle deslizante, estará criando versões mais claras dessa cor porque basicamente moverá o controle deslizante para o Se você estiver selecionando a mesma cor, mas movendo o controle deslizante para baixo ou diminuindo a luminosidade, na verdade está criando versões mais escuras dessa Então, assim, sim, criamos uma tonalidade dessa cor base e também criamos uma tonalidade dessa cor base Agora, como eu disse, há muitas maneiras de fazer isso. Você pode, por exemplo, selecionar ou copiar a cor, acessar a web e encontrar várias ferramentas como essa. Por exemplo, crie tints shades.com. Aqui, você basicamente insere o código hexadecimal e clica em Criar tons e sombras. E isso criará várias variações de sua cor, e você pode simplesmente clicar para copiar esse código de cores. E isso funciona em formato hexadecimal. Há também uma ferramenta Noel Delgado que eu uso com frequência, chamada Shadow Lord, que funciona exatamente da mesma maneira Você cola na sua cor. Você seleciona quantas etapas deseja aqui. Basicamente, talvez você queira incrementos de 5%, e isso gerará várias tonalidades e tonalidades para o seu projeto No entanto, se você quiser a maneira mais fácil, pode usar um FigmaPlugin, e há vários plug-ins disponíveis Eu vou te mostrar apenas um deles. Então, vamos abrir as ações aqui. Vamos mudar para plug-ins e procuraremos tonalidades. E isso lhe dará várias sugestões de plug-ins da comunidade. E aqui, eu vou escolher Hue Hue. Ok, eu vou salvar isso e depois vou executá-lo. E o plugin se parece com isso. Vou clicar aqui. Vou usar o conta-gotas, selecionar minha cor primária Eu vou escolher quantos tons e tonalidades eu quero. Cinco é bom o suficiente para mim. Orientação vertical, e eu vou clicar em gerar cores. E isso gera um monte de ou, neste caso, cinco tons e cinco tons da cor que eu selecionei, que está destacada aqui no meio Essa é basicamente a cor base. Então, vou manter isso de lado por enquanto. Agora, ao criar paletas de cores, é muito importante que você também tenha uma para cinzas, porque há diferentes variações de uma cor cinza em um Por exemplo, você pode usar, tipo, um cinza escuro para texto. Você pode usar um cinza bem claro como borda ou plano de fundo, certo? É por isso que é muito importante ter várias cores de cinza para escolher. Agora, como você cria esse cinza? Basta abrir o seletor de cores e fazer isso, basicamente Você poderia fazer isso, mas o que eu gosto de fazer é criar uma cor cinza baseada na cor primária real. Está bem? Tem um pouco dessa cor primária, e descobri que isso me dá os melhores resultados. Então, aqui está o que eu vou fazer. Vou selecionar essa caixa cinza aqui, vou pressionar I na Figma e vou provar minha cor primária Em seguida, vou abrir meu seletor de cores e vou fazer o seguinte Em primeiro lugar, vou reduzir a luminosidade, então estou basicamente criando uma versão muito escura dessa cor Acho que cerca de 10% funciona muito bem. E então vou reduzir a saturação, basicamente removendo muita cor disso E eu vou parar para cerca de quatro. E acho que vou realmente aumentar um pouco a luminosidade, só para que possamos ver isso um pouco melhor Ok, então eu estou muito feliz com isso. Essa é a minha cor cinza. Portanto, a próxima etapa é gerar alguns tons e tonalidades com base nisso Então, vou ligar o plugue novamente. Vou pressionar Control K ou Command K se você estiver em um Mac. Vou escolher Hue Hue, experimentar essa cor cinza e gerar Isso basicamente gerará tons e tonalidades para minha cor cinza E vou deixá-los de lado, por enquanto ao lado dos meus tons e tonalidades principais Agora nossa paleta parece completa. Temos cores claras, cores escuras e tudo mais. Vamos testá-lo aplicando-o a um layout real. 4. Aplicando sua paleta a um layout: Essa é a parte divertida, pegar sua paleta e fazê-la funcionar em um design real Vou aplicar a minha ao layout no arquivo inicial, que você possa ver como eu uso cada cor para diferentes funções, como planos de fundo, texto e chamadas à Com isso dito, vamos começar. Começarei aplicando cores ao texto pois isso forma a maior parte do conteúdo da nossa página. Portanto, o plano é aplicar um cinza escuro a todos os títulos, um cinza ligeiramente mais claro aos outros elementos do texto Então, vamos voltar à nossa paleta. Essa é a cor base da qual começamos. Vamos usar esse , por exemplo. Então, vamos copiar isso, e eu vou selecionar todos os títulos e vou colar nessa cor A seguir, vamos ver os elementos de texto regulares. E outra coisa que vou fazer é copiar esse elemento das cores e tonalidades aqui e simplesmente colá-lo dentro da moldura cinza E isso só vai me dizer quais cores acabei usando no meu design. Na verdade, vamos começar com a cor cinza base. Vamos aplicar isso a um elemento e ver como ele se parece. E aos meus olhos, acho que parece bom. Vamos tentar com uma versão um pouco mais leve, talvez essa. Vamos aplicá-lo aqui. E acho que isso me dá um contraste um pouco melhor. Vamos também selecioná-los e aplicar essa cor. Sim, acho que isso me dá um contraste muito melhor entre o elemento de texto real e o título. Além disso, uma coisa muito importante que preciso verificar aqui é o contraste de cores para acessibilidade. Então, isso é realmente muito fácil de fazer Figma. Se eu selecionar um elemento com uma cor de preenchimento e clicar nele, obtemos esse gráfico aqui no seletor de cores, basicamente Se a cor selecionada estiver nessa área do seletor de cores que não está pontilhada , essa cor específica tem contraste de cor suficiente em comparação com o plano de fundo para que atenda aos padrões de contraste, neste caso, A. E esses são para fins de acessibilidade, certo? É para pessoas com deficiência visual que têm dificuldade em decifrar texto quando não há contraste suficiente E você pode realmente ver que temos uma contraste de 7,45 para um Não vou abordar os detalhes disso agora, mas só para você saber, é uma verificação importante a ser feita. Portanto, lembre-se de fazer isso sempre. Ok, vamos ver onde mais eu posso aplicar essa cor de texto. Bem, eu poderia aplicá-lo aqui mesmo nessas guias, certo? Então selecione isso e aplique-o lá. Opa. Assim, talvez até este porque meio que pertence à mesma categoria de texto que os outros. Eles terão cores diferentes porque são uma espécie de emblema que precisam se destacar um pouco mais Mas o texto sobre o tempo de cozimento e a dificuldade da receita devem ser coloridos da mesma maneira. Então, vou aplicá-lo a eles também. Agora, como usei essa cor para texto, então 553, vou copiar esse elemento e colá-lo no meu cinza aqui Ok, vamos terminar de aplicar o cinza. Temos alguns outros elementos de UA que deveriam usar algumas das cores cinza. E aqui, estou falando, em primeiro lugar, das bordas desses elementos desses botões aqui, das próprias cartas. E também precisamos descobrir uma cor de fundo para esse menu suspenso. Então, vamos começar com as fronteiras. Vamos escolher a cor mais clara que temos aqui, que no nosso caso é DD, DC DC E vamos selecionar esses quatro elementos e alteraremos a cor do traçado para esse elemento ali mesmo. E vamos dar uma olhada rápida que parece ótima para mim. E vamos selecionar esses elementos aqui e alterar a cor do traçado. E eu acho que eles também parecem bons. Então, vamos continuar com isso. Então, deixe-me copiar isso. Vou colar só para saber quais cores usei. E agora vamos ver esse elemento suspenso, certo? Então, vou selecioná-la e pressionar I, e vou tirar uma amostra dessa cor. Então, vamos ver como isso parece. Isso parece muito bom. Talvez eu queira que isso seja um pouco mais leve. E se olharmos na paleta de cores que geramos, na verdade não temos uma versão mais clara disso E nesse caso, poderíamos, você sabe, regenerar o conjunto de tons e tonalidades dessa cor e escolher mais etapas, basicamente, ou podemos simplesmente criar nossa própria Então você pode fazer isso totalmente. Você pode selecionar isso. Você pode abrir o preenchimento de cores aqui mesmo, e podemos trabalhar no modo HSL, exatamente como mostrei antes, e podemos simplesmente aumentar a luminosidade até que ela chegue bem perto de ser branca Então 94, no meu caso, cria uma cor boa o suficiente para esse fundo específico. Então, estou feliz com isso, e vou simplesmente copiar essa cor de preenchimento e adicioná-la aqui. Vou colar esse valor e aplicá-lo a esse elemento também. Então é isso para aplicar os cinzas. Nosso layout de prática agora parece totalmente diferente do que tínhamos antes, porque cuidamos de colorir a tipografia, as bordas e todos os elementos que basicamente precisavam de uma cor cinza Agora, vamos seguir em frente e começar a aplicar nossa cor primária ou de marca. E deixe-me dizer isso desde o início. Isso deve ser usado com moderação, certo? Deve ser mais uma cor de destaque, não presente em todos os lugares do seu design Então, com isso em mente, vamos selecionar a cor principal da marca e ver onde podemos aplicá-la como está, diretamente. E do meu ponto de vista, um bom lugar para fazer isso é aplicá-lo a esses ícones, certo? Então, vou clicar duas vezes e clicar duas vezes até selecionar a moldura certa e simplesmente substituirei a cor preta aqui. Onde diz cores de seleção, vou apenas colar minha cor primária. E isso terá como alvo apenas os elementos, os ícones, basicamente, aqueles que estamos usando preto. E eu vou fazer o mesmo aqui e vou fazer o mesmo aqui. E aqui. Então, ao fazer isso, agora temos um pouco dessa cor de destaque em nosso design, e isso faz com que tudo pareça mais coeso Mas agora vamos verificar os outros elementos que precisam de nossa atenção. E esses são esses dois emblemas, onde diz jantar, italiano ou almoço, mediterrâneo Eles também podem usar essa cor primária. Mas o fato é que, se os selecionarmos e optarmos por usar toda a cor da marca neles, eles se destacarão demais. Eles vão chamar nossa atenção para essa seção em vez desta seção aqui, onde diz ver receita. Essa deve ser a chamada ação, certo? Esse deve ser o material em que as pessoas clicam. E ao aplicar a cor completa aqui, estamos chamando muita atenção para essa área. Então, o que precisamos fazer é suavizar um pouco mais essas cores. Como fazemos isso usando tons e sombras? Então, voltaremos à nossa lista de tons e tonalidades. Vou selecionar a cor mais clara, a tonalidade mais clara dessa E vou aplicá-lo como pano de fundo desse elemento. E isso parece ótimo para mim. Não é muita cor, mas é o suficiente para tornar todo o design mais coeso Agora, para o texto real, bem, que tal pegar um tom dessa cor. Então essa é a base. Vamos pegar este, por exemplo, vamos colar isso e ver como fica, selecionar os dois e colar. E eu acho que isso parece muito bom. Não é como preto. É apenas uma versão mais escura da nossa cor primária. E eu acho que parece muito bom. Então, vamos aplicar isso aos outros elementos. Então, primeiro de tudo, deixe-me selecionar os outros elementos e vamos ver se podemos encontrá-los. É esse aqui. Assim. E então, para o texto, vamos selecionar esse. E enquanto pressiono Control ou Command e Shift, posso simplesmente clicar para selecionar todos esses elementos, colar a nova cor e pronto a cor da marca. Agora, o elemento final ao qual precisamos aplicar cores é esse botão de visualização da receita. Então, o que podemos fazer aqui? Bem, vamos lembrar o fato de que temos uma harmonia que está pronta para nós e que não usamos. Mas, na verdade, eu quase esqueci que, como usamos alguns tons e tons dessa cor primária, vamos selecionar isso e copiá-los para a moldura de cores da nossa marca principal, só para sabermos quais cores usamos em nosso design OK. Agora, de volta à harmonia complementar. Vamos pegar essa cor, copiá-la e usá-la para os botões. Então, vou selecionar isso e vou substituir o preto puro por essa cor. E logo de cara, isso é muito claro. Está muito claro. E como é muito claro nesse fundo branco, ele não tem contraste suficiente. Se fizermos uma verificação rápida aqui, você verá que o seletor de cores está dentro da zona pontilhada e não estamos passando pelo padrão de contraste DA Então, uma coisa que você pode fazer no Figma é clicar nesse botão e mover automaticamente o seletor de cores para a primeira cor que atenda ao primeira cor que atenda Como alternativa, você pode criar tons e tonalidades para essa cor e depois escolher uma delas Na verdade, vamos selecionar essa cor que criamos com nossa harmonia e ver como ela ficará. Então, vamos realmente selecionar isso, alterar o traçado e a cor do texto. E se olharmos para o seletor de cores aqui, você pode ver que agora temos um contraste de cores bom o suficiente para esses elementos Então, vamos selecionar essa seção inteira e vou substituir essa cor azul brilhante por essa. E terminamos. Vamos dar uma olhada final: essa é aparência atual do nosso layout. Temos tons de cinza aplicados à maioria dos elementos, incluindo texto. Em seguida, espalhamos algumas das cores primárias da marca como acentos em todo E usamos a cor bruta nesses ícones, mas também os tons e tonalidades desses emblemas aqui E para a ação principal da Qualta, usamos a cor complementar que obtivemos da nossa harmonia E assim, sua paleta não é apenas um conjunto de cores É parte de um design funcional real. Começamos com uma única cor. Criamos uma paleta completa usando harmonias, tonalidades e tonalidades e a aplicamos um layout para ver como tudo funciona Essas mesmas etapas funcionam para qualquer projeto de design, esteja você criando um site, uma APUI ou até mesmo ativos de marca. Quanto mais você praticar a criação de paletas como essa, mais rápido conseguirá escolher cores que funcionem perfeitamente juntas Agora é a sua vez. Baixe o arquivo inicial usando o link na descrição da classe, crie sua própria paleta usando as técnicas abordadas e aplique-a ao layout fornecido Você pode seguir exatamente minha abordagem ou torná-la inteiramente sua. Isso depende de você. E se você quiser um desafio extra, tente criar uma versão clara e uma versão escura usando a mesma paleta Quando terminar, compartilhe seu trabalho na Galeria de projetos de classe. Eu adoraria ver sua opinião sobre isso. E se você gosta dessa aula, confira minhas outras aulas do Skillshare para aulas mais rápidas práticas de web design Tudo bem. Obrigado por assistir, feliz design, e nos vemos na próxima aula. Tchau por enquanto.