Trouver son code couleur HTML : Facile 🙂 – code HTML
Mettre en forme un texte en CSS

Trouver son code couleur HTML !

Les couleurs avec du CSS sont les mêmes que celles avec un code HTML.
Pour faire référence à d’autres couleurs, vous devrez utiliser le code hexadécimal. C’est bien sûr un peu moins parlant mais universel.

Vous pouvez choisir votre couleur en cliquant ici : <– Cliquer ici

Il existe des couleurs nommées normalisées :

Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs :

#00FFFF
Aqua		 #000000
Black		 #0000FF
Blue		 #FF00FF
Fuchsia		 #808080
Gray		 #008000
Green		 #00FF00
Lime		 #800000
Maroon
#000080
Navy		 #808000
Olive		 #800080
Purple		 #FF0000
Red		 #C0C0C0
Silver		 #008080
Teal		 #FFFFFF
White		 #FFFF00
Yellow

Il est possible d’avoir l’ensemble des couleurs de l’arc en ciel 🙂 avec une sa valeur hexadecimal :

Méthodes simples pour trouver des codes couleurs

Pour mieux s’intégrer dans les widgets, il est primordial que tout blogueur, graphiste ou designer doit forcément avoir une bonne connaissance des codes couleurs d’une image. C’est d’ailleurs pour vous aider à en savoir plus sur le sujet que vous retrouverez dans cet article plusieurs informations qui pourront vous éclairer.

Comment trouver le code couleur d’une image ?

Plusieurs outils peuvent vous aider à trouver le code couleur d’une image, mais ici nous vous donnerons un exemple de colormind.io qui vous garantira un résultat efficace. Pour l’utiliser, il faudra :

  1. Cliquer sur colormind.io
  2. Ensuite, Choisir l’image que vous souhaitez sonder.
  3. Pour finir, cliquer une fois encore sur « Generate »

Vous aurez non seulement en face de vous les codes couleurs de votre image mais aussi d’autres codes couleurs qui s’harmonisent avec l’ensemble de vos couleurs de de base.

Couleur HTML et CSS

En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style.

  1. color: Gestion de la couleur du texte
  2. letter-spacing: Espace entre les lettres
  3. text-align: Alignement d’un texte
  4. text-decoration: Habiblement d’un texte

A savoir : Dans ce chapitre, la notion d’héritage est appliquée. (voir notion d’héritage sur ce lien)

Comment trouver le code couleur HTML ?

Vous pouvez fixer la couleur d’un texte comme suivant : color: valeur; Les différentes valeurs sont :

  1. Nom de la couleur – exemple:(red, black…)
  2. Nombre hexadecimal – exemple:(#ff0000, #000000)
  3. Code RGB – exemple:(rgb(255, 0, 0), rgb(0, 0, 0))

Pour trouver le code couleur HTML, vous pouvez vous servir de Firefox puisqu’il dispose d’une pipette pratique qui vous permet non seulement de le connaitre mais aussi de le copier. En premier lieu, vous devrez consulter la page où vous désirez copier le code HTLM d’une couleur et ensuite ouvrir le menu Firefox. Cliquez, juste sur développement et après sur pipette.

Vous remarquerez que le curseur se changera en loupe, ciblez donc la couleur souhaitée pour avoir le code couleur HTLM. Il faut relever qu’il s’affichera juste en dessous. Cliquez ensuite sur copier ce code dans le presse papier. Après avoir respecté ces étapes, il vous sera possible de le récupérer dans n’importe quel logiciel.

Voir un exemple : 

Voici un texte en bleu

Voir le code CSS :

.bleutext{ color: #336699; }

Voir le code dans l’élément

Voici un texte en bleu

Espace entre les lettres

Vous pouvez ajuster les espaces entre les lettres dans un texte.
Vous pouvez mettre une valeur négative. letter-spacing: valeur; Les valeurs possibles sont :

  1. normal
  2. une valeur en px

Voir un exemple : 

Voici des lettres espacées de 5px

Voir le code CSS : 

.espace5px{ letter-spacing: 5px; }

Voir le code dans l’élément

Voici des lettres espacées de 5px

Alignement d’un texte

Vous pouvez ajuster la position d’un texte : text-align: valeur; Les valeurs possibles sont :

  1. Gauche
  2. droite
  3. centre
  4. justifié

Voir un exemple :

Ce texte est aligner à gauche.
Ce texte est aligner centre.
Ce texte est aligner à droite.
Ce texte est aligner justifier.

 

Voir le code CSS :

align_left{ text-align: left; }
.align_left{ text-align: center; }
.align_left{ text-align: right; }

Le CSS en 3 questions/réponses – en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML

🤔 Qu'est-ce que le CSS ?

CSS est l’acronyme de « Cascading Style Sheets » c’est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.