Aide:Couleurs
Les couleurs sont définies par un nombre hexadécimal à six chiffres, résultat de la juxtaposition des valeurs hexadécimales de leurs composantes rouge, verte et bleue : #RRVVBB.
Texte simple
modifierAvec un modèle
modifierAvec le nom de la couleur
modifierPour mettre le mot « paon » en bleu et le mot « herbe » en vert, il suffit d'utiliser les modèles {{bleu}} et {{vert}} comme ceci : {{bleu|paon}} et {{vert|herbe}}. On obtient ainsi paon et herbe. Pour cela, cliquez sur le bouton « Modèle » puis écrivez entre les accolades le nom de la couleur désirée, par exemple rouge. Ensuite, vous devez mettre le signe |. Enfin, écrivez le (groupe de) mot(s) que vous voulez mettre en couleur. Vous pouvez obtenir tous les modèles de mise en couleur rapide sur la page dédiée.
Le modèle {{Couleur de la police}} est plus puissant, puisqu'il permet de modifier la couleur d'un texte et la couleur du fond, pour du texte simple ou un lien. Il utilise les noms anglais des couleurs HTML.
Avec un code couleur
modifierExemple : {{Coloré|#9966CC|chaussette}}
donne chaussette
Avec des balises « span »
modifierAvec le nom HTML de la couleur
modifierPour donner une couleur à un texte et au fond, il faut utiliser : <span class="notheme" style="background-color:triplet hexadécimal ou nom de la couleur; color:triplet hexadécimal ou nom de la couleur">texte</span>
Veillez bien à toujours indiquer à la fois la couleur du texte et celle du fond pour conserver le même rendu en mode clair et sombre. L'usage d'une couleur de fond sans couleur de texte associée est considérée comme une erreur de lint et est listé dans Spécial:LintErrors/night-mode-unaware-background-color.
Exemples :
<span class="notheme" style="background-color:white; color:red">texte rouge sur fond blanc</span>
donne texte rouge sur fond blanc<span class="notheme" style="background-color:white; color:green">texte vert sur fond blanc</span>
donne texte vert sur fond blanc<span class="notheme" style="background-color:white; color:blue">texte bleu sur fond blanc</span>
donne texte bleu sur fond blanc<span class="notheme" style="background-color:white; color:DeepPink">texte rose sur fond noir</span>
donne texte rose sur fond noir<span style="color:var(--color-emphasized, black)">texte adaptatif noir ou blanc</span>
donne texte adaptatif noir ou blanc
Dans le dernier exemple, la définition de la couleur de fond n'est pas nécessaire car on a utilisé une variable css qui s'adapte naturellement au mode clair / sombre choisi. Voir plus bas.
Avec un code couleur
modifierExemple : <span class="notheme" style="background-color:white; color:#9966CC">chaussette</span>
donne chaussette
Couleur via des modèles et des TemplateStyles
modifierBien que plus complexe, la méthode recommandée pour des couleurs qui s'adaptent proprement au mode sombre est d'utiliser des modèles dans lesquels les couleurs sont définies via des TemplateStyles.
Un TemplateStyle est une sous-page d'un modèle nommée [[Modèle:NOM_MODELE/styles.css]]
et insérée dans le code du modèle principal en mettant <templatestyles src="NOM_MODELE/styles.css"/>
, généralement au début. Elle est écrite en langage css.
Exemple de code pour un TemplateStyle :
/* Style pour le thème clair */
.texte-coloré {
color: darkgreen
}
/* Style pour le thème sombre */
html.skin-theme-clientpref-night .texte-coloré {
color: lightgreen
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .texte-coloré {
color: lightgreen
}
}
On note que le style en mode sombre doit être défini deux fois : une fois pour le mode sombre et une fois pour le mode automatique rendant sombre.
Il ne suffit pas d'insérer un templatestyle pour que le texte soit colorié automatiquement. Il faut encore ajouter la classe texte-coloré
aux éléments à colorier (texte-coloré
est un exemple, en pratique il faut donner un nom suffisamment unique pour ne pas risquer qu'il soit déjà utilisé ailleurs, par exemple NOM-MODELE-texte-coloré
).
Exemple de code de modèle :
<includeonly><templatestyles src="NOM_MODELE/styles.css"/>
<span class="texte-coloré"> TEXTE EN COULEUR !!! </span>
</includeonly><noinclude>
{{Documentation}}
</noinclude>
Quelles couleurs ?
modifierSi vous hésitez dans le choix d'une couleur, orientez-vous vers une couleur neutre (gris ou pastel) pour un fond et foncée pour les objets devant ressortir sur fond clair (comme les polices de caractères) ; il est rappelé que l'usage de la couleur est fortement déconseillé pour le texte normal des articles.
Les 3 composantes des gris ont des intensités voisines : l'écart maximal entre ces dernières étant par exemple inférieur au tiers de l'intensité de la composante dominante, soit un maximum de 85 (#55) sur une échelle de 256 valeurs.
Une couleur pastel est une couleur pâle (donc plutôt proche du blanc) dont la somme des intensités de ses composantes rouge, verte ou bleue est importante, soit pratiquement un minimum d'environ 512 (#200) sur 768.
Le fameux adage « les goûts et les couleurs ça ne se discute pas » ne se dément pas, et quelle que soit la couleur que vous choisirez, vous ne ferez sûrement pas l'unanimité. Les couleurs neutres présentent l'avantage de moins accrocher le regard, elles seront donc plus facilement tolérées.
Pour des raisons de cohérence avec la charte graphique de Wikipédia, l'utilisation de ce type de code est prohibé dans les articles et déconseillé dans les autres pages, pour des raisons d'accessibilité. De manière générale, il faut toujours fortement limiter l'usage de la couleur dans les articles, et se référer aux discussions qui ont pu avoir lieu sur le sujet auprès des projets éditoriaux concernés.
Si l'usage des couleurs est vraiment nécessaire, ou si vous voulez réaliser une carte, consultez l'Aide:Accessibilité des couleurs pour vous aider à choisir des couleurs accessibles aux déficients visuels de la couleur.
Variables css
modifierUne variable css est utilisée
Une variable css est une couleur spécifique à MediaWiki. Elle peut être utilisée en lieu et place d'une couleur normale et a l'avantage de s'adapter au mode clair / sombre choisi.
Par exemple var(--color-base, #202122)
rendra noir en mode clair et blanc en mode sombre. La syntaxe sans fallback value var(--color-base)
n'est pas compatible avec les anciens affichages et ne doit donc pas être utilisée.
Les variables css étant naturellement adaptées au mode choisi, le code des templatestyles peut être simplifié :
.texte-coloré {
color: var(--color-success, #14866d)
}
Couleurs de texte
modifierCode à utiliser | Mode clair | Mode sombre | Rendu sans fallback | Commentaire |
---|---|---|---|---|
var(--color-base, #202122)
|
#202122 | #f8f9fa | texte | Couleur du texte par défaut. |
var(--color-base--hover, #404244)
|
#404244 | #fff | texte | Couleur du texte au survol par défaut. |
var(--color-emphasized, #000)
|
#000 | #fff | texte | |
var(--color-subtle, #54595d)
|
#54595d | #eaecf0 | texte | |
var(--color-placeholder, #72777d)
|
#72777d | #c8ccd1 | texte | |
var(--color-disabled, #72777d)
|
#72777d | # | texte | Couleur du texte par défaut. |
var(--color-inverted, #fff)
|
#fff | #101418 | texte | |
var(--color-inverted-fixed, #fff)
|
#fff | #fff | texte | Texte conservant la couleur blanche en mode clair comme en mode sombre. |
var(--color-progressive, #36c)
|
#36c | #6d8af2 | texte | Couleur des liens par défaut. |
var(--color-progressive--hover, #447ff5)
|
#447ff5 | #afb6e9 | texte | |
var(--color-progressive--active, #2a4b8d)
|
#2a4b8d | #c2d1f0 | texte | |
var(--color-progressive--focus, #36c)
|
#36c | # | texte | |
var(--color-destructive, #d73333)
|
#d73333 | #ff4242 | texte | |
var(--color-destructive--hover, #ff4242)
|
#ff4242 | #ef8174 | texte | |
var(--color-destructive--active, #b32424)
|
#b32424 | #f8a397 | texte | |
var(--color-destructive--focus, #36c)
|
#36c | # | texte | |
var(--color-visited, #6b4ba1)
|
#6b4ba1 | #977dbd | texte | Couleur des liens visités. |
var(--color-destructive--visited, #a55858)
|
#a55858 | # | texte | Couleur des liens rouges visités. |
var(--color-error, #d73333)
|
#d73333 | #ff4242 | texte | |
var(--color-warning, #edab00)
|
#edab00 | #fc3 | texte | |
var(--color-success, #14866d)
|
#14866d | #00af89 | texte | |
var(--color-notice, #202122)
|
#202122 | #f8f9fa | texte | |
var(--color-content-added, #36c)
|
#36c | #6d8af2 | texte | |
var(--color-content-removed, #a66200)
|
#a66200 | #ad822b | texte | |
var(--color-link-red, #d73333)
|
#d73333 | #b97876 | texte | |
var(--color-link-red--hover, #ff4242)
|
#ff4242 | # | texte | |
var(--color-link-red--active, #b32424)
|
#b32424 | # | texte | |
var(--color-link-red--focus, #36c)
|
#36c | # | texte | |
var(--color-link-red--visited, #a55858)
|
#a55858 | # | texte |
Couleurs de fond
modifierCode à utiliser | Mode clair | Mode sombre | Rendu sans valeur par défaut | Commentaire |
---|---|---|---|---|
Couleurs spécifiques à Wikipédia en français, définies dans MediaWiki:Common.css#L-12 | ||||
var(--couleur-fond-boite-grise, #f9f9f9)
|
Couleur utilisée notamment par les bandeaux de {{Portail}} et le modèle {{Autres projets}}. | |||
var(--couleur-fond-entete-alternance, #e6e6e6)
|
Couleur utilisée notamment par l'entête des tableaux avec une alternance de couleur de fond. | |||
var(--couleur-fond-gris-alternance, #eeeeee)
|
Couleur utilisée notamment en alternance avec var(--background-color-base, #fff) dans les tableaux avec une alternance de couleur de fond.
| |||
Couleurs fournies par Codex | ||||
var(--background-color-base, #fff)
|
Couleur de fond par défaut. | |||
var(--background-color-interactive, #eaecf0)
|
||||
var(--background-color-interactive-subtle, #f8f9fa)
|
||||
var(--background-color-disabled, #c8ccd1)
|
||||
var(--background-color-disabled-subtle, #eaecf0)
|
||||
var(--background-color-progressive, #36c)
|
||||
var(--background-color-progressive--hover, #447ff5)
|
||||
var(--background-color-progressive--active, #2a4b8d)
|
||||
var(--background-color-progressive--focus, #36c)
|
||||
var(--background-color-progressive-subtle, #eaf3ff)
|
||||
var(--background-color-destructive, #d73333)
|
||||
var(--background-color-destructive--hover, #ff4242)
|
||||
var(--background-color-destructive--active, #b32424)
|
||||
var(--background-color-destructive--focus, #36c)
|
||||
var(--background-color-destructive-subtle, #fee7e6)
|
||||
var(--background-color-error, #d73333)
|
||||
var(--background-color-error--hover, #ff4242)
|
||||
var(--background-color-error--active, #b32424)
|
||||
var(--background-color-error-subtle, #fee7e6)
|
||||
var(--background-color-warning-subtle, #fef6e7)
|
||||
var(--background-color-success-subtle, #d5fdf4)
|
||||
var(--background-color-notice-subtle, #eaecf0)
|
||||
var(--background-color-content-added, #6d8af2)
|
||||
var(--background-color-content-removed, #ad822b)
|
||||
var(--background-color-backdrop-light, rgba( 255, 255, 255, 0.65 ))
|
Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. | |||
var(--background-color-backdrop-dark, rgba( 0, 0, 0, 0.65 ))
|
||||
var(--background-color-base-fixed, #fff)
|
Garde la couleur de fond blanche en mode sombre comme en mode clair. | |||
var(--background-color-neutral, #eaecf0)
|
||||
var(--background-color-neutral-subtle, #f8f9fa)
|
||||
var(--background-color-transparent, transparent)
|
transparent est la couleur de fond par défaut d'un élément dont la couleur n'est pas précisé. Elle permet de rendre visible les éléments derrière l'élément transparent. L'application manuelle de cette couleur est utile lorsqu'un sélecteur large applique une couleur de fond à un élément et que l'on souhaite retirer cette couleur. | |||
var(--background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ))
|
||||
var(--background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ))
|
||||
var(--background-color-input-binary--checked, #36c)
|
||||
var(--background-color-tab-list-item-framed--hover, rgba( 255, 255, 255, 0.3 ))
|
||||
var(--background-color-tab-list-item-framed--active, rgba( 255, 255, 255, 0.65 ))
|
Couleurs douces et pastel
modifierSaturation maximale de 50 %.
Couleurs classiques | Couleurs claires | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Palette de Windows | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Nom des couleurs | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Plus de détails : Aide:Couleurs/table détaillée, Couleur du Web, Aide:Couleurs |
Une table de couleurs très détaillée est disponible sur Aide:Couleurs/table détaillée. Attention cette page excède les 170 ko !
Voir aussi
modifierArticles connexes
modifier- Couleurs du Web
- Wikipédia:Limitez l'usage de la couleur dans les articles
- Aide:Accessibilité des couleurs
- {{Conseil contraste entre couleur hexadécimal et noir ou blanc}}
- {{Conseil contraste entre couleur RVB et noir ou blanc}}
- Utilisation de la couleur concernant les articles sur les transports en commun