Introduction au HTML
Le HTML, comme tout le monde le sait, s'appelle HyperText Markup Language, qui est utilisé pour afficher des textes sur votre navigateur et à l'aide de ses scripts d'aide spéciaux comme JavaScript et CSS, ce contenu de votre devient beau à regarder. Le codage couleur fait partie de l'embellissement de votre page Web HTML.
Le code couleur en HTML fonctionne comme un identifiant qui identifie et représente cette couleur sur le Web. Le codage couleur couramment utilisé est de HEX qui représente le code «hexadécimal» pour cette couleur. De même, il existe d'autres codes de couleur comme RVB court pour «Rouge, vert, bleu». Un autre code de couleur appelé HSL, abréviation de 'Hue, Saturation, Lightness'. Le HSL est un avantage supplémentaire lors du choix de la couleur de votre choix.
Étant donné que l'utilisation de codes hexadécimaux est généralement préférée, nous avons expliqué les codes hexadécimaux à notre meilleur. Les codes couleurs hexadécimaux contiennent un symbole, un hachage (#) et un ensemble de six chiffres ou nombres. Ils sont dans le système numérique hexadécimal. Ainsi, un «FF» est le nombre le plus élevé et représente « 255» du système numérique hexadécimal.
Ces six chiffres contiennent trois paires représentant le code couleur RB. Sur ces six chiffres, la première paire de deux chiffres représente l'intensité de votre couleur «rouge». Ainsi, un «FF» pour la place de notre première paire représentera la couleur rouge avec une intensité maximale. «00» est utilisé pour la moindre intensité et «FF» pour la plus élevée. Pour obtenir une couleur «verte», la paire du milieu représente l'intensité.
De même pour «Bleu», la dernière paire représente l'intensité.
- Ainsi, un nombre hexadécimal tel que # FF0000 se traduira par
- Un nombre hexadécimal tel que # 00FF00 entraînera
- Et un nombre hexadécimal tel que # 0000FF entraînera
- Pour obtenir une couleur jaune, qui est une combinaison de «Rouge» et «Vert», un nombre hexadécimal similaire est créé tel que # FFFF00.
Sélecteur de couleurs HTML
Un sélecteur de couleurs lorsqu'il est créé permet à un utilisateur de « choisir» une couleur de son choix. Le sélecteur de couleurs le plus standard est utilisé dans les applications Windows comme MS Word ou Paint et autres. Vous connaissez tous un sélecteur de couleurs, vous pouvez vous rafraîchir la mémoire en regardant l'image ci-dessous:
Un type d'entrée comme «couleur » est utilisé pour créer des champs d'entrée qui contiendront une couleur. Mais certains navigateurs comme Internet Explorer 11 et les versions antérieures ne prennent pas en charge ce type d'entrée. Ainsi, selon le navigateur, un sélecteur de couleurs apparaît lorsque vous utilisez le type d'entrée. Certains navigateurs transformeront simplement ce champ de saisie en une zone de texte comme ci-dessous:
Ainsi, lorsqu'un navigateur pris en charge est utilisé, le même code se traduira par la palette de sélecteur de couleurs suivante
Et lorsque cette case colorée est cliquée, une palette de couleurs apparaît. Ici, j'utilise la version de Google Chrome «78.0.3904.97» qui prend en charge l'attribut de couleur du type d'entrée.
Le code pour créer un tel sélecteur de couleur sera expliqué dans la section suivante.
Code source pour créer un sélecteur de couleurs
Voici une explication pour créer le sélecteur de couleurs le plus simple en HTML. Voir le code ci-dessous:
Code
Select your favorite color:
Le code HTML ci-dessus contient un élément FORM qui utilise un type d'entrée appelé «couleur». Ce type d'entrée de couleur crée et affiche le sélecteur de couleurs le plus simple, le sélecteur de couleurs standard de Windows. Il permet à l'utilisateur de sélectionner une couleur de son choix.
Le type d'entrée en tant que couleur crée une zone de texte ou plus d'un bouton qui a «Noir» comme couleur d'arrière-plan par défaut. Lorsque nous cliquons dessus, il affiche un choix de couleurs pour l'utilisateur.
Observez le fonctionnement de ce sélecteur de couleurs ci-dessous:
Étape 1: Cliquez sur le bouton avec «Noir» comme couleur de fond par défaut.
Le code ci-dessus crée simplement un bouton comme indiqué ci-dessus.
Étape 2: Cliquez et sélectionnez votre nouvelle couleur.
Étape 3 : Nous avons sélectionné une couleur vert vif pour la démonstration. Cliquez sur le bouton 'OK' .
Dans les captures d'écran ci-dessus, vous pouvez facilement voir, la couleur sélectionnée est affichée dans la dernière capture d'écran.
Le type d'entrée «couleur» fournit cette fonctionnalité simple du sélecteur de couleurs en HTML5. Après avoir choisi votre couleur, c'est à vous de choisir à quoi la couleur sélectionnée peut être utilisée.
Dans l'exemple suivant , j'ai incrémenté l'exemple ci-dessus et l'ai modifié avec quelques inclusions.
L'exemple suivant est une combinaison de HTML et Javascript. Cet exemple a un élément FORM qui utilise la balise 'color' du type d'entrée. Ce FORMULAIRE une fois soumis, notre JAVASCRIPT est déclenché.
Observez le code source de l'élément FORM ci-dessous:
Code:
Select your favorite color:
Nous avons ajouté une nouvelle ligne à notre programme précédent. Un bouton de soumission. Ce bouton d'envoi est lorsque cliqué, notre script Java est déclenché qui est donné ci-dessous:
function ReturnColor(c)
(
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code.
document.write(str+c);
)
Lorsque le bouton «Soumettre» est cliqué, notre fonction en javascript est déclenchée. La fonction ci-dessus, ReturnColor (), renvoie le code HEX, c'est-à- dire le code hexadécimal pour la couleur sélectionnée par notre sélecteur de couleurs. Lorsque le code est exécuté, ce qui suit est notre sortie.
La sortie ci-dessus est en code HEX. Les 6 chiffres représentent l'inclusion des couleurs rouge, vert et bleu résultant dans la couleur sélectionnée. Ce code HEX peut également être converti facilement en code RVB.
De même, nous pouvons enregistrer le code ci-dessus et le définir comme couleur d'arrière-plan ou couleur de police pour l'utilisateur. Pour ce faire, nous avons ajouté quelques lignes de code supplémentaires dans notre code source déjà existant.
Voici le code complet, avec le corps HTML restant le même:
function ReturnColor(c)
(
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code
document.write(str+c);
document.write("
");
//A HEX color code can be converted into RGB code
var R=c.slice(1, 3);
var G=c.slice(3, 5);
var B=c.slice(5);
//Displaying the corresponding RGB code
document.write("In RGB format, RGB("
+ parseInt(R, 16) + ", "
+ parseInt(G, 16) + ", "
+ parseInt(B, 16) + ")");
document.write("
");
//Setting our selected color as Font color
var color = c;
var str1 = "Your color will appear as this font color";
var str2 = str1.fontcolor(c);
document.write(str2);
//Setting our selected color as Background color
document.write(" ");
)
Ceci est notre script complet. Lorsque le code est exécuté et qu'une couleur est sélectionnée, voici la sortie qui s'affiche.
Conclusion
Il existe de nombreuses façons et de nombreuses combinaisons qui peuvent vous aider à créer un sélecteur de couleurs, trop intelligent. Par exemple, avec la combinaison de HTML5 et CSS avec JavaScript, vous pouvez utiliser encore un autre élément appelé 'canvas' qui a ses propres bibliothèques qui aide à créer un sélecteur de couleurs léger, petit et multi-navigateur. Mais c'est pour une autre fois.
Articles recommandés
Ceci est un guide pour HTML Color Picker. Ici, nous discutons de l'introduction, du sélecteur de couleurs HTML, du code source et des codes. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -
- Attribut de style HTML
- Lien texte HTML
- Balises d'image HTML
- Qu'est-ce que HTML5?
- Définir une couleur d'arrière-plan en HTML avec l'exemple