Suggestions pour un nouvel outil couleurs

Bonjour,

Je viens de mettre en place un nouvel outil pour obtenir toute sorte d'infos sur une couleur. C'est une version très très beta: la mise en page est nulle, je n'ai testé que sous Firefox, il y a encore 1000 trucs à faire question présentation, mais j'ai besoin de vos avis sur plusieurs points:
- l'utilité du truc (notamment l'install en tant que moteur de recherche sous Firefox)
- d'autres infos de couleurs qui manquerait
- des suggestions de présentation: je ne sais pas trop comment je devrais dispoer tout ça... J'aimerais que tout soit visible d'un seul coup d'oeil, mais la présentation actuelle... Bof, bof.
Ah oui, l'adresse!
http://pourpre.com/colordb
Et un exemple:
http://pourpre.com/colordb/?q=rouge&l=fre

Merci

Blini
Modifié par Blini (03 May 2005 - 09:43)

Salut,

Il n'y a rien sous IE 6.0 qu'une page blanche...

sous Firefox, tes liens fonctionnent; juste une remarque le tableau des couleurs voisine passe sous le tableau principal.

Ceci dit merci pour ce nouvel outil. J'adore ton site et j'utilise depuis quelques temps ta boîte à couleur et c'est simple, je ne peux plus m'en passer. Tout simplement l'un des meilleurs outils que je connaisse. J'en profite pour te poser une petite question: j'ai essayé de me faire un petit nuancier personalisé, en prenant comme base un des fichiers texte situé dans le dossier ColorsNames mais sans succès; est-ce que tu pourrais me dire comment procéder ? merci d'avance. Et bonne continuation à pourpre

Bonjour,

On est vraiment gâté sur pourpre.com! Encore des développements! Moi qui adore déjà l'ensemble du site!

Donc déjà: impossible de présenter des couleurs sans faire de liens avec le dico chroma...

L'outil "variantes" est très utile ; en tout cas j'utilise activement celui de photoshop. Il serait bon de disposer aussi d'un lever: "plus de jaune", "plus clair"... devrait pouvoir être modifié de façon plus ou moins grande (je ne sais pas si je suis assez clair).

J'ajouterais aussi un "simulateur" de pages web: il faudrait créer une ou deux pages web de référence et utiliser la couleur (ou les couleurs pour les palettes) pour générer une feuille de style à essayer -> pouvoir ainis sélectionner une couleur pour le fond, une pour les titres, etc.

Je pense qu'il y a aussi moyen de proposer plus d'accords. A priori, ce genre d'outils intéresse des webmestres, qui partent d'une couleur pour ensuite compléter la charte graphique.

Pour la présentation, attention: rien ne fonctionne sous Explorer (!). Comme je dispose d'un peu de temps en ce moment, je veux bien essayer d'adapter une maquette existante à ceci.

Merci pour ces remarques.

Comme je le disais, j'ai fait cet outil "à l'arrache", il s'agit en quelque sorte d'une version PHP de l'actuel "chromograf" (pour ceux qui connaissent).
Donc pour ce qui est de la visu sous IE et autres navigateurs, je vais y travailler. Si besoin, je reviendrai ici pour crier à l'aide

Belgeric: pour les variantes, bonne idée, l'idéal serait de pouvoir doser l'ajout de "clair", de jaune, etc. Peut-être faire simplement deux niveaux ("+jaune" et "++jaune" par exemple). Sachant que quand tu cliques sur le carré "+jaune", tu arrives sur la couleur en question, et que du coup, sans bouger ta souris, plusieurs clics ajoutent de plus en plus d ejaune (suis-je clair ?). Pour le simulateur de pages web, excellente idée. Je note...
Pour le "plus d'accords", d'accord aussi. Ça va s'enrichir. Le pb va être de "retenir" deux ou trois couleurs à appliquer au simulateur de pages web.

alex_br: j'ai ajouté récemment le nuancier RAL pour la Boite à Couleurs (PS: cet outil a été écrit par Benjamin Chartier, pas par moi, mais je lui passerai tes félicitations). Essaye de partir du fichier en question: format texte et sur chaque ligne: nom de la couleur <tab> #code_rgb
Tiens- moi au courant.

Merci encore pour vos remarques. Je repasserai ici avec une "v0.2" bientôt.

a écrit :
Belgeric: pour les variantes, bonne idée, l'idéal serait de pouvoir doser l'ajout de "clair", de jaune, etc. Peut-être faire simplement deux niveaux ("+jaune" et "++jaune" par exemple). Sachant que quand tu cliques sur le carré "+jaune", tu arrives sur la couleur en question, et que du coup, sans bouger ta souris, plusieurs clics ajoutent de plus en plus d ejaune (suis-je clair ?). Pour le simulateur de pages web, excellente idée. Je note...

Je vois que nous nous comprenons: c'est exactement çà!

Pour ce qui est de "retenir" des couleurs, je ne fais pas de PHP, mais je vois pleins d'applications qui retiennent des variables globales: c'est un peu comme un panier d'achat, non?

Une autre chose encore à laquelle je pense (et puisque beaucoup de membres de la communauté sont actifs dans ce qui traite de l'accessibilité), ce serait aussi bien de montrer des simulations des couleurs par des malvoyants. Parce que beaucoup de beaux accords que l'on trouve / propose ne donnent strictement rien pour une partie loin d'être négligeable de la population...
cf: http://www.visibone.com/colorblind/
et le service
http://www.vischeck.com

Bonjour,

Je pense que cet outil peut être très utile aux web designers (dont je suis!).
Donc : merci beaucoup !

J'ai installé la recherche intégrée à firefox, impec...

Juste une toute petite remarque :
ce serait pratique de pouvoir rentrer la référence de couleur sans le "#" initial...

Claire: j'y ai pensé, le pb c'est de distinguer alors un code RGB d'un nom de couleur simple. Le "#" me permet de savoir que:
befade
est à chercher comme nom de couleur (bon, ok, ça ne donnera rien, ça n'existe pas), alors que
#befade
est un code hexa...
A voir...

Belgeric: pour retenir les couleurs: oui, je connais grosso modo, mais j'aimerais éviter de m'embarquer dans une gestion de variables de session ou cookies... je vais réfléchir
Modifié par Blini (29 Apr 2005 - 12:40)

corrigé pour ie6 (mais ça reste brouillon sur la présentation).

Blini a écrit :

alex_br: j'ai ajouté récemment le nuancier RAL pour la Boite à Couleurs (PS: cet outil a été écrit par Benjamin Chartier, pas par moi, mais je lui passerai tes félicitations). Essaye de partir du fichier en question: format texte et sur chaque ligne: nom de la couleur <tab> #code_rgb
Tiens- moi au courant.

Oui désolé pour le mélange (l'auteur du soft est pourtant bien précisé sur ta page) c'est parceque j'ai rarement été aussi entousiasmé par un outils de ce genre. Merci pour la petite explication, je vais essayer (je pense que j'avais entré un espace plutôt qu'une tabulation).

Sinon pour ta nouvelle version (depuis ce matin) plus de problème sous firefox, mais je trouve que tu as sacrément réduit la font-size; ça ne pose pas de problème pour l'outils, mais un peu plus pour l'aide (surtout pour les cellules du tableau où tu utilises une police monospace).

Sinon quelques petites remarques:

La couleur pantone est-elle vraiment utile quand on sait qu'il est impossible de la restituer sur un écran d'ordinateur (et que la page web à, elle-même, très peu de chance de finir chez un imprimeur) ?

Je trouve l'idée des variantes intéressantes, mais j'aimerais savoir quelles sont les différences entre les dénominations (par exemple entre pâle, clair et lumineux) et les différences depuis la couleurs d'origine (quel % de bleu dans +bleu), peut-être qu'il suffit simplement de rajouter une petite explication dans l'aide.

Sinon par rapport aux variantes, ce que je trouve problématiques, c'est que la mise en tension des différents carrés ne permet plus de juger de la différence de teintes; je pense qu'il faudrait faire des échantillons un tout petit plus grands et un peu plus espacé les uns des autres. Je sais, je suis un peu exigent, mais c'est parceque j'apprécie vraiment ton travail.

alex_br a écrit :

Sinon pour ta nouvelle version (depuis ce matin) plus de problème sous firefox, mais je trouve que tu as sacrément réduit la font-size; ça ne pose pas de problème pour l'outils, mais un peu plus pour l'aide (surtout pour les cellules du tableau où tu utilises une police monospace).

Arf ! Bien sûr. Pas pensé à la répercution sur l'aide. Mais pour le moment, je m'attache surtout aux fonctionalités. Mais je n'oublie pas tes remarques toujours justes !

a écrit :

La couleur pantone est-elle vraiment utile quand on sait qu'il est impossible de la restituer sur un écran d'ordinateur (et que la page web à, elle-même, très peu de chance de finir chez un imprimeur) ?

On va dire que c'est "marketing". Mais ce qui peut être intéressant, c'est le rapprochement pantone-ral: si tu savais le nb de personnes qui m'écrivent à ce sujet sur pourpre ! Là au moins, ils ont les antone et les Ral "proches". A eux d voir ce qu'ils veulent en faire.
Mais sur le fond, il est clair que c'est inexploitable sur un écran !

a écrit :

Je trouve l'idée des variantes intéressantes, mais j'aimerais savoir quelles sont les différences entre les dénominations (par exemple entre pâle, clair et lumineux) et les différences depuis la couleurs d'origine (quel % de bleu dans +bleu), peut-être qu'il suffit simplement de rajouter une petite explication dans l'aide.

Oui, j'ajouterai des paragraphess dans l'aide. Pour info: ce qui est au dessus de la couleur "normale" est plus clair, ce qui est en dessous, plu foncé. Ce qui est à gauche est moins saturé, et à droite, plus saturé. Donc par exemple "profond" = -clair et +saturé à la fois.

a écrit :

Sinon par rapport aux variantes, ce que je trouve problématiques, c'est que la mise en tension des différents carrés ne permet plus de juger de la différence de teintes; je pense qu'il faudrait faire des échantillons un tout petit plus grands et un peu plus espacé les uns des autres. Je sais, je suis un peu exigent, mais c'est parceque j'apprécie vraiment ton travail.

Oui, je peux faire plus gros, plus espacé. Je me demande même si je ne devrais pas paseer sur un fond totalement noir pour mieux isoler les couleurs. Qu'en penses-tu ?

Encore merci pour tous ces précieux conseils. Je ne m'attendais pas à tant sur ce forum !

Blini

alex_br a écrit :
(...) et les différences depuis la couleurs d'origine (quel % de bleu dans +bleu)

Juste une chose à ce propos: c'est un peu plus compliqué que ça comme calcul: je ne me contente pas d'ajouter du bleu sur le canal B, sinon, la luminosité de la couleur changerait. Je prends en fait la couleur d'origine, je calcule son HLS, je prend alors un bleu (H=240) et la même luminosité L pour une nouvelle couleur, et je moyenne les deux (moyenne pondérée: 80% de l'originale + 20% du bleu).

Re Blini,

merci pour les explications

Pour la couleur de fond: je ne sais pas si le noir permettrait de mieux isoler les couleurs; à priori je te dirais que le gris, neutre, est la meilleur solution... En fait, je pense que la couleur de fond interfère peu par rapport au problème: si je prend ton lien avec les rouges les variantes sont pratiquement impossible à lire; j'ai beaucoup de mal à isoler une variante tellement elles sont proches les unes des autres (proche en terme d'espace mais aussi colorimétrique);

Peut-être aussi que le nombre de variantes est trop important et surtout pas assez contrasté; les rouges sont très semblables: d'un point de vue personnel ce genre de variantes peut être intéressantes et instructives, mais pour en usage webdesign, cela me semble plus difficile tel quel. Si la couleur est utilisée ponctuellement dans la page ou est utilisée pour du texte par exemple, il sera impossible de dire quelle variante à été utilisée. Pour des aplats plus étendu ce sera peut-être plus lisible; et encore à partir du même ordinateur, parce que les variantes représente à peu de chose près le type de différenciations qui peuvent exister entre différents écrans suivant leurs réglages de luminosité, contraste etc.

En fait je dirais que tu peux laisser la page tel quel tout en augmentant les contrastes de tes variantes (un +clair beaucoup plus clair, un +saturé plus saturé etc.). Soit tu gardes tes variantes actuelles, mais dans ce cas il faudrait je pense les organiser différement: des échantillons plus grand et plus éloignés les uns des autres ou peut-être au contraire plus rapprochés; peut-être aussi en enlevant la bordure noire des échantillons... Personnellement je pense que la première solution serait plus efficace.

J'ai fais quelques test avec le color blender d'Eric Meyer, que je trouve assez bien fait concernant les variantes colorimétriques (à condition de ne pas prendre des teintes trop proches); je n'ai pas utilisé les midpoints mais j'ai uniquement comparé 2 teintes prises dans tes variantes en remplissant les champs couleur 1 et couleur 2 (le fait d'avoir que 2 teintes dans la page me semble le meilleur moyen de pouvoir les comparer):

1. j'ai pris le rouge #ff0000 pris dans ton lien et le rouge rabattu correspondant (#e00606): malgrè le fait que les échantillons soit beaucoup plus facile à comparer (2 teintes dans la page, échantillons assez grand, pas de bordure noire...), les 2 teintes me semble vraiment trop proches.

2. j'ai gardé le rouge #ff0000 que j'ai comparé au rouge rabattu du rouge rabattu précédent c'est-à-dire #c20a0a (je ne sais pas si je suis clair: j'ai utilisé le rouge rabattu du rouge rabattu de #ff0000...). Ce genre de contraste me semble en fait le minimum pour pouvoir tirer la moindre conclusion de la comparaison.

voilà, bonne continuation à toi.
Modifié par alex_br (30 Apr 2005 - 12:08)

Incroyable le temps que tu consacres à mon outil !!
Oui, ta solution 1 me semble aussi la meilleure (plus de contrastes dans les variantes).
Je viens d'augmenter le contraste de 2x. Et je retourne tailler mes haies et ma pelouse La suite des tests (et de la partie mémoristaion des couleurs + rendu sur page html) ce soir.

Re aussi,

Blini, comme tu n'as peut-être pas forcément de temps à consacrer à la template xHTML, je me suis dit que tu pourrais partir d'un kit graphique déjà existant (et libre de droits bien évidemment).
Après quelques recherches, je trouve que la template suivante s'adapterait bien à ton outil, avec ces 4 petits cadres du bas permettant de dissocier les sous-outils (variantes, palettes, couleurs proches,...)
Prosimii

Hello de Lu,

Belgeric a écrit :

Après quelques recherches, je trouve que la template suivante s'adapterait bien à ton outil, avec ces 4 petits cadres du bas permettant de dissocier les sous-outils (variantes, palettes, couleurs proches,...)
Prosimii

Effectivement, l' idée est pas mal du tout, et le template est approprié.
Blini, ton log est excellent, j'adore les comparatifs Pantone|RAL.

Salut,

Pur info, je suis allé sur le lien de la page exemple, et je vois sur mon écran la complémentaire tirer franchement sur le bleu, alors que la complémentaire des nuances rouge est normalement le vert..????????????????????? (la complémentaire du rouge étant le vert, leur association permet de décliner les marrons)

testé avec IE6.0

j'édite:

je viens de voir ce lien :
http://60gp.ovh.net/~couleurs/couleurs_complementaires.htm
et là effectivement on retrouve tes complémentaires, mais moi j'y perd mon latin...
la complémentaire du jeune est le violet normalement.... je veux dire que c'est ce que j'ai appris dans mes études de chroma , d'arts plastiques, y'a une différence entre la chroma des couleurs rgb "informatiques " et celles des tubes de gouaches?

parce que sur ce lien là:
http://www.artyst.net/09Lexique/couleurs_complementaires.htm ça dit comme moi ...

+
http://discipline.free.fr/couleurs_prim.htm
Modifié par Vajra (02 May 2005 - 23:39)

Belgeric & Maxwell: bonne idée, je le garde de côté, sachant que pour l'instant, je me prend la tête avec la "logique" de la page, et les fonctionnalités. La mise en page viendra à la fin.

Vajra: c'est l'éternel débat. En fait, très exactement, on peut dire: En mélangeant une couleur et sa complémentaire, on obtient la couleur que donne le mélange des couleurs primaires.
Avec ça, tout est dit. Si tu pars avec comme couleurs primaires le rouge, jaune et bleu, la complémentaire du rouge est un vert. Si tu pars avec comme couleurs primaires le cyan, magenta et jaune, la complémentaire du rouge est le cyan.
Donc tout revient au problème des couleurs primaires. Qu'est-ce que c'est que des couleurs primaires ? C'est le choix de 2, 3 (ou plus) couleurs telles que le mélange de N d'entre elles ne donne pas une autre couleur primaire. C'est tout. Tu peux très bien choisir comme couleurs primaires le jaune et le rouge, seulement. Mais l'espace de couleurs que tu seras alors capable de décrire sera assez restreint. Tu pourrais aussi choisir du violet, du jaune et du vert, ou tout autre ensemble de couleurs...
Généralement, on choisit 3 couleurs parce que c'est un bon compromis: le nombre de couleurs primaires reste restreint, et on peut reproduire un grand nombre de teintes.
Bref, je m'arrête, mais c'est un grand débat... D'ailleurs, il faudrait que je développe la chose sur mon site

Hello,

(si cela peut t'aider dans ta quête!)
juste quelques liens que j'ai retrouvé dans mon tiroir:

couleur | jemimap
colorscheme2
colormatch | Knorrpage.de
colour wheel | HP
colormatch | neteffect.dk

Désolé si j'ai fait des doublons.....
Modifié par Maxwell (03 May 2005 - 13:59)

Belgeric a écrit :
Re aussi,
Blini, comme tu n'as peut-être pas forcément de temps à consacrer à la template xHTML, je me suis dit que tu pourrais partir d'un kit graphique déjà existant (et libre de droits bien évidemment).
Après quelques recherches, je trouve que la template suivante s'adapterait bien à ton outil, avec ces 4 petits cadres du bas permettant de dissocier les sous-outils (variantes, palettes, couleurs proches,...)
Prosimii

Belgeric,
En fait, il est probable que mes "boites" (une par "outil" auront une largeur fixe, ceci à cause du type de contnu (nuancier, roue des couleurs, etc). Ça me facilitera les choses.

Une contrainte majeure sur l'outil de couleur color-db, c'est que contrairement aux autres outils disponibles sur le net, je voudrais que l'internaute puisse bookmarker sa page et en y revenant plus tard, y retrouver son "état" précédant.
Notamment la mise en page, que je voudrais souple et customisable.
Pour ce faire, j'ai testé hier soir des positionnements de blocs:
http://pourpre.com/colordb/testpos.php?q=fSivG,AM,Nht
Dans "q=", une lettre = un bloc, visible quand c'est une majuscule, invisible quand c'est une minuscule.
De plus, tu peux mettre le nombre de virgules que tu veux: ça définit le nombre de colonnes. Chaque bloc peut donc être caché/affiché et déplacé dans la mise en page (haut, bas, gauche, droite).
Je pourrais probablement le faire avec des vars de sessions, mais ça empêcherait l'utilisateur de filer l'adresse à un autre internaute...

Mais peut-être que prosimii peut être adapté en fonction... A voir.
Modifié par Blini (04 May 2005 - 15:57)

Salut,

Effectivement Blini, ce serait une bonne idée de développer ce problème sur ton site...

Par contre, je pensais que les couleurs primaires ne pouvaient être autres que celles que l'on trouve dans le prisme naturel des couleurs (rouge, jaune, bleu) et donc que les complémentaires ne pouvaient également changer...

Pour moi, le magenta, le cyan et le vert sont des couleurs secondaires obtenues par le mélange de 2 couleurs primaires et le mélange des trois couleurs primaires donne le blanc (absence de couleur en fait).

et puis ton post est arrivé et j'ai fureté et je comprends qu'en fait il y a un gros débat en perspective : http://pourpre.com/couleur/lumiere.php
entre synthèse additive et synthèse soustractive...
En fait, c'est la technique d'impression et la vidéo qui font changer la donne, non? Si on s'en tient à la nature de la lumière on se base sur les trois couleurs primaires que sont le rouge, le beu et le jaune, et pour des raisons techniques, on a adopté le cyan, le magenta et le jaune... puis est venu, l'écran, et l'écran relié à l'impression (informatique) et sur l'écran on prend le bleu, le vert et le rouge, on sort le jaune!!!!

Merci.

a+
Modifié par Vajra (05 May 2005 - 16:11)