MEILLEUR SITE POUR LES DÉVELOPPEURS WEB
Couleurs HTML. Cours pour débutants

En Ua Es De

Couleurs NCol


Que sont les couleurs NCol ?

NCol (Natural Color) est un système de couleurs développé par W3Schools. Il est basé sur l’utilisation de teintes naturelles qui se rapprochent le plus possible de celles que l’on trouve dans la nature. Ces couleurs sont utilisées dans la conception de sites Web pour donner un aspect plus naturel et doux aux sites Web et aux interfaces.

Dans le contexte de NCol, on utilise des couleurs qui ont l’air naturelles et harmonieuses, et qui ne créent pas l’effet de transitions lumineuses ou nettes. Il peut s’agir de couleurs qui imitent des éléments naturels, tels que la forêt verte, le ciel bleu, les nuances de brun et de sable, etc.


Comment cela fonctionne-t-il ?

La couleur de NCol est donnée par une lettre indiquant une couleur et un nombre indiquant le pourcentage de distance par rapport à cette couleur.

Couleurs utilisées :

  • R — Red / Rouge ;
  • Y — Yellow / Jaune ;
  • G — Green / Vert ;
  • C — Cyan / Cyan ;
  • B — Blue / Bleu ;
  • M — Magenta / Magenta.

Par exemple :

  • R30 signifie rouge, décalé de 30 % vers le jaune (c’est-à-dire plus d’orange).
  • B50 signifie que la couleur bleue est décalée de 50 % par rapport au vert (c’est-à-dire le bleu).

Avantages de NCol :

  • Simplicité : Facile à comprendre et à retenir.
  • Intuitif : Correspond à la perception naturelle des couleurs.
  • Harmonie : Les couleurs NCol créent une atmosphère harmonieuse et naturelle, rendant l’interface agréable à l’œil.
  • Facilité pour les développeurs : vous pouvez rapidement obtenir la teinte que vous souhaitez en modifiant la valeur numérique.
  • Facilité d’utilisation : Les sites Web qui utilisent des couleurs naturelles peuvent être moins chargés en termes de perception, de sorte que les utilisateurs peuvent passer plus de temps sur ces sites sans se sentir fatigués.
  • Pertinence pour les sujets environnementaux et naturels : Si votre projet est lié à la nature, à la santé ou à l’écologie, ces couleurs seront très appropriées.

Inconvénients de NCol :

  • Limité : Ne couvre pas toutes les teintes possibles. Étant donné que la palette NCol se concentre sur les nuances naturelles, cette approche peut ne pas convenir aux projets qui nécessitent des couleurs plus vives, plus dynamiques ou « tendance ».
  • Peut-être moins expressif : Les couleurs d’apparence naturelle peuvent sembler moins vibrantes ou expressives, ce qui ne convient pas toujours aux marques qui veulent se démarquer ou attirer l’attention.
  • Non normalisé : il ne s’agit pas d’une norme officielle, il peut donc ne pas être pris en charge par certains outils.
  • Subjectivité : La façon dont les couleurs sont perçues peut varier d’une personne à l’autre.

Exemple d’utilisation :

  • Sites écologiques : Pour un site dédié à la protection de l’environnement, vous pouvez utiliser la palette NCol pour mettre en valeur les teintes naturelles - vert, marron, bleu - tout en créant un sentiment d’unité avec la nature.
  • Interfaces de santé : Un site ou une application liée à un mode de vie sain peut appliquer ces couleurs pour créer une atmosphère apaisante.
  • Palettes intuitives : pages Web où les couleurs sont sélectionnées à l’aide de palettes intuitives.
  • Applications de conception : applications qui permettent aux utilisateurs de choisir facilement les couleurs sans connaître les détails techniques.

NCol peut être utilisé en HTML et CSS pour spécifier la couleur du texte, des arrière-plans, des cadres et d’autres éléments.


Alternatives à NCol :

Il existe d’autres systèmes de désignation des couleurs, tels que :

  • RGB : Spécifie la couleur à l’aide de trois nombres correspondant à l’intensité du rouge, du vert et du bleu.
  • HEX : Similaire à RVB, mais utilise un système de nombres hexadécimaux.
  • HSL : spécifie la couleur à l’aide de la teinte, de la saturation et de la luminosité.

Conclusions

Le choix du système de désignation des couleurs dépend de vos besoins et de vos préférences. NCol peut être une option pratique pour une sélection rapide et intuitive des couleurs, en particulier pour les débutants.

Dans l’ensemble, NCol (Natural Color) est un système de couleurs convivial qui permet de créer des interfaces et des designs qui semblent naturels et confortables pour les utilisateurs, mais qui présente des limites dans la sélection des couleurs pour les projets plus lumineux ou non standard.


Comment obtenez-vous la couleur NCol ?

Pour obtenir une couleur NCol, vous pouvez utiliser la calculatrice NCol.

Calculatrice NCol


 
rgb(255, 0, 0)
#ff0000
hsl(0, 100%, 50%)


H:
W:
B:

Couleurs naturelles (NCol)

Natural colors (NCol) est une initiative de W3Schools.

Le système est conçu pour faciliter la sélection des couleurs HTML.

NCol spécifie les couleurs à l’aide d’une lettre de couleur avec un chiffre pour spécifier la distance (en pourcentage) de la couleur.

R30 signifie 30 % loin du rouge, se déplaçant vers le jaune. (En d’autres termes : rouge avec 30 % de jaune)

LetterColorHues
RRed
R
R25
R50
R75
YYellow
Y
Y25
Y50
Y75
GGreen
G
G25
G50
G75
CCyan
C
C25
C50
C75
BBlue
B
B25
B50
B75
MMagenta
M
M25
M50
M75
R Y G C B M
                                                                                                                       

La couleur et la distance peuvent également être données en teintes (0-360) :

R = 000 Y = 060 G = 120 C = 180 B = 240 M = 300

Prise en charge HTML

NCol n’est pas supporté en HTML, mais il est très proche du nouveau système de couleurs HWB suggéré en CSS4.

En attendant CSS4, vous pouvez inclure la bibliothèque de couleurs de W3Schools et utiliser NCol comme attribut HTML comme ceci :

Exemple

<div data-w3-color="R50,50%,0">

<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>

<script src="../lib/w3color.js"></script>
Try It Yourself »

Bibliothèque de couleurs W3Schools

La bibliothèque JavaScript utilisée dans l’exemple ci-dessus peut être téléchargée à partir de

https://www.w3schools.com/lib/w3color.js.

Vous pouvez également utiliser un téléchargement alternatif à partir de notre site Web W3SchoolsFR. Le meilleur au lien : https://w3schoolsua.github.io/lib/w3color.js.


Pourquoi NCol ?

Il est très difficile d’expliquer les couleurs à l’aide de la notation RVB ou HEX.

Pouvez-vous dire de quelle couleur est rgb(199,21,133) ?

Le RVB est basé sur la façon de produire physiquement des couleurs en mélangeant des sources lumineuses.

NCol est basé sur ce à quoi ressemblent les couleurs à l’œil humain.

Pour cette raison, NCol facilite grandement la description des couleurs.

Les couleurs naturelles ont été décrites pour la première fois par Karl Ewald Konstantin Hering (Allemagne 1834 - 1918).