Qu'est-ce que HSL et pourquoi les concepteurs devraient le maîtriser

La couleur est l'un des outils les plus puissants de la boîte à outils d'un concepteur, mais travailler avec des systèmes traditionnels comme Hex et RVB peut parfois se sentir limitant. Ces formats fonctionnent, mais ils ne reflètent pas comment nous voyons ou pensons réellement à la couleur. Besoin d'une teinte plus légère ou vous voulez faire correspondre la saturation sur différentes teintes? Vous êtes à deviner.

C'est là que la teinte, la saturation et la légèreté (HSL) entrent en jeu. Il rend les ajustements de couleur plus visuels et prévisibles, et Divi 5 le prend maintenant en charge nativement grâce à sa version relative des couleurs et de la fonction HSL. Explorons comment cela fonctionne et pourquoi vous voudrez le maîtriser.

Pourquoi la plupart des concepteurs ont du mal avec les choix de couleurs

Les outils de couleur ne correspondent souvent pas à la façon dont nous pensons naturellement à la couleur. Vous voyez une nuance de bleu que vous aimez, mais la seule façon de le capturer est par un code hexadécimal comme # 4A90E2. Ces lettres et chiffres ne signifient rien pour votre cerveau.

Les couleurs hexadécimales sont fabriquées en mélangeant des valeurs rouges, vertes et bleues. Chaque paire (comme 4A, 90, E2) montre quelle part de chaque couleur est utilisée, de 0 à 255. Ensemble, ils créent la couleur finale # 4A90E2.

Vous pouvez avoir du mal à déterminer les chiffres à changer lorsque vous avez besoin d'une version plus légère de votre marque Blue. Devriez-vous augmenter également toutes les valeurs RVB? Ou ajuster un seul canal RVB (rouge, vert ou bleu)? Les chiffres ne correspondent pas à ce que vos yeux attendent, donc vous vous ajustez et prévisualisez jusqu'à ce qu'il se sente bien.

Les systèmes de couleurs traditionnels créent des problèmes plus importants lorsque vous travaillez dans différents contextes. La création de variations de couleurs devient de purs conjectures. Vous voulez cinq nuances qui fonctionnent ensemble, mais il n'y a pas de système pour cela. Lightening # 4A90E2 à # 6BA3E8 peut sembler bien, ou il peut sembler lancé. Vous ne saurez pas avant que vous ne le voyiez.

Obtenir des nuances en changeant de codes hexadécimaux n'est pas simple. De nouvelles valeurs hexadécimales (# 6BA3E8) sont soigneusement choisies sur la gauche pour créer une teinte plus légère de # 4A90E2. À droite, il suffit de faire des modifications nominales (# 3B99E5) n'allument pas la couleur mais la modifie complètement.

Ce flux de travail lent et manuel prend des heures à terminer. Vous modifiez les valeurs, vérifiez l'aperçu et modifiez à nouveau, combattant les outils au lieu de concevoir. Votre attention est aspirée dans les détails techniques lorsqu'il devrait se concentrer sur la façon dont les couleurs font ressentir les gens.

De nombreux concepteurs finissent par éviter l'expérimentation des couleurs parce que le processus est si maladroit. Vous vous en tenez avec des choix sûrs ou des palettes de copie d'autres sites. Les outils qui devraient vous aider à explorer la créativité des couleurs la limitent en fait.

Le problème avec les valeurs RVB statiques

Les valeurs RVB ne se comportent pas toujours comme vous vous y attendez. Le vert semble bien plus brillant que le bleu au même réglage, mais le système les traite également. RVB (128, 128, 128) est un gris moyen parfait, mais il peut varier en fonction de l'écran, de l'éclairage ou du profil de couleur utilisé.

Vous voulez une version plus légère de la couleur de votre marque? Vous pouvez essayer de augmenter les valeurs RVB, et parfois, vous obtenez ce que vous attendez. D'autres fois, vous obtenez quelque chose qui a l'air lancé et bizarre. Il n'y a aucun moyen de le dire à l'avance.

La couleur bleue de la marque avec les valeurs RVB a augmenté également de +50, ce qui a entraîné une teinte lavée, qui n'est pas la tonalité plus claire lisse attendue. Cela montre que l'ajout de la même quantité à chaque canal RVB ne produit pas toujours des nuances de couleurs prévisibles ou équilibrées.

Les couleurs RVB se déplacent également entre différents programmes. Cela se produit en raison de différences de profils de couleurs, de moteurs de rendu et de la façon dont les navigateurs interprètent ces valeurs. Choisissez une teinte parfaite dans Photoshop, copiez le code hexadécimal sur votre site Web, et cela pourrait toujours sembler légèrement différent. Les directives de la marque deviennent plus difficiles à appliquer lorsque le même code couleur semble légèrement différent entre les navigateurs et les outils de conception.

Chaque couleur change à sa manière lorsque vous essayez de l'alléger ou de l'assombrir. Parce que RVB n'ajoute pas les couleurs uniformément, certaines teintes s'estompent plus rapidement ou se déplacent de manière inattendue. Certaines teintes se désaturer plus rapidement que d'autres à mesure que la légèreté augmente. Votre bleu devient gris pendant que votre rouge reste dynamique. Votre violet devient boueux pendant que votre orange reste propre.

Le travail des couleurs se transforme en essai et erreurs au lieu d'une conception intentionnelle.

Quel est le système de teinte, de saturation et de légèreté (HSL)?

La teinte, la saturation et la légèreté (HSL) divisent la couleur en trois parties qui correspondent à la façon dont votre cerveau pense réellement à la couleur. Hue choisit la couleur de base d'une roue de 360 ​​options. La saturation contrôle à quel point cette couleur est vibrante ou gris. La légèreté décide si elle est sombre, brillante ou quelque part entre.

Lorsque vous pensez: «Je veux un vert foncé», vous pensez déjà aux termes HSL. Vous savez que vous voulez du vert (teinte), probablement assez riche (saturation) et du côté plus sombre (légèreté).

Comment les trois composants fonctionnent ensemble

Hue fonctionne comme une roue chromatique coupée du spectre lumineux visible. Les extrémités se connectent au rouge au magenta, créant une boucle lisse de toutes les couleurs possibles. Vous voulez l'orange parfaite? Commencez au rouge (0 degrés) et passez vers le jaune à environ 30 degrés.

La saturation mesure la pureté des couleurs en pourcentage. Le pourcentage zéro supprime toute la couleur, laissant le gris. Cent pour cent donne la version la plus vive possible. Considérez la saturation comme la différence entre un signe de néon et une aquarelle en sourdine.

Comment fonctionnent les couleurs HSL, inspirées par le graphique sur Wikipedia du même sujet

La légèreté varie de 0% (noir pur) à 50% (neutre) à 100% (blanc pur). La plupart des couleurs utilisables vivent entre 20% et 80% de légèreté. Cela correspond à la façon dont vous pensez naturellement à rendre les couleurs plus claires ou plus sombres.

Pourquoi les constructeurs de page évitent généralement HSL

La plupart des constructeurs de pages s'en tiennent à des codes hexadécimaux et au RVB pour des raisons pratiques, pas parce que ces systèmes fonctionnent mieux. Les développeurs de constructeurs sont confrontés à de vrais obstacles techniques. Les utilisateurs connaissent déjà les codes hexadécimaux de Photoshop et d'autres outils de conception. La conversion entre les systèmes de couleurs nécessite un traitement supplémentaire.

Soutenir HSL signifie construire de nouvelles interfaces et éduquer les utilisateurs sur les concepts inconnus, à moins que le cueilleur de couleurs HSL ne soit parfaitement cloué. Cette approche conservatrice a du sens d'un point de vue commercial, même si elle limite les possibilités créatives.

Créez des variations de couleur parfaites avec les nouveaux contrôles HSL de Divi 5

HSL sonne bien en théorie, mais la théorie ne construit pas de sites Web. Vous avez besoin d'outils qui soutiennent cette approche. La plupart des constructeurs de pages vous forcent dans les codes hexadécimaux et les conjectures RVB. Divi 5 change tout sur la façon dont vous travaillez avec la couleur. Mais d'abord:

Qu'est-ce que Divi?

Divi est un constructeur de pages qui fonctionne différemment des autres constructeurs de page WordPress. Vous obtenez des outils de conception visuelle mélangés à de graves commandes de typographie. L'éditeur en direct montre vos modifications instantanément. Ajustez les tailles de police, modifiez l'espacement des lignes et regardez la mise à jour de votre page là-bas.

Vous pouvez laisser tomber plus de 200 modules où vous le souhaitez. Les blocs de texte, les titres et les pièces de contenu spéciaux jouent tous bien ensemble.

Voici ce qui rend Divi Special: 2000+ Dispositions prêtes à l'emploi conçues pour de vraies entreprises. Nous parlons de conceptions réelles, pas de modèles de démarrage de base. Besoin de quelque chose pour votre restaurant? Il y a une mise en page pour cela. Gérer un studio de photographie? Nous vous avons couvert. Les consultants et les startups technologiques obtiennent également leurs propres conceptions.

Chaque mise en page connaît votre industrie. Les couleurs, l'espacement et le contenu coulent tous de sens pour la façon dont vos clients pensent et parcourent.

Prendre le contrôle complet du site

Le constructeur de thèmes met chaque morceau du style de texte de votre site entre vos mains. Créez des en-têtes personnalisés qui parlent la langue de votre marque. Des conception de pages de blog qui rendent les longs articles faciles à lire. Vos pages d'erreur 404 peuvent conserver les mêmes polices et style que le reste de votre site.

Divi Ai apporte l'intelligence artificielle directement dans votre flux de travail. Générez les titres qui ressemblent à ce que vous les écriviez. Créez une copie de produit qui correspond exactement à votre voix de marque.

Il construit des sections de pages entières qui comprennent votre entreprise.

Écrit des extraits de code lorsque vous en avez besoin.

Le Divi Ai travaille également avec vos images à l'intérieur du constructeur. Décrivez ce qui doit être réparé dans n'importe quelle image et comment il apporte ces modifications.

Générez même de nouvelles images à la demande.

Ignorez le problème de la page vierge avec des sites rapides Divi

Divi Quick Sites résout le problème de la page vierge qui arrête de nombreux projets avant de commencer. Les sites de démarrage professionnels sont livrés avec une typographie déjà installée. Notre équipe de conception construit ces modèles avec des images et des illustrations uniques que vous ne verrez nulle part ailleurs.

Les sites rapides divi avec Divi AI peuvent également créer des dispositions personnalisées en fonction de la description de votre entreprise. Parlez-lui de votre pratique de conseil ou de votre restaurant, et il crée des pages pertinentes avec une copie appropriée pour votre industrie.

Cela va au-delà d'un simple wireframe. Vous obtenez de vrais titres, une copie corporelle et des images qui ont du sens pour votre entreprise. Vous pouvez définir vos polices et couleurs de marque à l'avance ou laisser l'IA choisir pour vous.

Par la suite, tout reste entièrement modifiable, vous pouvez donc affiner la typographie pour correspondre à votre vision.

Quoi de neuf dans Divi 5?

Divi 5 est la prochaine version du constructeur de page, actuellement en test alpha et prêt pour de nouveaux projets de site Web. Nous nous sommes concentrés sur des améliorations pratiques qui accélèrent votre travail quotidien et rendent les sites de construction plus agréables.

Les meilleures pièces de Divi actuelles sont restées en place pendant que nous avons reconstruit tout le reste. La conception de l'interface fraîche répond à des performances améliorées sous le capot. Les pratiques de codage modernes alimentent tout le système maintenant.
Les pages se chargent plus rapidement qu'auparavant. Les contrôles répondent plus rapidement lorsque vous cliquez sur eux. La typographie reste cohérente sur l'ensemble de votre site sans travail manuel supplémentaire.

Voici quelques faits saillants:

• Rebuild Framework complet vide l'ancien système shortcode. Tout fonctionne sur une architecture moderne basée sur des blocs que les navigateurs gèrent beaucoup mieux.
• Le système Flexbox de Divi 5 vous donne un contrôle direct pour créer des dispositions modernes et réactives, gérer facilement l'alignement, l'espacement et l'enveloppe sans code personnalisé.
• Le système de couleurs HSL apporte des contrôles de couleurs qui correspondent à la façon dont les concepteurs pensent. Ajustez la teinte, la saturation et la légèreté au lieu de deviner avec des codes hexadéciques.
• Sept points d'arrêt personnalisés remplacent l'ancienne limite à trois taille. Votre typographie est parfaite sur chaque appareil que vos visiteurs utilisent.
• CSS fonctionne intégrée Means Calc (), CLAMP (), Min () et Max () fonctionnent bien dans l'éditeur visuel. Créer un texte réactif qui évolue naturellement sans code.
• Les variables de conception globales stockent les polices, les couleurs et l'espacement en un seul endroit. Changez votre police de cap principale une fois. Chaque H1 à travers le site se met à jour automatiquement.
• Le système de conception basé sur prédéfini comprend des préréglages d'éléments pour les modules individuels plus des préréglages de groupe d'options pour les styles de typographie complets. Pour garder les choses cohérentes, utilisez-les sur différents modules.
• Une nouvelle interface Visual Builder obtient des panneaux d'amarrière, des fenêtres à onglets, des raccourcis clavier et une meilleure vue de couches avec du fil à fil. La navigation devient beaucoup plus facile.
• Les lignes imbriquées mettent des lignes à l'intérieur d'autres lignes pour des dispositions complexes. Créez des dispositions de mise en page avancées sans types de sections spéciales.
• Les groupes de modules combinent différents éléments en unités uniques. Cela facilite la gestion des dispositions de texte complexes et vous pouvez également créer des modules personnalisés.
• L'espace de travail multi-panels déplace les panneaux partout où fonctionne le mieux. Gardez les commandes de typographie ouvertes lors de l'ajustement d'autres trucs de conception.
• Attribut la gestion des copies, collets et réinitialise les styles de typographie entre les éléments. Choisissez des attributs spécifiques à transférer au lieu de tout copier.
• Les modes d'interface légers / sombres réduisent la contrainte oculaire pendant les longues séances de conception.
• La mise à l'échelle de Canvas montre à quoi ressemble la typographie sur différentes tailles d'écran sans quitter l'éditeur.

Découvrez toutes les versions de fonctions Divi 5

Comment créer des couleurs HSL avec Divi 5

Comme mentionné, Divi 5 reconstruit le sélecteur de couleurs à partir de zéro. La nouvelle interface laisse tomber les codes hexadécimaux pour les contrôles HSL qui fonctionnent comme votre cerveau pense à la couleur. Trois curseurs gèrent le travail:

• Hue accepte 0 à 360 degrés et les valeurs négatives s'enroulent (par exemple, -60 devient 300). La roue chromatique se connecte aux deux extrémités. Zéro, 360 et 360 négatifs vous donnent tous le même rouge. Besoin d'une couleur complémentaire? Réglez la teinte à 180 degrés à partir de votre point de départ.
• La saturation se déroule de 0% à 100% et contrôle à quel point votre couleur est vivante. Le pourcentage de zéro dépouille toute l'intensité des couleurs, laissant le gris. Cent pour cent donne une couleur complète.
• La légèreté fonctionne dans la même plage de pourcentage. Zero rend le noir, 100% crée du blanc et 50% montre la forme pure de la teinte que vous avez choisie.

Les contrôles mettent à jour en direct pendant que vous faites glisser. Appliquer des boutons ou des retards de rafraîchissement n'interrompent pas votre flux de travail.

1. Construisez des couleurs relatives à partir des couleurs mondiales

Les couleurs relatives vous permettent de créer de nouvelles couleurs basées sur les couleurs globales existantes en peaufinant les composants HSL individuels. Commencez dans le gestionnaire de variables de conception en ajoutant une nouvelle couleur.

À l'aide du sélecteur de couleurs, définissez votre couleur de base (cela pourrait être la couleur de la marque) pour correspondre à la couleur globale primaire existante.

Installons les couleurs secondaires en utilisant votre changement de teinte primaire pour créer des couleurs complémentaires. Prenez votre couleur primaire, avec une légèreté à 25%.

Vous pouvez même jouer avec la teinte ou la saturation pour créer une nouvelle couleur comme couleur secondaire.

Les échantillons de couleurs vous montrent des informations importantes en un coup d'œil. Vous pouvez savoir si quelque chose utilise une variable de conception et voir comment les filtres HSL modifient la couleur de base. Cette rétroaction visuelle vous aide à comprendre ce qui se passe avec vos relations de couleur.

De même, créez des nuances plus foncées pour la couleur du texte de la tête et les couleurs globales du texte du corps en utilisant la couleur primaire comme base.

Vous pouvez, bien sûr, créer des couleurs plus décoratives ici, et vous pouvez toujours saisir manuellement les valeurs hexadécimales, RVB ou nommées.

2. Gérer les relations variables de conception multicouches

Les variables de conception peuvent s'empiler les unes sur les autres pour des systèmes de couleurs complexes. En fonction de votre primaire, vous pouvez créer des couleurs décoratives supplémentaires, comme la mousse brûlée. Ensuite, réduisez l'opacité de la mousse brûlée pour construire une couleur d'ombre.

Ces relations imbriquées montrent comment Divi 5 gère des hiérarchies de couleurs complexes. Lorsque vous ajustez la couleur primaire, la couleur de la mousse brûlée se met à jour d'abord, déclenchant la couleur de l'ombre pour mettre à jour. Toute la chaîne reste connectée.

Cette approche modifie la gestion des couleurs de la devinettes aléatoires dans un système prévisible. La palette de couleurs de votre site Web reste harmonieuse sans ajustements manuels sur chaque élément.

3. Appliquez des couleurs HSL à votre site

Appuyez sur n'importe quel module de texte et ouvrez le sélecteur de couleurs. Vos variables enregistrées apparaissent avec des indicateurs. Cliquez sur «Couleur secondaire» et il remplira l'arrière-plan d'une section. La même couleur fonctionne pour les boutons, les arrière-plans et les bordures.

La typographie fonctionne lorsque vous vous en tenez à une teinte mais changez de légèreté. Les titres peuvent utiliser la couleur primaire à -25% de légèreté. Le texte du corps devient un peu plus léger à -15%. Les liens se trouvent à -45%. Tout se rapporte mais reste clair.

Les arrière-plans ont besoin de couleurs de votre marque. Poussez la légèreté jusqu'à 95%. Baisser la saturation à 15%. Maintenant, vous avez des antécédents de marque qui ne luttent pas sur le contenu. Les boutons fonctionnent avec une saturation complète. Les états de survol poussent la légèreté d'un cran. Même couleur, intensité différente.

Le texte clair a besoin d'arrière-plan sombres. Les numéros de légèreté vous indiquent ce qui fonctionne. Texte à 50% des paires de légèreté avec des arrière-plans inférieurs à -30% de la légèreté.

Des sections avec du texte sombre sur des arrière-plans lumineux inversent les valeurs. Même teintes, même saturation. Échangez les valeurs de légèreté et vous avez terminé. Et bien sûr, toutes ces couleurs maintiennent leurs liens même après avoir été appliqués. Changez une variable et tout s'adapte. Aussi facile!

4. Enregistrez vos couleurs HSL comme préréglages réutilisables

Une fois que vous avez créé vos modules et appliqué les variables de conception des couleurs, préréglez ces couleurs dans des styles réutilisables. Divi 5 propose deux types de préréglage qui fonctionnent ensemble:

Les préréglages du groupe d'options contrôlent les aspects de conception spécifiques dans tous les modules. Style vos titres avec la variable de conception de couleur de texte de titre. Ajoutez des ombres à votre colonne à l'aide de la mousse brûlée et de 50% d'opacité. Survolez l'icône du module de groupe d'options dans n'importe quel module, étiquetez de manière appropriée et enregistrez.

Il en va de même pour les arrière-plans, l'espacement, les animations et le texte. Ajoutez un rayon de bordure via une variable de conception numérique et configurez le préréglage référençant cette variable de nombre. Chaque groupe d'options gère son propre territoire de conception et peut être appliqué croisé, c'est-à-dire que le rayon de bordure d'une colonne peut être appliqué à votre appel à l'action.

Pour postuler, accédez à l'option appropriée et sélectionnez le préréglage.

Les préréglages élémentaires enregistrent les styles de module complets. Style un module de bouton avec votre couleur secondaire à 80% de légèreté. Cliquez sur le sélecteur prédéfini en haut à droite des paramètres du module. Créez un nouveau préréglage appelé «Brand Color Button». Cela économise tous les paramètres du bouton, y compris vos couleurs HSL.

Maintenant, lorsque vous ajoutez un nouveau bouton, appliquez ce préréglage et hérite de l'ensemble du style. Pour couper votre travail pour vous, prenez tout préréglage personnalisé (groupe ou élément d'options) que vous avez créé et cliquez sur l'icône Star à côté. Ce préréglage devient la valeur par défaut pour toutes les nouvelles instances de cet élément ou du groupe d'options.

Vos relations HSL restent intactes dans les préréglages. Lorsque vous mettez à jour une couleur, chaque module et préréglage à l'aide de ces mises à jour de couleur. Construisez des bibliothèques prédéfinies pour des sections lumineuses, des sections sombres et des moments de marque spéciaux. Les valeurs HSL voyagent avec chaque préréglage, en gardant votre système de couleurs cohérent entre les projets.

Créez des systèmes de couleurs pour vos sites Web avec Divi 5

Le travail de couleur prenait des jours. Vous obtiendrez des codes hexadéciques, copiez des valeurs entre les programmes et priez quelque chose qui semblait décent.

HSL fait que la couleur fonctionne à nouveau. Vous voyez une teinte que vous aimez et savez exactement comment la recréer. Hue choisit la couleur, la saturation contrôle à quel point elle est vive et la légèreté la rend plus brillante ou plus sombre. Maintenant, Brand Refresh prend des minutes au lieu des heures.

C'est un véritable contrôle de conception. Divi 5 fait que cela se produit aujourd'hui.