Couleurs hexadécimales ou noms génériques ?

Bonjour,

je compléterais ce que dit Laurent.
Avec les valeurs en hexadécimal, tu gagnes en précision. White sera white, sans nuance. Avec #FFFFFF, chaque groupe de deux digits pourra être modifié, et de ce fait apporter des nuances. N'empêche qu'en mode construction d'un site, c'est bien plus parlant d'utiliser les noms en clair, quitte à affiner ensuite en passant à l'hexadécimal. Je commence toujours avec les yellow, red, blue, sauf pour le #000000 et le #FFFFFF que je connais pas cœur. Et si on met seulement trois 000 ou trois FFF, ça fonctionne aussi, mais sans les nuances.

Ce jour, utiliser rgb (100, 150, 200) devient la norme. Si on ajoute un nombre exa à la fin, on règle aussi l'opacité, et d'une façon bien plus précise qu'avec opacity, puisque l'on peut cibler l'élément. On peut aussi ajouter de la transparence, en %.

Et il y a mieux, il y a hsl https://iamvdo.me/blog/les-avantages-de-hsl-par-rapport-a-rgb

Petit aparté. Ça me fait toujours plaisir de renseigner, j'en profite pour effectuer des recherches et apprendre ou réviser des choses. Cependant, je pense que tu ne fait pas beaucoup d'efforts de recherches pour ce genre de questions. Une recherche sur Startpage m'a donné en quatre secondes les réponses à toutes tes questions. Je suis partisan, sur ce forum, de garder notre énergie et notre temps pour plutôt aider sur du code qui ne fonctionne pas.

Bonne journée, et je continuerai à faire des recherches pour toi

Ola

Quelques remarques sur la précision :

Bongota a écrit :
Avec les valeurs en hexadécimal, tu gagnes en précision. White sera white, sans nuance. Avec #FFFFFF, chaque groupe de deux digits pourra être modifié, et de ce fait apporter des nuances.

Tu gagnes en souplesse plutot, pas en précision. White ca sera #FFF quoi qu'il arrive. C'est tout aussi précis que d'utiliser l'hexa.

Bongota a écrit :
N'empêche qu'en mode construction d'un site, c'est bien plus parlant d'utiliser les noms en clair, quitte à affiner ensuite en passant à l'hexadécimal.

On peut passer par des variables CSS pour allier les deux très simplement

Bongota a écrit :
Et si on met seulement trois 000 ou trois FFF, ça fonctionne aussi, mais sans les nuances.

On peut quand même nuancer, on a moins de possibilités mais on peut : #111 #444 #A5B etc

Bongota a écrit :
Ce jour, utiliser rgb (100, 150, 200) devient la norme. Si on ajoute un nombre exa à la fin, on règle aussi l'opacité,

Je ne suis pas sur que ce soit la norme. Ensuite sur rgb() on ne peux pas ajouter de nombre hexa à la fin. Avec rgba() on peut rajouter un pourcentage (ou un nombre entre 0 et 1) pour gérer la transparence oui mais pas avec rgb().

De plus on peut également rajouter deux digit à la fin d'un code hexa pour faire la meme chose : #FFFFFF88 = rgba (255,255,255,.5) (je ne sais pas si c'est ce que tu voulais dire au début mais comme c'était apres que tu ais parlé de rgb...)

Bongota a écrit :
et d'une façon bien plus précise qu'avec opacity, puisque l'on peut cibler l'élément. On peut aussi ajouter de la transparence, en %.

Plus précise qu'opacity dans le sens ou c'est seulement la transparence de la couelur et pas de tout l'élément oui.

Bongota a écrit :
Et il y a mieux, il y a hsl https://iamvdo.me/blog/les-avantages-de-hsl-par-rapport-a-rgb

Interessant ! Mais la conclusion est quand meme pas mal :

a écrit :
Néanmoins, il existe une contrainte de taille: les logiciels graphiques (tel Photoshop) n'utilisent pas le même modèle HSL que celui de CSS. Il n'est donc pas possible de récupérer les valeurs fournies pour les utiliser directement dans votre CSS. Pour pouvoir utiliser les bonnes valeurs, vous devrez les convertir grâce à des outils

Et ça ca pique un peu haha

Bonne journée !

Salut,

Je passe en coup de vent.

ObiJuanKenobi a écrit :

Est-ce que c'est fiable d'utiliser les noms de couleur génériques (blue, red, yellow, etc.), quand on définit des couleurs, ou bien faut-il impérativement utiliser les valeurs hexadécimales (#ff0235) ?

blue, teal, pink, etc sont ni plus ni moins des valeurs raccourcies d'un code couleur hexa.

ObiJuanKenobi a écrit :
Et est-ce qu'il y a une différence entre #FF0235 et #ff0235 (majuscule et pas majuscules) ?

Ce n'est pas sensible à la casse.

Là où j'attire ton attention est que depuis quelque temps, je vois apparaître dans certains codes source des noms de classe totalement explicites (bg-blue-800, c-red-500, etc.). Or c'est une très belle erreur ! Aujourd'hui, l'aspect de la page peut-être avec une dominante rouge (c'est un exemple). Demain, le client décide de passer cette page en domniante bleue. Ce qui va donner un code css incohérent. Il est nettement préférable de nommer les class arbitrairement. exemple :
- nom de planète
- alphabet grec
- nom département
- liste de prénom
- nom de ville
- etc.

Merci pour vos explications. Si j'ai posé la question c'est parce que une de mes connaissances m'a dit qu'il fallait éviter d'utiliser les noms génériques des couleurs parce qu'elles n'étaient pas toutes reconnues par tous les navigateurs alors que toutes les valeurs hexadécimales le sont. Je m'attendais donc à des réponses orientées dans ce sens.

Concernant les recherches, je ne savais pas comment formuler ma demande sur un moteur de recherche et c'est pour ça que je suis venu sur alsacreation qui est le meilleur "moteur de recherche" (je parle du forum). Sinon, je ne connais pas Startpage, je n'ai même jamais entendu parler de ce moteur de recherche mais je sais qu'il en existe des dizaines tous plus ou moins efficaces !
Modifié par ObiJuanKenobi (28 Sep 2023 - 13:29)

Laurent et Niuxe ont donné toutes les réponses à tes questions, et même plus, ce qui m'arrange bien.
Startpage est un moteur qui (en principe) respecte la vie privée. Ils annoncent ne pas collecter aucune données sur les visiteurs. Startapage ne fait pas de miracles, à ce que je crois, il ne possède pas sa propre base de données, il se base sur les recherches Google C'est pour ça, heureusement, que les recherches sont presque équivalentes, à des détails près.
Avant, il y avait même un proxy intégré qui, d'un clic, pouvait agir un peu comme un vpn, mais je ne le vois plus depuis une ou deux années.
Les moteurs de recherche sont très souples, on peut mettre des mots dans tous les sens pour les recherches, il y aura toujours un suggestion. Par exemple, pour ton cas, j'ai tapé "couleurs en hexadécimal" et, de liens en liens, je suis tombé sur toutes les possibilités.
Depuis un certain temps, je ne travaille plus qu'avec les linear-gradient sur mes sites (animés ou pas). Je trouve qu'il y a d'énormes possibilités d'améliorations de l'aspect graphique avec.

ObiJuanKenobi a écrit :
Est-ce que c'est fiable d'utiliser les noms de couleur génériques (blue, red, yellow, etc.), quand on définit des couleurs, ou bien faut-il impérativement utiliser les valeurs hexadécimales (#ff0235) ?

Hello,

Alors, la principale différence entre les couleurs nommées (mot-clé) et la notation en hexadécimal (par exemple) est la taille de la palette :
- il existe 166 couleurs nommées : https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
- il est possible d'adresser plus de 16 millions de teintes en hexa à 6 caractères.

Dans la pratique, hormis pour des couleurs particulières telles que white, black, ou transparent, la palette nommée est beaucoup trop restreinte et ne correspond jamais à la charte graphique souhaitée.

ObiJuanKenobi a écrit :
Et est-ce qu'il y a une différence entre #FF0235 et #ff0235 (majuscule et pas majuscules) ?

Ce n'est qu'une simple question de choix de convention. Par exemple Prettier passe toutes les valeurs en minuscules par défaut.

Bonne journée