Alchimie des couleurs avec moins: créer des schémas de couleurs et des palettes

La couleur est l'un des éléments les plus importants de toute conception visuelle. Lorsqu'il est correctement utilisé, il peut avoir un grand impact sur votre site Web ou votre application. Mais connaître la théorie des couleurs uniquement ne suffit pas pour obtenir un tel impact. Vous devez avoir la bonne courroie d'outils pour fonctionner facilement et avec succès avec la multitude de couleurs. Heureusement, moins résout ce problème pratique en offrant de nombreuses fonctions de couleur avec lesquelles travailler.

Dans ce tutoriel, je vais explorer comment utiliser certaines de ces fonctions de couleur, en conjonction avec d'autres caractéristiques moins, pour produire des mélanges flexibles et réutilisables pour la manipulation des couleurs.

Les plats clés

• moins fournit une multitude de fonctions de couleur qui peuvent être utilisées pour créer des schémas de couleurs et des palettes impactables pour la conception Web. Ces fonctions peuvent être utilisées conjointement avec d'autres caractéristiques moins pour produire des mélanges flexibles et réutilisables pour la manipulation des couleurs.
• Créer des schémas de couleurs avec moins implique de définir une couleur de base, puis d'utiliser la fonction spin () pour créer des variantes de couleur. Ces variantes peuvent être placées dans une liste et extraites au besoin, permettant la création de différents types de schémas de couleurs.
• Moins peut être utilisé pour générer différents types de palettes de couleurs grâce à l'utilisation de boucles et de déclarations conditionnelles. La fonction spin () peut être utilisée pour créer un spectre de couleurs pleine, tandis que les fonctions Lighten () et Darken () peuvent être utilisées pour créer des teintes et des nuances d'une couleur particulière.
• L'utilisation de moins pour l'alchimie des couleurs offre plusieurs avantages, notamment la création de schémas de couleurs cohérents et harmonieux, la facilité d'ajustement des schémas de couleurs en modifiant simplement la couleur de base et la capacité de créer des schémas de couleurs évolutifs et réutilisables.

Création de schémas de couleurs

Lorsque vous tentez de créer des schémas de couleurs avec moins, la plupart des gens adoptent l'approche la plus évidente, qui ressemble à ceci:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Cette méthode utilise des variables et la fonction Spin () de moins pour créer un schéma de couleurs (triadique, dans notre cas). Cela fonctionne bien, mais pour moi, ce n'est pas particulièrement réutilisable et pas assez flexible. Heureusement, le problème peut être résolu en utilisant des mixins. Voyons ce que je veux dire.

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Le code ci-dessus crée trois types de schémas de couleurs. Je vais expliquer que le dernier, car les deux premiers ont la même structure et ils n'ont pas besoin d'explications individuelles.

Le mélange .quad () prend trois paramètres. Le premier définit la couleur de base du schéma. Le second indique au mélange quelle variante de couleur à retourner. Et le troisième définit la propriété CSS à utiliser lorsque moins compile le code. À l'intérieur du corps du mixin, la fonction spin () crée les trois variantes de couleur disponibles dans un schéma quad, puis ces variantes sont placées dans une liste. La fonction extrait () obtient la variante souhaitée, définie dans le deuxième paramètre. Et enfin, à l'aide d'une interpolation variable, la variante de couleur est affectée à la propriété CSS définie.

Nous pouvons maintenant mettre le code ci-dessus dans un fichier séparé appelé Color_schemes.less et l'utiliser comme suit:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Ici, nous importons le fichier avec les schémas de couleurs, puis nous définissons la couleur de base de notre site Web ou de notre application. Les trois dernières lignes de l'ensemble de règles Div, définissent les couleurs des propriétés de couleur, couleur et couleur d'arrière-plan.

.

Comme vous pouvez le voir, le mixin peut être utilisé avec n'importe quelle propriété dont la valeur attendue est une couleur. En outre, il est super facile de voir pour quelle propriété une déclaration particulière est utilisée; Jetez un œil à la fin, et boom, nous le savons. Par exemple, dans la dernière instruction, vous pouvez clairement voir que la première variante de couleur du schéma quad sera utilisée comme valeur pour la propriété en couleur d'arrière-plan. Assez cool, hein?

et voici la sortie compilée:

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Voir le stylo xwxmep par SitePoint (@SitePoint) sur Codepen.

Génération de palettes de couleurs

Dans cette section, je vais vous montrer comment créer différents types de palettes de couleurs. À cette fin, j'utiliserai des boucles moins spécifiques et des instructions conditionnelles (gardes de mixin). Si vous n'êtes pas familier avec ces constructions, vous pouvez jeter un coup d'œil à mes articles précédents sur ces sujets.

Dans le premier exemple, je vais créer un mixin qui produit une table de couleurs. Vous avez utilisé un sélecteur de couleurs, non? Donc, tu sais ce que je veux dire.

<span>@import "color_schemes.less";
</span>
<span><span>@base-color: #00ff00; 
</span></span><span>
</span><span>div {
</span>  <span>width: 200px;
</span>  <span>height: 100px;
</span>  <span>border: thick solid;
</span>  .<span>quad(@base-color, 3, border-color);
</span>  .<span>quad(@base-color, 2, color);
</span>  .<span>quad(@base-color, 1, background-color);
</span><span>}</span>

Le mélange .color-palette () prend trois arguments réels. Le premier définit la couleur de base de la palette. Le second définit le nombre d'échantillons à générer. Et le troisième définit l'étape de spin nécessaire pour la fonction spin ().

En fait, il y a un autre argument: @index. Mais il est utilisé uniquement en interne pour faire fonctionner la boucle. Comme il est défini dans le code ci-dessus, la boucle itérera 25 fois via le code, créant 25 classes CSS - une pour chaque échantillon. Chaque nom de classe sera construit en suivant le modèle .swatch- [numéro] (par exemple, .swatch-1).

La couleur de chaque échantillon est générée en utilisant la valeur dérivée de la multiplication de l'index actuel par l'étape de spin. Cette valeur est ajoutée à la valeur de la couleur de base pour chaque itération de la boucle. Cela produit le spectre de couleurs complet, commençant et se terminant par la même couleur (rouge, dans notre cas).

Voici la sortie compilée:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Voir le stylo générant une palette de couleurs avec moins par SitePoint (@SitePoint) sur Codepen.

Ce mélange peut être utilisé pour créer n'importe quel type de table de couleur - avec n'importe quel nombre d'échantillons, et avec une étape de spin plus grande ou plus petite. Par exemple, vous ne pouvez générer que quatre échantillons avec une étape de rotation de 90 degrés, ce qui produira des échantillons pour une palette de couleurs carrée. Vous avez des possibilités infinies. Allez-y et faites vos propres expériences.

Dans l'exemple suivant, nous allons créer un mixin qui produit des teintes et des nuances d'une couleur particulière. Selon Wikipedia:

Une teinte est le mélange d'une couleur avec du blanc, qui augmente la légèreté, et une teinte est le mélange d'une couleur avec du noir, ce qui réduit la légèreté.

Comme nous le verrons dans une minute, les teintes et les nuances peuvent être facilement créées à l'aide de Lighten () et Darken () des fonctions intégrées.

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Cette version du mélange .color-palette () prend deux arguments réels - le type de palette (nuances ou teintes) et la couleur de base. Pour permettre un changement possible entre les nuances et les teintes, l'opérateur est utilisé en conjonction avec le mot-clé quand. Cela signifie que si nous utilisons des «nuances» comme premier paramètre, le code avec la fonction Darken () sera utilisé.

La couleur d'arrière-plan dans les deux cas est générée par la fonction Lighten () ou Darken (), respectivement, qui utilise la couleur de base définie et l'indice actuel multiplié par dix pour cent. Faites attention au paramètre relatif. Il est important de l'inclure afin que l'ajustement soit relatif à la valeur actuelle.

Remarque: ne vous inquiétez pas que les deux mixins partagent un et le même nom. Grâce à la fonction de correspondance de modèle, moins saura lequel utiliser.

Voici la sortie compilée:

<span>@import "color_schemes.less";
</span>
<span><span>@base-color: #00ff00; 
</span></span><span>
</span><span>div {
</span>  <span>width: 200px;
</span>  <span>height: 100px;
</span>  <span>border: thick solid;
</span>  .<span>quad(@base-color, 3, border-color);
</span>  .<span>quad(@base-color, 2, color);
</span>  .<span>quad(@base-color, 1, background-color);
</span><span>}</span>

Voir le stylo générant un échantillon de couleur avec moins par SitePoint (@SitePoint) sur Codepen.

Résumé

Il y a beaucoup d'autres choses que vous pouvez faire avec les couleurs et avec le grand nombre de fonctions de couleur fournies par moins. Mais bon, vous ne voulez pas de tutoriel de 10 000 mots, non? Les exemples donnés sont suffisants pour vous permettre de démarrer et vous donner un aperçu des possibilités disponibles. C'est à vous de plonger plus profondément et de continuer à expérimenter. Heureux moins codage!

Les questions fréquemment posées sur l'alchimie des couleurs avec moins

Qu'est-ce que l'alchimie des couleurs avec moins et comment cela fonctionne-t-il?

L'alchimie des couleurs avec moins est une méthode de création de schémas et de palettes de couleurs en utilisant moins, un langage de feuille de style préprocesseur dynamique. Il vous permet de définir des variables, des mixins, des fonctions et de nombreuses autres techniques qui vous permettent de rendre CSS plus maintenable, thématique et extensible. Avec moins, vous pouvez créer une couleur de base, puis utiliser des fonctions pour éclaircir, assombrir, saturer, désaturer, tourner et mélanger les couleurs, créant un schéma de couleurs harmonieux pour votre site Web ou votre application.

Comment puis-je créer un Schéma de couleurs à l'aide de moins?

Création d'un schéma de couleurs Utilisation moins implique de définir une couleur de base, puis d'utiliser moins de fonctions pour créer des variations de cette couleur. Par exemple, vous pouvez utiliser les fonctions d'éclair et d'assombrissement pour créer des nuances plus claires et plus sombres de la couleur de base. Vous pouvez également utiliser les fonctions saturées et désaturées pour ajuster l'intensité de la couleur et la fonction de spin pour créer des couleurs complémentaires. En combinant ces fonctions, vous pouvez créer une large gamme de schémas de couleurs.

Quels sont les avantages de l'utilisation moins pour l'alchimie des couleurs?

Moins offre plusieurs avantages pour l'alchimie des couleurs. Il vous permet de créer des schémas de couleurs cohérents et harmonieux, ce qui peut améliorer l'attrait visuel de votre site Web ou de votre application. Il est également facile d'ajuster votre schéma de couleurs, car vous pouvez simplement modifier la couleur de base et le reste des couleurs metra à jour automatiquement. De plus, moins vous permet de créer des schémas de couleurs évolutifs et réutilisables, ce qui peut vous faire gagner du temps et des efforts à long terme.

Comment moins se compare-t-il aux autres préprocesseurs CSS pour l'alchimie des couleurs?

Moins est similaire à d'autres préprocesseurs CSS comme SASS en termes de capacité à créer des schémas de couleurs. Cependant, moins a une syntaxe plus simple et est plus facile à apprendre, ce qui en fait un bon choix pour les débutants. Il dispose également d'un ensemble robuste de fonctions pour manipuler les couleurs, ce qui peut vous donner plus de contrôle sur votre schéma de couleurs.

Puis-je utiliser l'alchimie des couleurs avec moins pour la conception d'impression?

Alors que moins est principalement c'est principalement Utilisé pour la conception Web, vous pouvez également l'utiliser pour la conception d'impression. Vous pouvez créer un schéma de couleurs en utilisant moins, puis l'exporter comme un fichier CSS, qui peut être utilisé dans le logiciel de conception d'impression. Cependant, gardez à l'esprit que les couleurs peuvent apparaître différemment à l'écran et sur l'impression en raison des différences dans les espaces de couleur.

Comment puis-je en savoir plus sur l'alchimie des couleurs avec moins?

Il existe de nombreuses ressources disponibles en ligne pour en savoir plus sur l'alchimie des couleurs avec moins. Vous pouvez commencer par lire la documentation officielle moins, qui fournit un aperçu complet de la langue et de ses fonctionnalités. Il existe également de nombreux tutoriels et guides disponibles qui peuvent vous guider à travers le processus de création d'une palette de couleurs avec moins.

Puis-je utiliser l'alchimie des couleurs avec moins pour la conception d'applications mobiles?

Oui, vous pouvez utiliser l'alchimie de couleur avec moins pour la conception d'applications mobiles. Moins vous permet de créer un schéma de couleurs cohérent qui peut être utilisé sur différentes plates-formes, y compris les applications mobiles. Cela peut aider à garantir une expérience utilisateur cohérente sur toutes les plates-formes.

De quels outils ai-je besoin d'utiliser moins pour l'alchimie des couleurs?

Pour utiliser moins pour l'alchimie des couleurs, vous aurez besoin d'un éditeur de texte pour Écrivez votre code moins et un compilateur moins pour compiler votre code moins dans CSS. Il existe de nombreux éditeurs de texte gratuits et payants et moins de compilateurs disponibles, vous pouvez donc choisir ceux qui correspondent le mieux à vos besoins et préférences.

Puis-je utiliser l'alchimie de couleur avec moins si je suis aveugle?

Oui, vous pouvez utiliser l'alchimie des couleurs avec moins même si vous êtes aveugle. Moins vous permet de créer des schémas de couleurs basés sur des fonctions mathématiques, vous n'avez donc pas besoin de compter sur votre perception de la couleur. Cependant, vous pouvez obtenir des commentaires des autres pour vous assurer que votre jeu de couleurs est visuellement attrayant et accessible à tous les utilisateurs.

Comment puis-je résoudre les problèmes avec mon schéma de couleurs moins? En ayant des problèmes avec votre schéma de couleurs moins, il y a plusieurs étapes que vous pouvez prendre. Tout d'abord, vérifiez vos erreurs de code moins. Si votre code est correct, essayez de régler votre couleur de base ou les paramètres de vos fonctions. Si vous rencontrez toujours des problèmes, envisagez de chercher de l'aide auprès de la communauté ou d'un concepteur Web professionnel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!