Geradores de paletas para auxiliar o web designer. Geradores de paleta para ajudar um web designer Como um gerador cria cores

Um dos componentes importantes do trabalho de um web designer é criar uma paleta, selecionando cores que combinem harmoniosamente entre si. O processo é bastante complexo e requer uma abordagem criativa. Existem vários recursos que podem tornar o trabalho com cores muito mais fácil.

Recentemente você pode ter lido um artigo detalhado sobre. Um pouco antes publiquei uma nota semelhante sobre ferramentas de seleção com uma revisão do Kuler e do ColorBlender. Hoje resolvi ampliar o tema e disponibilizar um pouco mais de opções de escolha de paletas de cores para o site.

ColoRotate

A ferramenta ColoRotate permite escolher os esquemas de cores mais adequados entre um grande número de propostas prontas ou criar os seus próprios. Ao escolher cores em diferentes locais em uma paleta 3D rotativa, você pode obter combinações baseadas em harmonia ou contraste, trabalhar com tonalidades, brilho, saturação e misturar cores diferentes. Você também pode extrair cores de imagens finalizadas. Existe uma versão para iPad, a sincronização com o Photoshop está disponível. Serviço muito bom.

Adobe Color CC

A paleta Adobe Color CC e o gerador de esquema de cores permitem:

• experimente combinações de cores na roda de cores interativa (estão disponíveis 7 tipos de sistemas de cores);
• gerar temas de cores usando estilos predefinidos;
• crie esquemas de cores usando cores de uma fotografia ou qualquer outra imagem pronta;
• compartilhe seu trabalho e conheça outras pessoas, inspirando-se nelas.

Os temas de cores criados podem ser salvos em aplicativos para PC ou dispositivos móveis, bem como na seção “Meus Temas” do site.

DeGraeve

O site DeGraeve oferece uma variedade de ferramentas, incluindo um gerador de esquema de cores baseado em imagens pré-fabricadas. Basta encontrar uma imagem na Internet com um esquema de cores interessante, carregar a URL dessa imagem na linha apropriada do site e clicar no botão de geração de paleta. Após alguns segundos, o programa decomporá a imagem em 10 cores primárias, 5 suaves (opacas) e 5 brilhantes (vibrantes), atribuindo a cada uma seu próprio código. A paleta gerada é conveniente para usar ao trabalhar no design de um site;

Contraste-A

Com o slogan “Encontre uma combinação de cores acessível”, Contrast-A foi projetado para ajudá-lo a criar paletas personalizadas enquanto experimenta cores correspondentes. O programa é baseado em um guia sobre compatibilidade de cores do conteúdo da web (texto e fundo). Para trabalhar com isso, é desejável conhecimento básico sobre o tema.

O serviço permite selecionar 2 cores na paleta e avaliar como ficarão juntas quando usadas como texto e fundo. Além disso, são demonstrados resultados para visão normal de cores e várias formas de daltonismo.

ColorZilla

Aplicativo ColorZilla para Firefox (também disponível para Google Chrome) para ajudar webmasters e designers gráficos a trabalhar com cores. Será útil tanto para iniciantes quanto para usuários avançados. O programa realiza uma análise de cores de qualquer ponto e de qualquer página do navegador, e extrai as cores necessárias para utilização em outras aplicações. Definir a paleta de cores da página, selecionar cores de um conjunto predefinido, salvar aquelas que são mais utilizadas como parte da paleta do usuário - esta é a gama de suas capacidades.

Picaculoso

Pictaculous é outro gerador de paleta de cores baseado em imagens prontas. Você só precisa fazer upload de uma imagem selecionada de no máximo 500 KB para o site e sua análise de cores começará imediatamente. Abaixo do resultado com o esquema de cores da imagem, são exibidas mais uma dezena de paletas, mas já criadas manualmente, por membros das comunidades de recursos Kuler e COLOURLovers. Eles também podem ser usados ​​como esquema de cores para o site que está sendo desenvolvido. Você pode enviar o resultado para seu e-mail e compartilhar nas redes sociais.

Se você conhece algum outro gerador de paleta de cores, compartilhe os links nos comentários.

A cor é amplamente utilizada no design - permite “reviver” o conteúdo - criar uma conexão semântica entre os elementos, preencher o trabalho com emoções e humor. Designers iniciantes escolhem cores aleatórias, mas existem maneiras de usar as cores de maneiras mais significativas. Consideremos 4 desses métodos, organizados de acordo com o princípio do simples ao complexo.

1. Use uma escala conhecida

O site brandcolors.net contém mais de 500 combinações de cores de marcas famosas. Yandex, Google, Burger King usam a mesma paleta em todos os seus produtos. Essas marcas e suas cores são familiares e amadas por muitos. Digite o nome na barra de pesquisa ou role a página, clique na marca e cor desejada: seu código será copiado para a área de transferência.

2. Escolha uma paleta profissional pronta

A maneira mais fácil é escolher uma combinação de cores pronta. Não é necessário reinventar a roda todas as vezes, pois as combinações harmoniosas são conhecidas há muito tempo. Acesse colordrop.io e escolha. Existem centenas de paletas profissionais de 4 cores no site. Depois de selecionar o desejado, clique e copie os códigos de cores do painel que se abre à direita.

Além disso, o serviço contém uma seleção pronta de 24 cores de design plano. Clique à esquerda sob o nome “Flat Colors” e pegue o código da tonalidade que você gosta.

3. Determine a paleta de cores da fotografia ou imagem que você gosta

Este método é um pouco mais complicado. Mas também mais eficaz.

• No site coolors.co, no painel superior esquerdo, encontre o ícone da câmera e clique nele. Uma janela de upload de imagem será aberta.
• Você pode selecionar uma foto ou imagem com o esquema de cores desejado em seu computador ou copiar o link em uma coluna vazia.
• O serviço determinará a combinação de cores (abaixo da imagem enviada).
• Você pode alterar as cores individuais desta paleta marcando-as e selecionando um ponto na foto do qual deseja tirar a cor.
• O botão “Colagem” salva a paleta resultante com códigos de cores no computador.
• O botão “Auto” gera novas combinações baseadas na mesma foto.
• Clique em “Ok” e vá para a página principal do site para continuar trabalhando com a paleta.

A página principal do site não é menos funcional. Aqui você pode selecionar tons de cores individuais ou montar uma nova paleta substituindo cores individuais.

4. Crie seu próprio esquema de cores online

Ao enviar uma foto para o mesmo site coolors.co, você pode não apenas determinar o código de cores, mas também criar suas próprias combinações. Para fazer isso, pressione a barra de espaço – o serviço cria automaticamente uma combinação de 5 cores.

Em todas as cores 4 botões de ícone:

• Tons alternativos - Tons de cor (mais escuros e mais claros),
• Arrastar (mover uma cor para a direita ou esquerda na paleta),
• Ajustar (Ajustar matiz, saturação, brilho, etc.),
• Bloquear (corrigir cor).

As cores desempenham um papel importante no web design. Para selecionar corretamente o esquema de cores de um site, existem serviços especiais. Tenho certeza de que todo web designer tem pelo menos um desses em seus favoritos.

Às vezes você senta e pensa que tom de azul escolher como principal para o site, um pouco mais claro ou um pouco mais claro, ou talvez mais escuro... E você ainda precisa escolher outros para isso. Claro, você pode fazer isso visualmente, mas é melhor usar um dos serviços especiais.

Não vou falar de teoria das cores (esta é uma informação muito volumosa), mas simplesmente publicarei aqui os serviços que tenho nos meus favoritos e que utilizo.

Sou amigo deste instrumento há muitos anos. A ferramenta mais conveniente para selecionar cores (na minha opinião). Possui muitos recursos adicionais. Por exemplo, você pode ver um exemplo de página clara e escura com cores selecionadas.

É possível avaliar como as pessoas com daltonismo e outras deficiências visuais verão seu esquema de cores. Você pode escolher cores seguras para a web.

Adobe Kuler é a segunda ferramenta web que uso com frequência. A seleção de esquemas de cores é quase a mesma do site anterior, mas não é por isso que adoro. Além de criar você mesmo esquemas de cores, você pode observar e usar esquemas criados por outras pessoas.

Para fazer isso, clique no botão no menu superior esquerdo “Assistir”. E uma galeria com todos os tipos de combinações de cores se abrirá na sua frente.

Esta ferramenta é um pouco semelhante ao Colorscheme, mas tem menos funções, mas você pode ver como ficarão os blocos de cores.

Praticamente não uso este site, mas como o tenho nos favoritos, resolvi adicioná-lo também.

Os dois sites a seguir geram uma paleta a partir da imagem selecionada. Isto é mágica:)

Você escolhe qualquer imagem cujas cores você gosta, o serviço analisa e te dá uma paleta de cores. A única diferença entre esses dois sites é como eles fornecem a imagem.

Este site requer download imagem do seu computador.

Uma ferramenta muito conveniente para seleção de cores. Baseado no princípio “Gosto - Não gosto”.

Como o nome sugere, aqui você pode escolher as cores do design plano que está na moda. O site é interessante porque depois de selecionar uma paleta, você pode baixá-la para Corel e Photoshop.

Outra tendência da moda é o design de materiais. Este site ajuda você a escolher combinações de cores para a UI (interface do usuário). Além disso, o site possui um grande conjunto de ícones.

E, finalmente, a interface do usuário novamente. Aqui está apenas um conjunto de cores para design de UI. Ao clicar em qualquer cor, você pode ver como o texto branco será lido contra um determinado fundo.

Estas são as ferramentas que tenho nos meus favoritos.

Escreva nos comentários quais sites de seleção de cores para web design você usa?

A cor é um dos elementos mais importantes no trabalho de um designer. Mas, como conceito, pode ser bastante difícil de dominar: devido às muitas combinações de paletas, muitas vezes é difícil decidir a melhor forma de projetar a interface de páginas da web e aplicativos. Publicamos anteriormente análises de ferramentas de escolha e . E hoje queremos expandir o assunto postando uma tradução do artigo Essential Color Tools for UX Designers de Nick Babich no blog.

A nota contém uma lista dos melhores serviços de seleção de cores para sites e design UX que o ajudarão a economizar muito tempo. Através desses projetos você aprenderá:

• de onde obter inspiração;
• como criar sua própria paleta;
• como tornar o design acessível a pessoas com deficiência visual em cores.

1. Procurando inspiração

Cores da natureza

Extraia do mundo ao seu redor. Tudo que você precisa fazer é apenas olhar ao redor. Roupas da moda, capas de livros, design de interiores... há tantas coisas incríveis ao seu redor. Mas as melhores combinações de cores são as cores da natureza. Capture um lindo momento e tente criar sua própria seleção com base em uma imagem específica.

As melhores combinações de cores são encontradas na natureza. Você pode obter um esquema de cores de qualquer foto

Behance

Neste popular serviço você encontrará trabalhos interessantes incluídos nos melhores portfólios online de verdadeiros profissionais em sua área. Este site também é uma grande fonte de inspiração. Para ver novos exemplos dignos de projetos, basta selecionar a cor desejada.

Cores do drible

Dribbble é um dos melhores que serão úteis ao criar uma interface de usuário. Se você quiser entender visualmente como outras pessoas usaram uma cor específica, acesse drbbble.com/colors e insira o valor desejado.

Ao escolher uma cor para um site, aqui você pode definir sua porcentagem mínima - experimente, por exemplo, tentar definir 30% de azul.

Tente definir uma porcentagem mínima de uma cor específica no Dribbble

Inspiração de design

Designspiration é uma ferramenta útil principalmente para quem já tem ideias de combinações de cores e deseja ver exemplos dessas combinações. Selecione de 1 a 5 opções e você encontrará imagens que correspondem aos parâmetros especificados.

Em Designspiration você encontrará diferentes exemplos de combinações de cores

Tineye Multicolor

Usando o serviço de correspondência de cores Tineye Multicolr, você pode determinar a gama desejada da imagem e até definir a porcentagem de cada uma delas (proporção). O site está integrado a um banco de dados de 20 milhões de fotos Creative Commons do Flickr. Esta é definitivamente uma das maneiras mais rápidas de encontrar a paleta perfeita.

Colorzila

ColorZilla é uma extensão para instalação nos navegadores Chrome e Mozilla Firefox. Inclui ferramentas como conta-gotas, navegação na paleta, criação e muito mais.

Extensão ColorZilla disponível no Chrome e Firefox

Espectro da Shutterstock

Uma das melhores maneiras de imaginar como será um esquema de cores é observar as imagens correspondentes. A maioria das soluções que oferecem opções de cores para designs de sites incluem esse recurso, mas o Shutterstock Spectrum tem uma interface e uma visualização incrivelmente fáceis de usar que podem ser realmente úteis.

Além disso, você não precisará de assinatura, pois uma avaliação preliminar da imagem será suficiente (mesmo que ela contenha uma “marca d’água”).

Escolas W3

Recentemente, o blog revisou uma seleção do W3Schools. Lá há muita informação coletada sobre o tema, começando pelos nomes/códigos de tonalidades, a teoria da combinação de paletas e terminando com a descrição dos diferentes formatos: HEX, RGB, CMYK, HWB, etc. geradores, conversores e “minisserviços” similares. No geral, interessante de assistir.

2. Crie uma paleta de cores

Ferramenta de cores de design de materiais

A ferramenta Material Design Color permite criar, compartilhar esquemas de cores e visualizar uma interface de usuário aproximada para suas seleções. Uma de suas funções úteis é medir o nível de acessibilidade de qualquer combinação de cores.

Resfriadores

Coolors é um site para criação de uma paleta multicolorida. Basta fixar uma cor específica e pressionar a barra de espaço. A ferramenta também é boa porque você obterá mais de um resultado, mas poderá gerar diversas opções alterando apenas os dados iniciais.

Esquema de cores em Coolors com base na foto

Adobe Color CC

O serviço de correspondência de cores Adobe Color CC (anteriormente Kuler) é agora bastante popular. Está disponível gratuitamente na Internet, mas também existe uma versão desector. Com esta aplicação web você criará sua própria paleta usando a roda de cores:

Ou você pode obter um determinado resultado da imagem finalizada:

Selecionando cores para um site com base em uma imagem

Existem centenas de combinações prontas aqui, procure-as na seção “Assistir”:

Se você usar a versão desktop, poderá exportar o sistema de cores criado para InDesign, Photoshop e Illustrator com um clique.

Paleta

Muitas vezes é comparado ao Adobe Color CC anterior porque os designs são muito semelhantes. A única diferença é que no Paletton você não está limitado a cinco parâmetros, mas pode experimentar tons de interface adicionais.

Além disso, você pode olhar. Juntamente com outros, o aplicativo permite que você trabalhe em qualquer lugar, simplesmente usando seu smartphone. Além das tarefas diretas de criação/exportação de paletas de cores, aqui você pode selecionar cores específicas a partir de imagens ou utilizar opções básicas.

3. Tornando a paleta acessível

Hoje em dia, os distúrbios da visão das cores são muito mais comuns do que imaginamos. Cerca de 285 milhões de pessoas no mundo sofrem de problemas de visão. Você deve sempre verificar se aquele que você escolher está disponível para esses usuários.

Verificador de contraste de cores WebAIM

Alguns tons combinam bem entre si, enquanto outros são exatamente o oposto. Um grande número de projetos falha no teste A/A, e isso é um fato. É muito importante verificar o design visual da interface e o contraste dos tons, principalmente se houver muito texto na página. Para esses fins, use ao selecionar as cores do site.

WebAIM Color Contrast Checker é uma ferramenta baseada na web que verifica códigos de cores em valores hexadecimais.

Resfriadores

Já mencionamos este serviço acima. Entre outras coisas, Coolors também o ajudará a verificar se há daltonismo em sua paleta inventada.

Tipo de daltonismo no diagrama

Em vez do modo Normal, selecione o tipo de problema de visão que deseja simular. Como resultado, você entenderá exatamente como uma pessoa que não consegue distinguir entre determinadas cores verá seu design.

É assim que uma pessoa com protanomalia vê uma paleta

Simulador de visão NoCoffee para Chrome

Usando o site NoCoffee Vision Simulator, você pode ver como as pessoas com daltonismo ou baixa visão perceberão determinadas páginas da web. Por exemplo, se você especificar o parâmetro “Acromatopsia” na seção “Deficiência de cor”, você verá a página da web em cinza.

Isto é o que um projeto da CNN parece para uma pessoa com deuteranopia.

Conclusão

Todos os serviços de correspondência de cores de sites e design UX mencionados no artigo certamente o ajudarão em sua busca por uma paleta interessante e eficaz. Mas lembre-se: a melhor forma de aprender a criar paletas incríveis é praticando e experimentando bastante.

Qualquer web designer entende o quão importante é o . Com a ajuda da cor, os acentos são colocados - os detalhes importantes são enfatizados e os auxiliares são ocultados. A cor cria um clima. A cor é a primeira coisa que um visitante do site vê, antes mesmo de ler uma única carta ou perceber o que é mostrado em uma determinada fotografia. Paleta de cores Seu site pode atrasar o visitante ou assustá-lo.

Escolhendo a paleta de cores certa- o primeiro passo para construir um site ideal e impecável. A cor de cada elemento da página deve estar em harmonia não apenas com os elementos visualmente relacionados, mas também com o esquema geral de cores da página e do site como um todo.

Para não cometer erros no início da jornada, preparamos um pequeno revisão de geradores de esquema de cores, permitindo que você escolha o número e a combinação certa de cores primárias que usará ao desenvolver seu site. Alguns deles são bastante simples e possuem funcionalidade padrão, enquanto outros possuem uma série de funções exclusivas. Mas todos eles, sem dúvida, fornecerão uma assistência inestimável no desenvolvimento de um design de site exclusivo.

Adobe Color CC

Paleta

Estilifique-me

Resfriadores