Le nom de la couleur en HTML joue un r?le très important dans le processus de conception Web et d'applications. Cela contribue à modifier l’apparence de notre site Web ou de notre application et rend notre application plus attrayante et interactive. Il existe différentes manières de définir les noms de couleurs en HTML dans le format de codage HTML. on peut utiliser des propriétés CSS supplémentaires pour l'utiliser plus efficacement. Nous sommes en mesure d'utiliser le nom de couleur HTML au niveau de la page en l'incluant dans la partie du corps, également en mesure de définir une couleur individuelle pour l'élément spécifique. Le nom de la couleur en HTML est délibérément utilisé pour la couleur du texte, la couleur d'arrière-plan, la couleur de la bordure, les ombres, les dégradés et bien d'autres.

Syntaxe

• Il existe différentes manières d'utiliser les couleurs HTML. Voyons un par un.
• L'utilisation très basique de la couleur HTML consiste à l'appliquer au texte. utilisez simplement comme couleur de texte pour afficher le texte dans différentes couleurs HTML.

1. Syntaxe des couleurs du texte

color : color_name;

Voyons comment cette syntaxe fonctionnera,

<h4 style="color:blue;">Welcome to EDUBCA<h4>

Dans l'exemple ci-dessus, le texte Bienvenue sur EDUBCA s'affichera en bleu comme?:

• A l'aide des couleurs HTML, il est également possible de les ajouter comme couleur d'arrière-plan.

2. Syntaxe de la couleur d'arrière-plan

background-color:color_name;

?Voyons comment cette syntaxe fonctionnera,

<p style="background-color:light-green;">

La catégorie abrite toutes les informations sur la conception réparties dans de nombreuses sous-catégories du cours de conception.

• Il est également possible d'ajouter une bordure colorée autour de n'importe quel texte ou élément en utilisant la couleur HTML en utilisant la syntaxe suivante?:

3. Syntaxe de couleur de bordure?: bordure

value color_name;

?Voyons comment cette syntaxe fonctionnera,

<h4 style="border: 4px solid DodgerBlue;"> EDUCBA free certification course </h4>

Types de nom de couleur en HTML

Il existe différentes manières de définir les noms de couleurs en HTML. Il est difficile de se souvenir d’un nom différent dans des couleurs différentes. Il faut donc décider de donner des valeurs aux différentes couleurs. Voyons un par un.

1. Valeur RVB

• C'est l'un des moyens de définir les noms de couleurs HTML dans la combinaison des valeurs de format de couleur Rouge, Vert et Bleu. Lequel est utilisé pour définir l'intensité de la couleur entre le chiffre 0 et 255??
• Si nous voulons définir une couleur noire en utilisant une combinaison RVB, cela ressemblera à RVB(0,0,0). Ici tous les paramètres de couleur seront mis à 0. Il affichera donc une couleur noire.
• Comme un autre RVB (0,0,255) affichera la couleur bleue, car 255 est défini comme la valeur la plus élevée pour le bleu et l'autre est 0.
• Si nous allons à 3 valeurs égales de RVB, alors cela générera des nuances d'une couleur grise.

Exemple?: RVB (0,0,0) pour la couleur la plus foncée où RVB (255,255,255) pour la couleur la plus claire.

2. Valeur HEX

• C'est l'un des formats de nom de couleur les plus couramment utilisés en HTML dans lequel le nom de couleur sera défini au format d'une valeur hexadécimale.
• Le format #rrggbb inclut les valeurs de RR pour le rouge, gg pour le vert et bb pour le bleu sont placées entre 00 et la valeur hexadécimale toff.
• Prenons un exemple définissant la couleur #00ff00 . Ces valeurs seront générées en vert car le vert contient la valeur la plus élevée (ff) où l'autre est définie sur 00.

3. Valeur HSL

• Un autre format pour définir la couleur HTML sous forme de Teinte, Saturation, Luminosité.
• Nous allons maintenant voir tous les termes un par un. La teinte est définie comme le degré de couleur compris entre 0 et 360. 0 pour le rouge, 120 pour le vert et 240 pour le bleu.
• La saturation définit la valeur de la couleur en pourcentage, dans lequel 0?% indique la nuance de gris où 100?% pour la couleur complète.
• La luminosité fonctionne également sous forme de pourcentage, qui définit 0?% pour le noir, 50?% n'est ni pour le clair ni pour l'obscurité, tandis que 100?% est pour le blanc.

4. Valeur RGBA

• Ce type de couleur HTML définit une extension pour la couleur RVB, y compris la valeur alpha où alpha est utilisé pour définir l'opacité de la couleur.
• La valeur alpha est comprise entre 0,0 {entièrement transparent} et 1,0 {pas transparent du tout}
• Exemple : rgba(255,99,71,0)

5. Valeur HSLA

• Cela fonctionne de la même manière que les couleurs HSL valorisent une valeur alpha supplémentaire pour définir l'opacité de la couleur.
• hsla(8,100%,80%,0) pour une couleur entièrement transparente.
• hsla(8,100%,80%,0.9) pour une couleur pas si transparente.

Utiliser les noms de couleurs HTML

La mise en ?uvre des couleurs sur votre page Web est simple et peut être effectuée à la fois en ligne et via une feuille de style CSS distincte.

When you are going to be using the same HTML Color Names on a page multiple times, it is a better idea to use CSS Sheet to define and set colors. Conversely, if you only have to use color once or twice, using the inline method is considered better.

1. Using HTML Color Inline

<body>
<h3 style="color: Brown">Brown H3 Heading</h3>
<p style="color: Gainsboro">Gainsboro colored paragraph text</p>
</body>

2. Implementing in CSS

h1 { color: Brown; }
p { color: Gainsboro; }

Different HTML Color Codes

Colors can be denoted by using their hex value or their name. HTML has support for the most common colors; in this article, I will share with you 140 names and hex values of these colors. One thing to keep in mind is that you don’t have to limit yourself to these colors; you can use any color picker tool to find the Hex value of any color you want and use it on your web page.

Now that you know what HTML Color Names are and how you can use them in your pages, here is a list of Color names with appropriate color codes:

1. Grey and Black HTML Color Names

Grey and Black colors are, in most cases, perfect for the text color of the page as against a white background; these colors have the best readability. One interesting thing to keep in mind is that modern phones with OLED displays done need any battery power to display Black color; if your audience is going to be on mobile, it is a wise idea to use Black as a background color and white or other light colors as the foreground color.

2. Noms de couleurs HTML bleus

Le texte souligné en bleu est considéré comme un lien car il s'agit du style de lien par défaut pour la plupart des navigateurs Web. Vous devez éviter d'utiliser du bleu pour tout le texte d'une page, car les visiteurs peuvent le confondre avec des hyperliens.

3. Grüne HTML-Farben

Auf Websites, die sich mit Natur, Geld, Umwelt usw. befassen, kann Grün eine gute Wahl als Hintergrundfarbe sein.

4. Gelbe HTML-Farbnamen

Gelb kann verwendet werden, um eine nicht ernste Stimmung zu erzeugen und Kreativit?t und Optimismus auf einer Seite zu zeigen. Denken Sie daran, dass Gelb als Hintergrund besser funktioniert als als Textfarbe.

5. Braune HTML-Farben

Ein brauner Hintergrund kann es schwierig machen, den wei?en oder schwarzen Text zu lesen. Sie k?nnen auf andere Farben zurückgreifen, die einen guten Kontrast zu Ihrem Braunton haben.

6. Orange HTML-Farben

Orange eignet sich hervorragend, um einen Punkt hervorzuheben, wenn die Farbe als Hintergrund verwendet wird, und kann ein Gefühl von Begeisterung und W?rme hervorrufen, ohne zu kitschig zu wirken.6. Orange HTML-Farben

7. Rote HTML-Farbcodes

Bei einigen Browsern wird rot unterstrichener Text als besuchte Links verwendet. Sie sollten die Verwendung vermeiden, um die Besucher nicht zu verwirren.

8. Rosa HTML-Farbcodes

Laut Farbwissenschaft k?nnen Rosa und seine Farbt?ne verwendet werden, wenn Sie dem Besucher ein Gefühl von Selbstvertrauen, Raffinesse und W?rme in seinem Unterbewusstsein vermitteln m?chten.

9. Lila und wei?e HTML-Farbcodes

Die Verwendung von wei?er Textfarbe vor wei?em Hintergrund führt dazu, dass der Text für die Benutzer nicht lesbar ist. Abgesehen davon, dass er nicht benutzerfreundlich ist, kann es auch zu SEO-Einbu?en für Ihre Website kommen. Verwenden Sie daher immer Wei? und andere helle Farben vor dunklem Hintergrund.

Einige am h?ufigsten verwendete HTML-Farbcodes

Dies sind einige der beliebtesten Farben, die im Internet verwendet werden; Um diese schnell zu finden, habe ich sie in einer separaten Tabelle zusammengefasst.

Examples of Color Name in HTML

Let us see how color name in HTML is used with the help of some examples mentioned below:

Example #1

Let us consider a general example showing how example color name in HTML is going to be used:

HTML code:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:Violet;">About Life.....</h1>
<h4 >Creativity Is Intelligence Having Fun </h4>
<p style="background-color: #00FFFF; color:blue">

You Learn More From Failure Than From Success. Don’t Let It Stop You. Failure Builds Character. If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You

</p>
</body>
</html>

Output:

Example #2

Now we are taking another example which will define all types of HTML color as follows:

HTML code:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:rgb(255, 0, 0);">RGB defines Red color</h1>
<h1 style="color:rgb(60, 60, 60);">RGB same values define Gray shade</h1>
<h1 style="background-color:#ffa500;">New color using Hex Value</h1>
<h1 style="background-color:#787878;">Shade of Gray</h1>
<h1 style="background-color:hsl(50, 100%, 50%);">hsl color shade</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba color shade</h1>
<h1 style="color:hsla(9, 100%, 80%, 0.5);">hsla color shade</h1>
</body>
</html>

Output:

In the above example, we are able to see the use of different HTML color types and how they are named in HTML.

Example #3

One more use of HTML color is to define a border to the element, which is as follows:

In Example, Here, we can add a border to your code body, changing the background and text colour.

HTML code:

<p style="border: 2px solid #A52A2A; background-color:#ffa500;color:#FFF8DC">Self-actualizing theory talks of intrinsic rewards inherent in the task performance such as job satisfaction, feeling of achievement, etc.</p>

Output:

Conclusion

We came across that HTML colors are defined with different names, percentage value, Hex value, alpha value, and many more. Color name in HTML is used to do color for text, for background, for a border, for gradations. Different types define HTML color name as RGB, hex, hsl, rgba, hsla.

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!