Share
LESS fournit une poignée de fonctions qui facilitent la définition et la manipulation des couleurs. Dans ce didacticiel, nous allons en parcourir un certain nombre pour vous aider à contrôler les couleurs, à produire de meilleurs combinaisons de couleurs et à les garder organisées..
Le premier est le tourner() fonction qui nous permet d’atteindre une couleur autour de la roue chromatique. Cette fonction est utile, par exemple, pour générer un jeu de couleurs. Vous avez peut-être déjà entendu parler de certaines structures de couleur courantes qui formulent des combinaisons de couleurs harmonieuses telles que complémentaires, triades et composés. Il existe un certain nombre d’outils, tels que Adobe Color CC (anciennement Kuler), où vous pouvez générer des jeux de couleurs pour suivre ces structures en un instant. Mais que dirions-nous de créer notre propre jeu de couleurs en utilisant LESS?
Nous allons commencer par générer la structure de couleur la plus simple, complémentaire. Cet appareillage comprend deux couleurs qui se trouvent de part et d’autre de la roue chromatique..
Diagramme de couleur complémentaire.Tout d'abord, nous définissons la base de couleur comme référence précise de la seconde couleur. Choisissez une couleur préférée ou une couleur qui entre soudainement dans votre esprit. Ici j'ai ramassé un bleu-ish Couleur, # 3bafdA, par exemple:
Comme nous aimerions atteindre le côté opposé de la roue à la base de couleur, nous avons défini la valeur de degré sur 180.
@ couleur-base: # 3bafdA; @ complément de couleur: spin (@ couleur-base, 180);
Cela nous donne deux belles couleurs précises qui se complètent.
Voici un exemple de ces couleurs appliquées à un prototype de conception Web:
Assez belle, n'est ce pas?Nous pouvons explorer davantage les modèles de couleur et créer un triadique structure de couleur. Triadic, comme son nom l'indique, comprend trois couleurs. Nous divisons donc notre roue en trois et définissons le degré de rotation dans le tourner() une fonction:
// Structure triadique @ color-base: # 3bafdA; @ triadique-secondaire: spin (@ color-base, - (360/3)); @ triadique-tertiaire: spin (@ color-base, (360/3));
Le résultat est tout aussi bon:
Structure de couleur triadiqueUne autre façon de créer des combinaisons de couleurs consiste à mélanger deux couleurs; probablement quelque chose que vous avez appris en classe d'art à l'école primaire. Si nous mélangeons le rouge et le jaune, par exemple, nous obtiendrons une teinte orange solide. Avec LESS, nous pouvons faire la même chose en utilisant le mélanger() une fonction:
div color: mix (rouge, jaune);
La sortie de cet exemple est # ff8000-le code hexadécimal exact du mot-clé de couleur "orange":
div color: # ff8000;
Évitez de mélanger des couleurs du même spectre. Étant donné notre couleur de base, # 3bafdA, qui se situe quelque part dans le blues du spectre visible, vous obtiendrez des résultats plus satisfaisants en le mélangeant avec une couleur opposée, par exemple, moyen-violet ou lumière verte.
@ couleur-base: # 3bafdA; @ color-primary: mix (@ color-base, mediumvioletred); @ couleur secondaire: mix (@ couleur-base, vert clair); @ couleur-tertiaire: mélange (@ couleur-base, crème menthe);
Cela nous donne une belle palette de couleurs; toutes les couleurs générées se sentent harmonieuses car elles héritent de la même teinte, # 3bafdA.
Si vous ne connaissez pas les couleurs à appliquer, choisissez votre couleur préférée et essayez de la mélanger avec tout couleur en utilisant le mélanger() une fonction. Le résultat va probablement vous surprendre.
Voici un exemple (familier) d'application de tels résultats dans un prototype de conception mobile.
Examinons d'autres moyens de manipuler les couleurs.
L'ombre définit l'intensité de la lumière et l'obscurité d'une couleur. Dans la conception web, ombre entre communément en pratique pour distinguer les états des éléments. Un bouton, par exemple, peut avoir une couleur de fond légèrement plus sombre ou plus claire sur :flotter ou :concentrer. Avec MOINS, nous pouvons utiliser le assombrir() et alléger() fonction pour rendre une couleur plus sombre et plus claire, respectivement.
@ couleur-base: # 3bafdA; @ couleur-survol: alléger (@ couleur-primaire, 10%); // # 9c84c1 @ color-focus: darken (@ color-primary, 10%); // # 684b94
Cela se traduit par:
Définition de l'état de la couleur avec les fonctions lighten () et darken ().Alternativement, nous pouvons ajuster la couleur saturation au lieu de la légèreté. La saturation définit la profondeur d'une couleur; une saturation plus élevée rendra une couleur plus vibrante, tandis que le niveau de saturation le plus bas la transformera en gris.
Étant donné l’exemple ci-dessus, nous pouvons remplacer les fonctions de teinte par saturer() et désaturer (), et en outre définir la couleur de l'état désactivé.
@ couleur-base: # 3bafdA; @ color-hover: saturer (@ color-primary, 10%); @ color-focus: désaturer (@ color-primary, 10%); @ désactivation de la couleur: luminosité (désaturation (@ couleur primaire, 100%), 30%);
Ajustez ensuite la luminosité des couleurs désaturées jusqu'à ce qu'elle corresponde parfaitement à votre contexte de conception..
Nos variables sont maintenant étroitement liées à la base de couleur, ce qui nous permettra de gagner un peu de temps lors de la personnalisation des styles de boutons; ils changeront en conséquence lorsque vous ajusterez la base de couleur.
Réglage de l'état de la couleur avec saturation.MOINS permet à nos styles d'être un peu plus intelligents. Par exemple, nous pouvons faire «penser» nos styles et décider de la couleur à appliquer dans certaines conditions. En supposant que nous créons un modèle de site Web, il s’agit du bouton de style de base et vous envisagez de l’étendre avec différentes couleurs et styles. Mais comment pouvons-nous contrôler les sorties couleur? Nous ne voulons certainement pas que la couleur du texte soit sombre sur un fond sombre, ou vice versa. Nous devons nous assurer que le texte conserve le contraste afin d’être plus facile à lire. C’est là que les contraste() les fonctions entrent en jeu.
@ body-bg: # 000; body background-color: @ body-bg; couleur: contraste (@ body-bg);
Dans l'exemple ci-dessus, nous définissons la Couleur à travers le contraste() une fonction. Cela garantit que la couleur du texte présente un contraste suffisant par rapport à la couleur d'arrière-plan. Dans ce cas, le texte devrait retourner #fff puisque l'arrière-plan est # 000. Si vous définissez l’arrière-plan sur une couleur claire, telle que blanc, fumée blanche, ou bleu ciel, la couleur devrait revenir # 000.
corps background-color: # 000; couleur: #fff;
Vous pouvez également personnaliser la couleur pour le contraste sombre et clair. Dans l'exemple suivant, la couleur retournera # 999 ou # 777 au lieu de #fff et # 000.
@ body-bg: # f0f0f0; @ color-light: # 999; @ color-dark: # 777; body background-color: @ body-bg; couleur: contraste (@ body-bg, @ color-dark, @ color-light);
Souvent, je préfère également ne pas produire de déclaration de style si la couleur est transparente, en particulier pour la couleur d’arrière-plan. Pour ce faire, encapsulez le Contexte déclaration dans LESS Mixin Guards.
@bg: transparent; .element & when not (@bg = transaprent) background: @bg;
Vous pouvez également faire de même pour déclarer frontière et Couleur propriétés, et enregistrez quelques lignes dans votre feuille de style en éliminant les règles inutiles.
J'espère que certaines de ces fonctions vous aideront à améliorer l'arrangement des couleurs dans vos conceptions. Vous pouvez trouver la liste complète des fonctions de couleur LESS ici et commencer à expérimenter. Je suis d'accord avec Kezz Bracey. Il n'y a pas de meilleur moyen de maîtriser les couleurs que d'essais et d'erreurs:
“Ce n’est qu’après que j’ai commencé à créer des combinaisons de couleurs unies par pure méthode d’essais et d’erreur que toute la théorie des couleurs.
Accentsconagua