Générez des palettes de couleurs sans fin avec Khroma

Sep 14, 2025

Comment

[dix] [dix] [dix]

[dix]

Excellente utilisation de théorie des couleurs En conception est l'une de ces choses qui séparent la grande de la moyenne. Bien que subjectif et nuancé, la couleur est un outil puissant qui peut définir l'émotion et le ton d'une expérience numérique. Pour quelque chose de si important, mon propre flux de travail autour de la couleur manquait gravement.

[dix]

3 énormes tendances de couleur pour 2018

Bien qu'il y ait beaucoup de grandes ressources déjà là-bas, j'ai trouvé qu'il n'y avait aucun moyen de parcourir et de comparer rapidement des combinaisons de couleurs d'origine qui se sentaient prêtes à être utilisées. C'est ce que j'avais l'intention de résoudre en construisant Khroma .

Choisissez une couleur, n'importe quelle couleur

The Khroma training screen with the chosen colour bar up top — L'écran de formation de Khroma avec la barre de couleur choisie en haut

L'une des choses excitantes sur Khroma est que vous vous rendez à former un algorithme AI pour agir comme une extension de votre cerveau de concepteur de couleur. Le défi est que pour le faire bien, vous devez choisir 50 couleurs que vous aimez. Lors de la construction de l'algorithme, j'ai essayé de le faire travailler avec moins, mais les résultats n'étaient pas assez bons.

Cinquante garantit que le générateur a une plage décente variée et suffisamment flexible pour aider à toutes vos conceptions. Le processus de formation est relativement non structuré et constitue probablement la science des pièces égales et l'art. Quelques conseils pro de mon expérience devraient vous aider à tirer le meilleur parti.

Il convient de mentionner brièvement ici comment fonctionne l'algorithme. Vos 50 couleurs seront utilisées pour former un réseau neuronal qui sera capable de reconnaître des centaines de milliers d'autres couleurs similaires que vous aimerez (nous appellerons cette affinité de couleur). Il sait quelles couleurs vous n'aimez pas parce que ce n'est pas dans l'original 50 que vous avez choisi. Cela signifie que si vous ne sélectionnez pas brun foncé, vous ne le verrez pas. C'est bien si vous n'êtes pas un fan brun foncé, mais pas si vous manquez quelque chose que vous aimez vraiment. C'est ce qui rend la variété si importante.

[dix]

Pour commencer à former votre générateur Khroma, allez à Khroma.co et cliquez sur Personnaliser. Vous verrez une instruction et une paroi de blocs de couleurs infinie. Un clic sur l'un de ces blocs l'ajoutera à la barre de couleurs choisie et une autre enlèvera. La meilleure façon de procéder est de faire défiler et de choisir une couleur qui saute comme quelque chose que vous voudrez peut-être utiliser dans une conception. Cela fonctionne bien pour les 30 premières couleurs.

Temps d'affiner

À ce stade, vous voudrez rechercher la barre de couleurs choisie et voir comment cela se développe. Si c'était votre document couleurs dans l'esquisse, auriez-vous tout ce dont vous avez besoin? Les 20 prochaines couleurs d'ici devraient être sur le raffinement. Au fur et à mesure que vous procédez à un peu d'info-bulle se développera avec quelques suggestions, par exemple: «Choisir un peu plus de couleurs magenta, jaune et pâle améliorera vos résultats». Je recommande d'essayer de les coller mais n'ayez pas peur de continuer à choisir de nouvelles couleurs. De là, vous devriez choisir 10 de plus, apportant le total à 40.

Recherchez à nouveau le bar. Voyez-vous des couleurs qui sont pratiquement les mêmes? Il n'est pas inhabituel de choisir les mêmes couleurs plus d'une fois depuis, eh bien, vous les aimez. Mais cela ne sera pas utile à votre algorithme.

J'avais un ami essayer un prototype précoce et il m'a dit que ses résultats n'étaient pas très bons. "C'est surtout juste bleu", a-t-il déclaré. "Avez-vous choisi principalement le bleu dans votre formation?" J'ai répondu. "Oui. J'aime beaucoup le bleu."

Le meilleur résultat viendra de trouver la largeur la plus large de la couleur affinité possible. Il vous souris sur une couleur répétée dans la barre supérieure, vous pouvez cliquer pour le supprimer. Cela libère cette fente pour une couleur que vous n'avez pas encore choisie. Faites une élaboration de répétitions et continuez à remplir de nouvelles couleurs jusqu'à ce que vous ayez cinq choix.

Mélanger dans des caractères génériques

[dix]

J'ai trouvé cela enrichissant de jeter des caractères génériques pour mes cinq derniers choix. Ce sont des couleurs que je ne pense pas que je n'utiliserais jamais seul. Souvent, j'ai été agréablement surpris par ce que Khroma fait avec eux avec eux. Lorsque, à côté d'autres couleurs, ils semblent s'adapter parfaitement d'une manière que je n'aurais pas imaginé.

Lorsque vous avez choisi vos caractères génériques, vous verrez un bouton de train apparue en haut à droite. Vous pouvez continuer à choisir des couleurs aussi longtemps que vous le souhaitez à partir de ce point, mais si vos couleurs choisies ressemblent à une belle palette sombre à la lumière avec beaucoup de variété, vous êtes probablement prêt à commencer la formation.

La formation devrait prendre environ trois minutes. Vous pouvez vous attendre à ce que la précision se lève sur les 90 élevées. Cela représente essentiellement comment l'algorithme peut identifier vos couleurs. Vous pouvez réellement revenir en arrière et modifier vos couleurs de formation plus tard si vous souhaitez essayer des modifications.

Construisez votre collection

Lorsque le processus d'entraînement se termine, vous serez déposé dans le générateur. Vous serez présenté avec une grille de défilement infiniment de combos de couleurs dans le modèle de type. Chaque combo dispose d'un panneau d'informations que vous pouvez ouvrir pour voir les détails tels que les valeurs Nom, HEX et RVB, ainsi qu'un ratio d'accessibilité de WCAG. Avec l'icône de coeur en haut à droite, vous pouvez commencer à construire une collection de vos favoris.

Trouver le bon combo

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar — Faire une palette de la recherche avec # 8BD2CA et # 32514E. Si vous ne voyez rien que vous aimez, essayez de réorganiser les couleurs dans la barre de recherche

La recherche est l'une des caractéristiques les plus puissantes de Khroma. Souvent, j'aurai une idée lâche de ce que je cherche, ou je travaille déjà avec une certaine couleur et que je veux trouver des compléments. Étant donné que Khroma vous donne accès à des centaines de milliers de couleurs RVB dans votre gamme d'affinité, il semblait important de pouvoir les taper.

Vous pouvez rechercher différents paramètres: Type, Hue, Nom, Hex et RVB. Les types incluent la nuit, la lumière, pastel, pâle, profonde, sourdine, riche, brillante et néon. Les teintes sont chaudes, cool, rouge, orange, jaune, vert, cyan, bleu, violet, violet et magenta. Il y a 1 566 couleurs spécifiques que vous pouvez rechercher avec des noms tels que "Royal Blue" et "Café". Enfin, il accepte des valeurs HEX et RVB.

Étant donné que Khroma travaille avec deux combos de couleurs, économisez des palettes, il existe deux emplacements pour les requêtes de recherche. Si vous entrez un terme dans la barre de recherche et recherchez, vous obtiendrez des résultats correspondant à ce terme pour la première gamme de couleurs et le second sera aléatoire.

Par exemple, si vous recherchez des «brillants», vous obtiendrez une couleur de haute saturation et une paire aléatoire avec elle. Si vous cherchez 'Bright and Blue', vous obtiendrez ces couleurs vives et des bleus aléatoires dans la deuxième fente. Vous pouvez également chaîner des termes de type et de teinte, comme «bleu vif» et «jaune pâle», par exemple.

The details of each pair of colours. Everything can be copied with just a click for quick usage — Les détails de chaque paire de couleurs. Tout peut être copié avec juste un clic pour une utilisation rapide

Lorsque vous avez deux couleurs que vous aimez et que vous souhaitez trouver des compléments à leur disposition. Vous entrez simplement ces couleurs exactes (# 8BD2CA et # 32514E disent) et recherchez sous le modèle de palette.

Parfois, vous rechercherez une couleur ou un terme qui n'est pas dans votre gamme d'affinité. C'est là que les contrôles de biais entrent en jeu. Vous les verrez en deux clic et faites glisser des champs en haut à droite de la barre d'outils. Le biais représente à quel point le générateur est strict dans les couleurs correspondantes au 50 que vous avez choisi.

Chaque couleur Khroma génère de l'algorithme et obtient un pourcentage (quelle est la probabilité que cela estime que vous aimerez la couleur) en réponse. Si ce pourcentage est sous le biais, il sera rejeté et le processus se répète.

Dans le cas d'une requête de recherche hors plage, le biais est automatiquement abaissé jusqu'à ce qu'il puisse passer le test de seuil. Si c'est totalement hors de votre gamme (comme notre brun foncé de plus tôt), il va automatiquement la tourner sur 0. De cette façon, toutes les couleurs que vous recevez par défaut de Khroma à votre affinité mais sont capables de régler afin que vous n'ayez pas seulement limité. à ces couleurs.

Images personnalisées

The five templates of Khroma – you can see the palette adding a couple more colours to the mix — Les cinq modèles de Khroma - Vous pouvez voir la palette en ajoutant un couple de plusieurs couleurs au mélange

Vous pouvez trouver quelques options pratiques en haut à droite dans l'icône Paramètres. L'un d'entre eux est la possibilité de télécharger une image personnalisée sur le modèle d'image. Vous n'avez pas besoin de faire quoi que ce soit à l'image à l'avance; Assurez-vous simplement que c'est la bonne taille.

Pendant que vous pouvez aller de l'avant et utiliser votre propre tête de tête (je ne jugerai pas), il vaut mieux y penser comme la capacité de faire votre propre modèle. Prenez une capture d'écran de quelque chose que vous travaillez sur Sketch ou votre outil de choix, téléchargez-le et commencez à parcourir des combinaisons sans limites!

J'espère que vous donnez à Khroma un essai et j'essaie de trouver un ajout utile et puissant à votre boîte à outils de conception.

Cet article a été publié à l'origine dans le numéro 303 de rapporter , le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Acheter numéro 303 ou S'abonner ici .

Articles Liés:

5 conseils pour la compréhension de la théorie des couleurs
Les meilleurs outils de couleur pour les concepteurs Web
7 conseils pour mieux gérer la couleur sur le Web

[dix] [dix]

[dix]

Générez des palettes de couleurs sans fin avec Khroma

Choisissez une couleur, n'importe quelle couleur

Temps d'affiner

Mélanger dans des caractères génériques

Construisez votre collection

Trouver le bon combo

Images personnalisées

Comment - Most Popular Articles

Comment classer sur Google

Comment dessiner un éléphant

Commencez avec Express.Js

Comment se déplacer entre Daz Studio et Zbrush

Créer un effet de portail dans Maya

Ajouter des indications visuelles à votre site

Groom une créature irrésistiblement fourrure

Comment concevoir une promotion pour une marque imaginaire

Catégories