CSS - Références de couleurs

Définir la couleur du texte avec des valeurs RVB

p {
  color: rgb(255, 0 ,0); /* Rouge */
}

Vous pouvez mélanger différents niveaux de rouge, vert et bleu pour créer différentes couleurs :

Exemples de valeurs de couleur RVB en CSS

h1 {
    color: rgb(0 ,128 ,0); /* Vert */
}

.highlight {
    background-color: rgb(255 ,255 ,0); /* Jaune */
}

a {
    color: rgb(128 ,0 ,128); /* Violet */
}

Le RVB vous permet de créer de nombreuses couleurs en modifiant le niveau de chaque composante. Cela offre plus de contrôle que l'utilisation de noms prédéfinis.

CSS prend également en charge les valeurs RVBA (Rouge Vert Bleu Alpha) qui ajoutent une composante d'opacité à la couleur. La valeur d'opacité varie de zéro (transparence totale) à un (opacité totale).

Utilisation de RVBA pour la transparence

div { 
    background-color: rgba(255 ,00 ,00 ,.5); /* Rouge avec cinquante pour cent d'opacité */ 
} 

L'utilisation de RVBA vous permet de créer des couleurs avec transparence sans affecter l'opacité de l'élément entier. C'est utile pour créer des superpositions et d'autres effets où vous avez besoin de contrôler la transparence des couleurs individuelles.

RVB et RVBA sont largement pris en charge en CSS et vous offrent un large éventail d'options par rapport aux noms couramment utilisés dans la conception web.

Définir la couleur du texte en utilisant les valeurs HSL

p {
    color: hsl(0, 100%, 50%); /* Rouge */
}

Exemples de valeurs de couleur HSL en CSS

h1 {
    color: hsl(120, 100%, 50%); /* Vert */
}

.highlight {
    background-color: hsl(60, 100%, 50%); /* Jaune */
}

a {
    color: hsl(300, 100%, 50%); /* Violet */
}

Le modèle HSL vous permet de créer de nombreuses couleurs en ajustant la teinte, la saturation et la luminosité. Il offre une méthode plus intuitive par rapport aux valeurs hexadécimales ou RGB.

Comme pour RGBA, CSS prend également en charge les valeurs HSLA (Teinte, Saturation, Luminosité, Alpha) qui ajoutent une composante d'opacité. La valeur d'opacité varie de zéro (entièrement transparent) à un (entièrement opaque).

Utilisation de HSLA pour la transparence

div {
    background-color: hsla(0, 100%, 50%, 0.5); /* Rouge avec cinquante pour cent d'opacité */
}

L'utilisation de HSLA vous permet de contrôler la transparence des couleurs individuelles sans affecter l'opacité de l'élément entier. Cela est utile pour créer des superpositions translucides, des dégradés et d'autres effets visuels.

HSL et HSLA offrent une façon flexible de spécifier les couleurs. CSS propose une approche intuitive de sélection qui permet des ajustements faciles pour créer des variations. HSL est un bon choix lorsque vous voulez créer des schémas basés sur une seule teinte ou avez besoin de faire des ajustements subtils à un design.

Utilisation des mots-clés de couleur en CSS

.overlay {
  background-color: transparent;
}

.button {
  color: blue;
  border: 2px solid currentColor;
}

.child-element {
  color: inherit;
}

.overlay a un arrière-plan transparent, permettant au contenu derrière lui d'être visible. Cela est utile pour créer des superpositions ou des éléments semi-transparents.

.button utilise currentColor. Le texte est bleu et en utilisant currentColor pour border-color, le texte et la bordure seront tous deux bleus. Si vous changez la couleur du texte plus tard, la bordure se mettra à jour automatiquement.

.child-element utilise inherit. Il prend la couleur de texte de son parent sans nécessiter de spécification explicite.

Les mots-clés de couleur offrent un moyen d'appliquer des couleurs basées sur des significations spécifiques ou des relations entre les éléments. Ils peuvent être utilisés avec d'autres notations comme les valeurs hexadécimales, RVB ou TSL pour un style flexible dans votre CSS.

Définir la couleur du texte

La propriété color définit la couleur du texte d'un élément. Elle peut être appliquée à tout élément contenant du texte, comme les paragraphes, les titres, les liens ou les éléments span.

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

a {
  color: rgb(0, 128, 0);
}

Dans ces exemples, la propriété color définit la couleur du texte des paragraphes en bleu, des titres en rouge en utilisant une valeur hexadécimale, et des liens en vert en utilisant une valeur RGB.

Définir la couleur de fond

La propriété background-color définit la couleur de fond d'un élément. Elle peut être appliquée à n'importe quel élément.

div {
  background-color: yellow;
}

.container {
  background-color: #f0f0f0;
}

button {
  background-color: hsla(240, 100%, 50%, 0.8);
}

Dans ces exemples, la propriété background-color définit la couleur de fond d'un élément div en jaune, d'une classe container en gris clair en utilisant une valeur hexadécimale, et d'un bouton en bleu semi-transparent en utilisant une valeur HSLA.

Définir la couleur de bordure

La propriété border-color définit la couleur de la bordure d'un élément. Elle peut être appliquée si l'élément a une bordure.

.box {
  border: 2px solid;
  border-color: red;
}

input[type="text"] {
  border:1px solid; 
  border-color:#ccc; 
} 

button { 
  border: 3px solid; 
  border-color: rgb(0, 0, 0); 
} 

Dans ces exemples, la propriété border-color définit la couleur de bordure d'une classe box en rouge, d'un champ de saisie en gris clair en utilisant une valeur hexadécimale, et d'un bouton en noir en utilisant une valeur RGB. Ces propriétés de couleur acceptent diverses notations de couleur telles que les noms de couleur, les valeurs hexadécimales, RGB, RGBA, HSL et HSLA. Vous pouvez utiliser ces notations selon la couleur que vous souhaitez appliquer. En utilisant ces propriétés de couleur, vous pouvez contrôler la couleur du texte, la couleur de fond et la couleur de bordure des éléments dans vos pages web, créant ainsi des designs visuellement attrayants et cohérents.

Utilisation de RGBA pour la transparence des couleurs

Pour appliquer de la transparence à une couleur en utilisant RGBA, utilisez la fonction rgba() :

.overlay {
  background-color: rgba(255, 0, 0, 0.5); /* Rouge avec 50% d'opacité */
}

p {
  color: rgba(0, 0, 255, 0.8); /* Bleu avec 80% d'opacité */
}

• L'élément .overlay a un arrière-plan rouge semi-transparent.
• Le texte dans les paragraphes est défini en bleu avec une valeur alpha de 0,8.

Utilisation de HSLA pour la transparence des couleurs

Similaire à RGBA :

.button {
  background-color: hsla(120%,100%,50%, .6); /* Vert avec 0,6 d'opacité */
}

a {
  color: hsla(240%,100%,50%, .9); /* Bleu avec 0,9 d'opacité */
}

• L'élément .button a un arrière-plan vert semi-transparent.
• Les liens ont une couleur bleue définie avec une valeur alpha de 0,9.

Utilisation de la propriété Opacity

CSS fournit également la propriété opacity :

img {
  opacity: .5; /* Rend l'image à moitié opaque */
}

.container { 
  opacity: .8; /* Rend le conteneur majoritairement opaque */ 
}

• Une image est rendue à moitié opaque en définissant son opacity.
• Un élément conteneur est majoritairement opaque en définissant son opacity.

Notez que lors de l'utilisation d'opacity, cela affecte à la fois un élément et son contenu. Si vous voulez de la transparence uniquement sur des parties ou des couleurs spécifiques à l'intérieur d'un élément sans affecter l'opacité des éléments enfants, utilisez plutôt RGBA ou HSLA.

Dégradés linéaires

Les dégradés linéaires créent une transition en ligne droite d'une couleur à une autre. Pour créer un dégradé linéaire, utilisez la fonction linear-gradient() comme valeur pour la propriété background-image.

.linear-gradient {
  background-image: linear-gradient(to right, red, blue);
}

.linear-gradient-multiple {
  background-image: linear-gradient(to bottom right, red, yellow, green);
}

Dégradés radiaux

Les dégradés radiaux créent une transition circulaire ou elliptique entre les couleurs. Pour créer un dégradé radial, utilisez la fonction radial-gradient() comme valeur pour la propriété background-image.

.radial-gradient {
  background-image: radial-gradient(circle, blue, green);
}

.radial-gradient-multiple {
  background-image: radial-gradient(circle at top left, red, yellow, green);
}

Exemples de création de dégradés en CSS

Voici quelques exemples supplémentaires :

.linear-gradient-transparent { 
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); 
} 

.repeating-linear-gradient {   
  background-image: repeating-linear-gradient(45deg, red 10px, blue 20px);    
}  

.radial-gradient-custom {     
  background-image: radial-gradient(ellipse, yellow, green, blue);      
}    

Les dégradés sont des fonctionnalités utiles en CSS qui vous aident à créer des arrière-plans attrayants pour les boutons, les sections, les arrière-plans de page entière, et plus encore. Avec la flexibilité offerte par les deux types, ainsi que la possibilité de contrôler des propriétés telles que les positions des couleurs et la transparence, de nombreux effets créatifs sont possibles dans vos pages web.

Monochromatique

Un schéma de couleurs monochromatique utilise différentes nuances, teintes et tons d'une seule couleur. Il crée un aspect unifié et est agréable à l'œil. Pour créer ce schéma, choisissez une couleur de base, puis utilisez ses variations plus claires et plus foncées.

Complémentaire

Un schéma de couleurs complémentaire utilise des couleurs opposées sur le cercle chromatique. Ces couleurs créent un fort contraste mais doivent être utilisées avec précaution pour éviter une tension visuelle. Par exemple : bleu et orange, rouge et vert, ou violet et jaune.

Analogues

Un schéma de couleurs analogues utilise des couleurs adjacentes sur le cercle chromatique. Ces couleurs créent une combinaison harmonieuse. Pour créer ce schéma, choisissez une couleur primaire puis utilisez les couleurs directement à sa gauche et à sa droite.

Triadique

Un schéma de couleurs triadique utilise trois couleurs réparties uniformément sur le cercle chromatique. Ce schéma crée un aspect équilibré. Pour le créer, choisissez une couleur primaire puis tracez un triangle équilatéral sur le cercle pour trouver les deux autres couleurs.

Lors de la création d'une palette pour votre site web, des outils peuvent vous aider à générer des schémas selon vos préférences :

• Adobe Color : Cet outil vous permet de créer des schémas basés sur différentes règles comme le monochromatique ou le complémentaire.
• Coolors : Coolors est rapide et facile à utiliser pour générer des palettes aléatoires ou ajuster des couleurs individuelles.
• Paletton : Paletton vous permet de créer des schémas basés sur des modèles comme le monochromatique ou le triadique avec des options de réglage fin.

En utilisant ces outils et en comprenant les différents types de schémas, vous pouvez créer des palettes attrayantes pour vos designs web tout en tenant compte du message de marque et de l'expérience utilisateur lors du choix de vos couleurs, en expérimentant jusqu'à trouver la palette parfaite pour votre site.