Gere paletas de cores sem fim com Khroma

Sep 15, 2025

Como

Excelente uso de. Teoria da cor No design é uma daquelas coisas que separa o grande da média. Enquanto subjetivo e nuances, a cor é uma ferramenta poderosa que pode definir a emoção e o tom de uma experiência digital. Para algo tão importante, meu próprio fluxo de trabalho em torno da cor foi severamente carente.

3 tendências de cor enormes para 2018

Embora existam muitos grandes recursos já lá fora, descobri que não havia como navegar e comparar combinações de cores originais rapidamente que se sentiu pronta para uso. É o que eu pretendia resolver construindo Khroma. .

Escolha uma cor, qualquer cor

The Khroma training screen with the chosen colour bar up top — A tela de treinamento de Khroma com a barra de cores escolhida para cima

Uma das coisas interessantes sobre Khroma é que você começa a treinar um algoritmo AI para agir como uma extensão do cérebro do desenhador de cores. O desafio é que, para fazer isso, você deve escolher 50 cores que você gosta. Ao construir o algoritmo, tentei fazer isso funcionar com menos, mas os resultados não eram bons o suficiente.

Cinquenta garante que o gerador tenha uma faixa decente para ser variada e flexível o suficiente para ajudar com todos os seus desenhos. O processo de treinamento é relativamente não estruturado e é provavelmente igual a ciência e arte de partes. Algumas dicas pro da minha experiência devem ajudá-lo a aproveitar ao máximo.

Vale a pena mencionar brevemente aqui como o algoritmo funciona. Suas 50 cores serão usadas para treinar uma rede neural que será capaz de reconhecer centenas de milhares de outras cores semelhantes que você vai gostar (vamos chamar isso de sua afinidade de cor). Sabe em quais cores você não gosta, porque não está no original 50 que você escolheu. Isso significa que se você não selecionar marrom escuro, não verá. Tudo bem se você não é um fã marrom escuro, mas não se você perder algo que realmente gosta. Isso é o que torna a variedade tão importante.

Para começar a treinar seu gerador de Khroma, vá para Khroma.co e clique em Personalizar. Você verá algumas instruções e uma parede de rolagem infinita de blocos de cores. Um clique em um desses blocos irá adicioná-lo à sua barra de cores escolhidas e outro irá removê-lo. A melhor maneira de prosseguir é percorrer e escolher qualquer cor que pule como algo que você pode querer usar em um design. Isso funciona bem para as primeiras 30 cores.

Hora de refinar

Neste ponto, você vai querer olhar para a barra de cores escolhida e ver como está se preparando. Se esta fosse suas cores do documento no esboço, você teria tudo que você precisa? As próximas 20 cores daqui devem ser sobre o refinamento. Ao prosseguir uma pequena dica de ferramenta aparecerá com algumas sugestões, por exemplo, "escolher mais algumas cores magentas, amarelas e pálidas melhorarão seus resultados". Eu recomendo tentar ficar com estes, mas não tenha medo de continuar escolhendo novas cores. A partir daqui você deve escolher 10 mais, trazendo o total para 40.

Olhe para o bar novamente. Você vê cores que são praticamente as mesmas? Não é incomum escolher as mesmas cores mais de uma vez desde então, você gosta deles. Mas isso não será útil para o seu algoritmo.

Eu tive um amigo tente um protótipo precoce e ele me disse que seus resultados não eram muito bons. "É principalmente apenas azul", disse ele. "Você escolheu principalmente azul no seu treinamento?" Eu respondi. "Sim. Eu realmente gosto de azul."

O melhor resultado virá de encontrar a mais ampla amplitude de afinidade de cor possível. Você mouse sobre uma cor repetida na barra superior, você pode clicar para removê-lo. Isso liberta esse slot para uma cor que você ainda não escolheu. Faça alguma poda de quaisquer repetições e continue a preencher novas cores até que você tenha cinco escolhas restantes.

Atire em alguns curingas

Eu achei recompensando para jogar alguns curingas para as últimas cinco escolhas. Estas são cores que eu não acho que eu nunca usaria por conta própria. Muitas vezes fiquei agradavelmente surpreso com o que Khroma faz com eles. Quando ao lado de outras cores, eles parecem se encaixar perfeitamente de uma maneira que eu não teria imaginado.

Quando você escolheu seus curingas, verá um botão de trem aparecer no canto superior direito. Você pode continuar a escolher cores enquanto quiser desse ponto, mas se suas cores escolhidas parecem uma bela paleta escura para iluminar com muita variedade, você provavelmente é definido para começar a treinar.

O treinamento deve demorar cerca de três minutos. Você pode esperar que a precisão se levante aos 90 anos. Isso representa essencialmente o quão bem o algoritmo pode identificar suas cores. Você pode realmente voltar e editar suas cores de treinamento mais tarde, se você quiser experimentar alguns ajustes.

Construa sua coleção

Quando o processo de treinamento termina, você será descartado no gerador. Você será apresentado com uma grade de rolagem infinitamente de combos de cor no modelo. Cada combo tem um painel de informações que você pode abrir para ver detalhes como os valores Nome, HEX e RGB, bem como uma taxa de acessibilidade do WCAG. Com o ícone do coração no canto superior direito, você pode começar a construir uma coleção de seus favoritos.

Encontre a combinação certa

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar — Fazendo uma pesquisa de paleta com # 8bd2ca e # 32514e. Se você não está vendo nada, tente reorganizar as cores na barra de pesquisa

A pesquisa é uma das características mais poderosas do Khroma. Muitas vezes vou ter uma ideia solta do que estou procurando, ou já estou trabalhando com uma certa cor e quero encontrar complementos. Como o Khroma lhe dá acesso a centenas de milhares de cores RGB em seu intervalo de afinidade, parecia importante poder peneirar-os.

Existem diferentes parâmetros que você pode pesquisar: tipo, matiz, nome, hex e RGB. Os tipos incluem escuro, leve, pastel, pálido, profundo, silenciado, rico, brilhante e neon. Os matizes são quentes, frescos, vermelhos, laranja, amarelo, verde, ciano, azul, violeta, roxo e magenta. Existem 1.566 cores específicas que você pode procurar por nomes como 'Royal Blue' e 'Café'. Por fim, aceita valores HEX e RGB.

Como o Khroma funciona com dois combos de cores, salve para paletas, existem dois slots para consultas de pesquisa. Se você inserir um termo na barra de pesquisa e pesquisar, você obterá resultados que correspondam a esse prazo para o primeiro slot colorido e o segundo será aleatório.

Por exemplo, se você procurar por 'Bright', receberá uma cor de alta saturação e um par aleatório com ele. Se você pesquisar "brilhante e azul", obterá essas cores brilhantes e um azul aleatório no segundo slot. Você também pode cadeia de termos e matiz juntos, como "azul brilhante" e "amarelo pálido", por exemplo.

The details of each pair of colours. Everything can be copied with just a click for quick usage — Os detalhes de cada par de cores. Tudo pode ser copiado com apenas um clique para uso rápido

Um grande casos de uso em que a pesquisa é especialmente útil é quando você tem duas cores que gosta e quer encontrar complementos para eles. Você acabaria de entrar essas cores exatas (# 8bd2ca e # 32514E dizer) e pesquisar sob o modelo da paleta.

Às vezes você procurará uma cor ou termo que não esteja no seu intervalo de afinidade. É aí que os controles de viés entram em jogo. Você os verá como dois campos de clique e arrastará no canto superior direito da barra de ferramentas. O viés representa o quão rígido é o gerador em cores correspondentes aos 50 que você escolheu.

Cada cor Khroma gera corridas através do algoritmo e recebe uma porcentagem (como é provável que ele acredita que você vai gostar da cor) em resposta. Se essa porcentagem estiver abaixo do viés, será expulso e o processo se repete.

No caso de uma consulta de pesquisa fora de alcance, o viés é automaticamente abaixado até que ele possa passar no teste de limiar. Se é totalmente fora do seu alcance (como nosso marrom escuro de mais cedo), então ele irá transformá-lo automaticamente para 0. Desta forma, todas as cores que você recebe em Khroma Padrões à sua afinidade, mas é capaz de se ajustar, então você não é apenas limitado para essas cores.

Imagens personalizadas.

The five templates of Khroma – you can see the palette adding a couple more colours to the mix — Os cinco modelos de Khroma - você pode ver a paleta adicionando mais algumas cores à mistura

Você pode encontrar algumas opções úteis no canto superior direito sob o ícone Configurações. Um deles é a capacidade de fazer upload de uma imagem personalizada para o modelo de imagem. Você não precisa fazer nada para a imagem de antemão; Apenas certifique-se de que é o tamanho certo.

Enquanto você pode ir em frente e usar seu próprio headshot (não vou julgar), é melhor pensar nisso como a capacidade de fazer seu próprio modelo. Faça uma captura de tela de algo que você está trabalhando no esboço ou na sua ferramenta de design de escolha, faça o upload e comece a navegar em combinações ilimitadas!

Espero que você dê uma tentativa de Khroma e encontre uma adição útil e poderosa ao seu kit de ferramentas de design.

Este artigo foi originalmente publicado em questão 303 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar problema 303. ou Inscreva-se aqui .

Artigos relacionados:

5 dicas para entender a teoria da cor
As melhores ferramentas de cores para web designers
7 dicas para gerenciar a cor melhor na web

Gere paletas de cores sem fim com Khroma

Escolha uma cor, qualquer cor

Hora de refinar

Atire em alguns curingas

Construa sua coleção

Encontre a combinação certa

Imagens personalizadas.

Como - Artigos mais populares

Como escrever código HTML mais rápido

17 dicas para desenhar rostos mangá

Como evitar um Dia da Amazon Prime 2020 Falha

Como criar olhos espumantes em tinta a óleo

Como desenhar um elefante

Recriar um mangá clássico

Comece com a ferrugem

Pintura como um impressionista

Categorias