HTML - TSL
Introduction aux couleurs HSL
HSL (Teinte, Saturation, Luminosité) est un modèle de couleur qui décrit les couleurs en fonction de leurs valeurs de teinte, de saturation et de luminosité. Il offre un moyen simple de représenter et de modifier les couleurs dans le développement web.
Le modèle de couleur HSL présente plusieurs avantages par rapport à d'autres modèles comme RVB (Rouge, Vert, Bleu) et Hexadécimal. HSL est plus intuitif et facile à comprendre car il correspond à la façon dont les humains perçoivent les couleurs. En ajustant les valeurs de teinte, de saturation et de luminosité, vous pouvez créer de nombreuses couleurs et contrôler leur apparence.
Un autre avantage de l'utilisation du HSL est sa flexibilité dans la création de variations de couleurs. En maintenant la teinte constante et en ajustant les valeurs de saturation et de luminosité, vous pouvez générer différentes nuances de la même couleur. Cela est utile lors de la conception de palettes de couleurs ou de la création de hiérarchies visuelles dans vos pages web.
HSL permet également la manipulation dynamique des couleurs. Avec JavaScript, vous pouvez modifier les valeurs de teinte, de saturation ou de luminosité pour créer des transitions ou répondre aux interactions de l'utilisateur. Cela ouvre des possibilités pour créer des expériences utilisateur engageantes.
La prise en charge du HSL par les navigateurs est bonne. Tous les navigateurs web modernes, y compris Chrome, Firefox, Safari et Edge, prennent en charge les couleurs HSL depuis longtemps. Même les versions plus anciennes de ces navigateurs ont pris en charge le HSL, ce qui signifie que vous pouvez l'utiliser dans vos projets sans vous soucier des problèmes de compatibilité.
Conseil: Exemple de couleur HSL
color: hsl(120, 100%, 50%);Ce code définit la couleur sur un vert vif en utilisant les valeurs HSL.
Conseil: Exemple de manipulation dynamique HSL
element.style.color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;Ce code JavaScript change dynamiquement la couleur d'un élément en utilisant HSL.
Syntaxe et utilisation HSL
Teinte
La teinte représente la couleur de base ou la position sur le cercle chromatique, allant de 0 à 360 degrés. Elle détermine la couleur principale du résultat final.
Dans HSL, la teinte est spécifiée comme une valeur d'angle suivie de "deg" ou comme un nombre sans unité.
Conseil: Exemples de teinte
hsl(0, 100%, 50%) /* Rouge */
hsl(120deg, 100%, 50%) /* Vert */
hsl(240, 100%, 50%) /* Bleu */Voici quelques exemples de différentes valeurs de teinte et leurs couleurs correspondantes :
- 0 ou 360 : Rouge
- 60 : Jaune
- 120 : Vert
- 180 : Cyan
- 240 : Bleu
- 300 : Magenta
En changeant la valeur de la teinte, vous pouvez sélectionner différentes couleurs de base du cercle chromatique.
Saturation
La saturation représente la pureté de la couleur, allant de 0% à 100%. Une saturation de zéro donne une couleur en niveaux de gris, tandis qu'une saturation complète représente une couleur pure.
Dans HSL, la saturation est spécifiée comme une valeur en pourcentage.
Conseil: Exemples de saturation
hsl(120, 0%, 50%) /* Niveaux de gris */
hsl(120, 50%, 50%) /* Vert moins saturé */
hsl(120, 100%, 50%) /* Vert entièrement saturé */Voici quelques exemples de différentes valeurs de saturation et leurs effets :
- 0% : Niveaux de gris (pas de couleur)
- 25% : Atténué
- 50% : Modérément saturé
- 75% : Vif
- 100% : Entièrement saturé
Ajuster la saturation vous permet de contrôler l'intensité et la vivacité de la couleur.
Luminosité
La luminosité représente la clarté de la couleur, allant de 0% à 100%. Une luminosité de zéro donne du noir, tandis que 100% donne du blanc. Une luminosité de 50% représente une luminosité normale.
Dans HSL, la luminosité est spécifiée en pourcentage.
Conseil: Exemples de luminosité
hsl(120, 100%, 0%) /* Noir */
hsl(120, 100%, 25%) /* Vert foncé */
hsl(120, 100%, 50%) /* Vert normal */
hsl(120, 100%, 75%) /* Vert clair */
hsl(120, 100%, 100%) /* Blanc */Voici quelques exemples de différentes valeurs de luminosité et leurs effets :
- 0% : Noir
- 25% : Teinte sombre
- 50% : Normal
- 75% : Teinte claire
- 100% : Blanc
En modifiant la valeur de luminosité, vous pouvez rendre les teintes plus sombres ou plus claires, créant ainsi différentes nuances et teintes.
Utilisation de HSL en HTML
Les couleurs HSL peuvent être appliquées aux éléments HTML pour styliser leur apparence. Il existe plusieurs façons d'utiliser HSL en HTML, notamment les styles en ligne, le CSS interne et les fichiers CSS externes.
Pour appliquer une couleur HSL à un élément HTML en utilisant des styles en ligne, vous pouvez utiliser l'attribut style et définir la propriété souhaitée avec la valeur de couleur HSL.
Conseil: Exemple de styles en ligne
<p style="color: hsl(240, 100%, 50%);">Ce texte est d'une couleur bleu vif.</p>La couleur du texte de l'élément <p> est définie sur un bleu vif en utilisant la couleur HSL hsl(240, 100%, 50%) directement dans l'attribut style.
Vous pouvez également utiliser les couleurs HSL dans le CSS interne en plaçant les règles CSS à l'intérieur d'une balise <style> dans la section <head> de votre document HTML.
Conseil: Exemple de CSS interne
<head>
<style>
h1 {
background-color: hsl(120, 80%, 70%);
}
.highlight {
color: hsl(60, 100%, 50%);
}
</style>
</head>
<body>
<h1>Ce titre a un fond vert clair.</h1>
<p class="highlight">Ce paragraphe a une couleur de texte jaune vif.</p>
</body>La couleur de fond de l'élément <h1> est définie sur vert clair en utilisant hsl(120, 80%, 70%), et les éléments avec la classe "highlight" ont leur couleur de texte définie sur jaune vif en utilisant hsl(60, 100%, 50%).
Vous pouvez aussi utiliser les couleurs HSL dans des fichiers CSS externes. Créez un fichier CSS séparé et liez-le à votre document HTML en utilisant la balise <link> dans la section <head>. Dans ce fichier, vous pouvez définir des styles en utilisant les couleurs HSL.
Conseil: Exemple de CSS externe
/* styles.css */
body {
background-color: hsl(200, 60%, 90%);
}
.button {
background-color: hsl(240, 100%, 70%);
color: hsl(0, 0%, 100%);
}<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="button">Cliquez-moi !</button>
</body>La couleur de fond de l'élément body est définie sur bleu clair en utilisant hsl(200, 60%, 90%), et les éléments avec la classe button ont leur couleur de fond définie sur bleu vif en utilisant hsl(240, 100%, 70%), et leur couleur de texte définie sur blanc en utilisant hsl(0, 0%, 100%).
Sélecteur de couleurs HSL et outils
Lors du travail avec les couleurs HSL, il existe divers outils en ligne et ressources pour vous aider à choisir les bonnes couleurs et à convertir entre différents modèles de couleurs.
Les sélecteurs de couleurs HSL en ligne offrent un moyen facile de sélectionner et d'ajuster les couleurs HSL. Ces outils disposent souvent de curseurs ou de champs de saisie pour entrer les valeurs de teinte, saturation et luminosité. Lorsque vous apportez des modifications, la couleur sélectionnée s'affiche en temps réel.
Voici quelques sélecteurs de couleurs HSL en ligne populaires :
- Adobe Color : Propose un sélecteur de couleurs HSL intuitif avec des curseurs et une roue chromatique.
- HSL Color Picker de Google : Un outil simple et convivial.
- CSS Gradient : Permet de créer des couleurs et des dégradés HSL avec une interface visuelle.
Ces outils fournissent également le code CSS correspondant à la couleur HSL sélectionnée, facilitant sa copie et son utilisation dans vos projets.
Il existe également des outils pour convertir entre HSL et d'autres modèles de couleurs comme RGB et Hex. Ces outils sont utiles lorsque vous devez travailler avec des couleurs dans différents formats ou lors de l'intégration avec des schémas existants.
Quelques outils de conversion incluent :
- ColorHexa : Convertit les couleurs HSL en RGB, Hex et autres formats.
- Convertisseur HSL vers RGB de RapidTables : Propose une interface simple pour convertir les valeurs.
- Convertisseur de W3Schools : Convertit les couleurs en leurs équivalents Hex.
Ces outils facilitent la conversion des couleurs entre différents modèles pour que vous puissiez travailler avec elles de manière fluide dans vos projets.
Une autre ressource utile est les générateurs de palettes. Ils vous aident à créer des schémas harmonieux basés sur des valeurs. En sélectionnant une couleur de base ou en fournissant des valeurs, ces générateurs créent des palettes de couleurs assorties.
Voici quelques générateurs de palettes :
- Coolors : Génère des palettes basées sur des valeurs permettant la personnalisation.
- Paletton : Offre un concepteur avancé avec diverses options d'harmonie.
- Générateur de Google : Crée des palettes basées sur des valeurs fournissant des extraits CSS.
Ces outils sont excellents pour explorer des combinaisons créant des designs attrayants utilisant ces couleurs.
Exemple d'utilisation d'un sélecteur en ligne
- Visitez le site web d'Adobe Color (https://color.adobe.com/).
- Sélectionnez "H" dans le menu déroulant des modèles.
- Utilisez les curseurs pour ajuster les valeurs de teinte, saturation et luminosité.
- Copiez le code CSS généré pour la valeur sélectionnée.
- Utilisez cette valeur dans votre code HTML ou CSS.
En utilisant des sélecteurs en ligne, des outils de conversion et des générateurs de palettes, vous pouvez facilement travailler avec ces couleurs et convertir entre les modèles, créant des schémas attrayants pour les projets web.
Exemples pratiques et cas d'utilisation
Les couleurs HSL offrent une façon flexible de créer des designs attrayants en développement web. Examinons quelques exemples pratiques et cas d'utilisation où HSL est utile.
La création de dégradés avec HSL ajoute de la profondeur et de l'intérêt aux éléments. En utilisant les valeurs HSL et les fonctions CSS linear-gradient() ou radial-gradient(), vous pouvez créer des transitions de couleurs fluides.
Conseil: Exemple de dégradé HSL
.gradient-button {
background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%));
}Ce code crée un bouton avec un arrière-plan en dégradé qui passe du rouge au jaune.
En ajustant les valeurs de teinte, saturation et luminosité dans le dégradé, vous pouvez obtenir de nombreuses combinaisons et effets de couleurs.
HSL permet également des changements de couleur dynamiques avec JavaScript. En modifiant programmatiquement les valeurs de teinte, saturation ou luminosité, vous pouvez créer des changements de couleur interactifs basés sur les actions de l'utilisateur ou d'autres événements.
Conseil: Exemple de manipulation dynamique HSL
const element = document.getElementById('dynamic-color');
let hue = 0;
function updateColor() {
element.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
hue = (hue + 1) % 360;
requestAnimationFrame(updateColor);
}
updateColor();Ce code JavaScript change dynamiquement la couleur d'arrière-plan d'un élément en incrémentant la valeur de teinte au fil du temps.
En combinant HSL avec JavaScript, vous pouvez créer des expériences de couleur engageantes et interactives sur vos pages web.
L'implémentation de thèmes de couleurs utilisant HSL est un autre cas d'utilisation pratique. En définissant une valeur de teinte de base pour votre thème et en ajustant les valeurs de saturation et de luminosité, vous pouvez créer un schéma de couleurs cohérent pour votre site web.
Conseil: Exemple de thème de couleur
:root {
--primary-hue:200;
--primary-saturation:100%;
--primary-lightness:50%;
--secondary-hue:60;
--secondary-saturation:100%;
--secondary-lightness:50%;
}
.primary-color {
color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness));
}
.secondary-color{
color:hsl(var(--secondary-hue),var(--secondary-saturation),var(--secondary-lightness));
}Ce code définit des propriétés CSS personnalisées pour les couleurs primaires et secondaires en utilisant des valeurs HSL. En mettant à jour ces valeurs, vous pouvez facilement basculer entre différents thèmes.
L'utilisation de HSL pour les thèmes vous permet de maintenir un aspect cohérent sur votre site web tout en facilitant les ajustements globaux.
Ce ne sont que quelques exemples de la façon dont les couleurs HSL peuvent être utilisées dans des scénarios pratiques.