Hoje, estamos destacando ferramentas e recursos de cores para todos os tipos de projetos, desde todos os tipos de paletas de cores e geradores até a obtenção de contraste e gradientes certos para seus projetos. Esta coleção não está completa, mas sim uma seleção de coisas que a equipe do Smashing considerou úteis e espera que tornem seu trabalho diário mais produtivo e eficiente.
Se você estiver interessado em mais ferramentas como essas, dê uma olhada em nosso adorável boletim informativo por e-mail , para que você possa obter dicas como estas caia direto na sua caixa de entrada!
Variáveis CSS e HSLA
Como você geralmente define as cores em CSS? Com HEX? RGBA? Ou você usa HSLA? Maxime Heckel usou uma mistura de HEX e RGBA, até encontrar um padrão inteligente que o ajudou a limpar a bagunça e aliviar sua base de código. A base: variáveis HSLA e CSS.
HSLA significa Hue Saturation Lightness Alpha, os quatro componentes principais necessários para definir uma cor. Quando você usa cores semelhantes-diferentes tons de azul, por exemplo,-você notará que eles compartilham o mesmo matiz e saturação. Com a abordagem do Maxime, você pode definir uma parte do matiz e da saturação por meio de uma variável CSS e reutilizá-la para definir seus outros valores de cor-para construir uma escala de cores do zero, por exemplo. Um exemplo fantástico de como o CSS pode ser poderoso.
Um gerador de esquemas de cores super rápido
Você precisa criar uma paleta de cores? Uma ferramenta útil para ajudá-lo a fazer isso-e muito mais-é Coolors . No coração do Coolors está um gerador de paleta de cores elegante: para começar, ele sugere uma paleta aleatória que você pode ajustar brincando com os tons ou, se preferir, altere-a completamente introduzindo novas cores.
O Coolors também permite que você escolha uma paleta de uma foto e crie colagens, gradientes e paletas de gradientes. Um verificador de contraste calcula a taxa de contraste das cores do texto e do plano de fundo para você garantir que suas combinações de cores estejam acessíveis. E se você só precisa de um pouco de inspiração, existem milhares de temas de cores esperando para serem explorados também-basta clicar nas cores de sua preferência e os valores hexadecimais serão copiados para sua área de transferência. Divirta-se!
Paletas de cores excessivamente descritivas
Você já pensou em combinar rosa suave em ritmo de caracol com mogno sem lacre e melancia horrível como um esquema de cores para seu próximo projeto? Bem, o que pode parecer um pouco estranho no início, é o conceito por trás do colors.lol , um site de inspiração de cores com “paletas de cores excessivamente descritivas”, como seu criador Adam Fuhrer o descreve.
Criadas como uma maneira divertida de descobrir combinações de cores interessantes, as paletas são selecionadas manualmente no bot do Twitter @colorschemez . O feed gera combinações de cores aleatoriamente e combina cada cor com um adjetivo de uma lista de mais de 20.000 palavras. Escondidos por trás dos nomes incomuns estão, claro, valores reais de cores hexadecimais que você pode usar imediatamente-# FDB0C0, # 4A0100 e # FD4659 no caso do rosa suave em ritmo de caracol e seus companheiros, por exemplo. Uma versão divertida das cores.
Paletas de cores monocromáticas simplificadas
Se você já tentou gerar uma paleta de cores monocromáticas consistente, sabe que essa pode ser uma tarefa enfadonha. Depois de mais uma vez mexer com infinitos comandos de copiar e colar para criar uma paleta legal, Dimitris Raptis decidiu mudar isso. Sua solução: CopyPalette .
O CopyPalette permite criar paletas de cores com facilidade. Tudo que você precisa fazer é selecionar uma cor de base, a taxa de contraste dos tons e o número de variações de cores que você gostaria de ter, e a ferramenta gera uma paleta de cores perfeitamente equilibrada que você pode copiar e colar em sua ferramenta de design. Uma verdadeira economia de tempo.
Escalas de cores para visualizações de dados
Diferentes tipos de visualizações de dados têm necessidades diferentes quando se trata de cores. Ao projetar gráficos de pizza, gráficos de barras agrupados ou mapas, por exemplo, pode ser uma boa ideia escolher uma série de cores que sejam visualmente equidistantes. Isso garante que eles possam ser facilmente distinguidos e comparados com a chave. O Data Color Picker desenvolvido por Learn UI Design ajuda a criar paletas visualmente equidistantes com base em duas cores de endpoint que você especificar.
Para aqueles casos em que você deseja mostrar o valor de uma única variável em sua visualização e, portanto, só precisa de uma escala de cores baseada em uma cor (com um mais escuro variação que representa um valor mais alto e uma cor neutra um valor mais próximo de zero), há o gerador de escala de tom único .
Por último, mas não menos importante, as cores divergentes são mais úteis para visualizações onde você está mostrando uma transição de um extremo através de um meio neutro para um extremo oposto (um exemplo comum é “como Democrata/Republicano é cada estado da U Mapa S ”). O gerador de escala de cores divergentes ajuda você a encontrar a melhor escala para ocasiões como essas. Um trio poderoso para levar suas visualizações de dados para o próximo nível.
Inspiração da paleta de cores do mundo real
Existem muitos sites fantásticos que ajudam você a encontrar paletas de cores inspiradoras. No entanto, depois de decidir qual paleta você gosta, a maior questão ainda fica sem resposta: como você deve aplicar as cores ao seu design? Happy Hues está aqui para ajudar.
Happy Hues oferece inspiração para paleta de cores durante a atuação como um exemplo do mundo real de como as cores podem ser usadas em seu design. Basta alterar a paleta, e o site Happy Hues muda suas cores para mostrar a você como sua paleta favorita se parece em um design real. Inteligente!
Gerador de tons de cores
Outra ferramenta útil para lidar com cores é o gerador de tons de cores que Vitaly Rtishchev e Vlad Shilov construíram. Você pode inserir um valor hexadecimal e a ferramenta mostrará uma série de tons mais claros e mais escuros.
Para personalizar a série de tonalidades, basta ajustar a porcentagem pela qual deseja clarear/escureça a cor original e altere a mudança de saturação. Quando estiver satisfeito com o resultado, você pode copiar os valores hexadecimais de uma cor ou de toda a paleta com um clique.
Color Made Simple
Falar sobre cores pode ser complicado. O que uma pessoa chama de roxo, pode ser amora para a próxima. Mas que cor eles realmente significam? Para evitar mal-entendidos, a equipe de design da Lyft criou seu próprio sistema de cores, que é fácil de aprender para designers e desenvolvedores, levando em consideração a acessibilidade ao mesmo tempo. Eles abriram o código, para que sua equipe também possa usá-lo: diga olá para ColorBox !
Google, mas para cores
Você digita um termo de pesquisa e é apresentada uma lista de links. É assim que os mecanismos de pesquisa geralmente funcionam, certo? Picular é diferente. Em vez de pesquisar sites relevantes, o Picular apresenta as cores que correspondem à sua pesquisa. “Summer”, por exemplo, retornará diferentes tons de azul, junto com alguns amarelos e marrons arenosos e um pouco de rosa. Cada cor é rotulada com seu valor hexadecimal, então se você quiser usá-la em um projeto, basta clicar nela e ela será copiada para sua área de transferência.
Inspiração de tempos esquecidos
Que tal alguma inspiração de cor que seja, bem, um pouco diferente? Trazido à vida por Brandon Shepherd, Color Leap leva você em uma jornada por 4.000 anos de história das cores.
De 2.000 AC até a década de 1960, o projeto apresenta 180 paletas de cores de 12 épocas distintas, cada uma delas representando a linguagem das cores de sua época. Fascinante!
Criando paletas de cores acessíveis
Encontrar a tonalidade ou o tom perfeito de uma cor não é apenas uma questão de gosto, mas também de acessibilidade. Afinal, se faltar contraste de cor, um produto pode, na pior das hipóteses, até tornar-se inutilizável para pessoas com deficiência visual. Um verificador de contraste muito detalhado para ajudá-lo a detectar possíveis armadilhas com antecedência vem de Gianluca Gini: Geenes .
A ferramenta permite que você mexa nos intervalos de matiz e saturação e aplique as paletas de cores a uma das três maquetes de IU selecionáveis. Uma vez aplicado, você pode desencadear diferentes tipos de deficiência visual para ver como as pessoas afetadas veem as cores e, por fim, tomar uma decisão informada sobre os melhores tons para sua paleta. Para usar as cores imediatamente, basta copiar e colar o código ou exportá-los para o Sketch.
Projetando sistemas de cores acessíveis
Obter o contraste de cores certo é uma parte essencial para garantir que não apenas as pessoas com deficiência visual possam facilmente use seu produto, mas também todos os outros quando estiverem em ambientes com pouca luz ou usando telas mais antigas. No entanto, se você já tentou criar um sistema de cores acessível sozinho, provavelmente sabe que isso pode ser um grande desafio.
A equipe em Stripe decidiu enfrentar o desafio e redesenharam seu sistema de cores existente. Os benefícios que ele deve fornecer prontos para uso: passar pelas diretrizes de acessibilidade, usar tons claros e vibrantes que os usuários possam distinguir facilmente uns dos outros e ter um peso visual consistente sem que uma cor pareça ter prioridade sobre a outra. Se você está curioso para saber mais sobre a abordagem deles, a postagem do blog fornecerá informações valiosas insights.
Gerenciando cores corretamente
O gerenciamento de cores é essencial, mas as configurações que você definiu são realmente as melhores para seus ativos e plataformas para as quais você está projetando? Afinal, você precisa confiar no que vê na tela. Não é apenas crucial quando se trata de escolher cores, mas também para avaliar o contraste e a legibilidade.
Para ajudá-lo a melhorar o gerenciamento de cores, a equipe da bjango resumiu tudo que você precisa saber sobre isso . Você aprenderá a escolher o melhor espaço de cores para suas necessidades e quando deve atribuir um perfil de cor e quando é melhor converter para um. Como bônus, o artigo também analisa programas de design populares e como obter o máximo de suas opções de gerenciamento de cores.
Gerador de gradiente CSS e recursos
Gradientes CSS são uma maneira rápida de dar ao seu design um toque fresco e amigável. Uma pequena ferramenta fantástica para ajudá-lo a gerar e implementar gradientes lineares e radiais é o CSS Gradient . Depois de inserir as cores que deseja incluir em seu gradiente, você pode ajustar a posição das transições em um controle deslizante. O código CSS reflete as mudanças em tempo real e pode ser copiado para a área de transferência com apenas um clique.
Mas há mais do que apenas o gerador de gradiente, o site também apresenta conteúdo útil todos em torno de gradientes: artigos técnicos, exemplos de gradientes de projetos da vida real, tutoriais e referências como coleções de tons, amostras de gradientes e mais inspiração. Uma visão abrangente dos gradientes e como usá-los.
Crie gradientes de cores CSS com facilidade
Escolher as cores manualmente para fazer um gradiente de cores requer experiência em design e um bom entendimento da harmonia de cores. Se você precisa de um gradiente para um plano de fundo ou para elementos de IU, mas não se sente confiante o suficiente para realizar a tarefa sozinho (ou se estiver com pressa), o gerador de gradiente de cor que o pessoal da My Brand New Logo criou vai te apoiar.
Alimentado por algoritmos de gradiente de cores, o gerador cria gradientes bem equilibrados com base na cor que você selecionar. Existem quatro estilos diferentes de gradientes que vão do sutil ao efeito madrepérola e um gradiente de cor intenso e profundo. Você pode ajustar o gradiente com controles deslizantes e, quando estiver satisfeito com o resultado, copie e cole o código CSS gerado para usá-lo em seu projeto. Legal!
Gradientes CSS fáceis de usar
Outra ferramenta útil que elimina o problema e torna o uso de gradientes um ato simples de copiar e colar é Gradient Magic , uma galeria de gradientes CSS exclusivos com tudo, desde gradientes padrão a gradientes angulares, listrados, xadrez e burst. Para encontrar o seu favorito, você pode navegar na galeria por estilo e cor. Um ótimo complemento para qualquer kit de ferramentas!
Um caminho para gradientes mais bonitos
Os gradientes geralmente não parecem tão suaves quanto você gostaria que fossem. O problema são as bordas rígidas, especialmente onde o gradiente começa e termina. Para ajudá-lo a fornecer resultados mais bonitos, Andreas Larsen construiu um pequeno plugin do Sketch: Easing Gradient .
O plugin torna seus gradientes tão invisíveis quanto possível para que eles não interfiram com o texto ou interface do usuário que você coloca sobre eles. Você pode instalar o plugin com Sketch Runner ou baixar o pacote via GitHub. A propósito, também há um plugin PostCSS disponível que faz o mesmo, bem como um solução hand-coded .
Explore o poder por trás dos gradientes CSS
Shapy. Escondido atrás do nome bonito, está uma ferramenta poderosa: um editor de forma gradiente criado por Victoria Bergquist. O Shapy permite que você descubra e explore o poder dos gradientes CSS, criando formas e imagens por camadas e movendo gradientes em uma única tag div. Basta usar os controles deslizantes para personalizar o tamanho da tela, tipo de gradiente, interrupções de cor e detalhes da caixa e, quando estiver satisfeito com o que vê na visualização, você pode copiar o CSS com um clique. Prático!
Rainbow Gradients With React
Josh Comeau adora experimentos criativos. Em seu adorável blog pessoal, ele apresenta acordeões com efeitos sonoros, modo confete chamativo, pop-ups inesperadamente amigáveis e muitas outras coisas. Além disso, uma série de tutoriais maravilhosos para fazer todos os tipos de efeitos incomuns com React.
Por exemplo, Josh compartilhou como criou Gradientes de arco-íris mágicos com CSS Houdini e React Hooks (consulte repositório GitHub ). Um pequeno tutorial maravilhoso para fazer seu site ou aplicativo brilhar. Literalmente.
Gere planos de fundo coloridos com alguns cliques
Um gráfico de plano de fundo legal pode chamar a atenção para uma postagem de blog, aprimorar seu perfil de mídia social ou simplesmente atualizar a tela inicial do seu telefone. Para tornar a criação de fundos abstratos e coloridos uma brisa, o projeto de Moe Amaya Cool Backgrounds agora reúne os melhores geradores de fundo JavaScript em um só lugar.
Dicas rápidas para o modo de alto contraste
Projetar para diferentes modos de exibição pode trazer algumas surpresas imprevistas. O modo de alto contraste do Windows, em particular, se comporta de maneira diferente de outros modos de exibição do sistema operacional e substitui completamente as cores criadas por cores definidas pelo usuário. Felizmente, muitas vezes existem soluções simples para a maioria dos problemas do modo de alto contraste.
Em seu artigo“ Dicas rápidas para o modo de alto contraste ”, Sarah Higley compartilha cinco dicas para solucionar bugs do modo de alto contraste. Eles incluem estilos de foco personalizados, lidando com SVGs, usando a consulta de mídia-ms-high-contrast para respeitar as escolhas de cores de um usuário, bem como o que você deve ter em mente ao testar. Um pequeno guia útil. Se você quiser se aprofundar no tópico, Sarah também coletou alguns recursos de leitura adicionais.
Verificador de contraste dos botões
Seus botões têm contraste suficiente? O Verificador de contraste de botão criado pelo pessoal da Aditus ajuda você a descobrir. Insira seu domínio e a ferramenta testa se os botões no site são compatíveis com WCAG 2.1.
Para fornecer resultados realistas, o verificador não testa apenas o estado padrão dos botões mas também leva em consideração os estados de foco e foco, bem como o plano de fundo adjacente. Um detalhe interessante: cada vez que você escaneia uma página, os resultados são armazenados em uma URL exclusiva que você pode compartilhar com sua equipe. Um ajudante precioso.
Tutorial do interruptor de modo escuro
Um interruptor de modo escuro/claro é um bom recurso. Mas como você realmente o implementa? Sebastiano Guerriero orienta você nas etapas necessárias . Sua abordagem mostra como criar um tema escuro para o seu projeto e, em seguida, usar as propriedades personalizadas CSS para alternar para ele de um tema claro padrão quando um atributo de dados específico ou classe é adicionado ao elemento do corpo.
Existem literalmente centenas de recursos relacionados à cor por aí, e esperamos que alguns dos listados aqui sejam úteis no seu trabalho diário-e o mais importante, ajudem você a evitar algum tempo-consumindo, tarefas rotineiras.
Feliz bookmarking, todos!
