couleur
bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript microsoft musique navigateur new york photo photoshop theme vidéo wordpress

Solarized : les couleurs de mon blog

28 Feb

Depuis que mon blog est un Tumblr déguisé, je différencie les différents formats de Post (article, lien, image, citation, brève) par des couleurs bien distinctes. J’étais d’abord parti du rouge, un peu au hasard.

Etant donné qu’il me fallait 5 couleurs distinctes, je partais du rouge et je changeais la teinte par coup de 72°. Pourquoi 72 ? La teinte se définit sur une échelle de 360°. Divisée par 5, ça donne 72. Ça me fournit une répartition égale entre les couleurs (du moins, mathématiquement).

Mes couleurs Tumblr avant

Désormais, ces couleurs sont remplacées par celles de l’exceptionnel Solarized.

allRGB : des images avec 16 millions de couleurs

Billet

22 Mar

Vous connaissez les écrans qui affichent + de 16 millions de couleurs ? Bon. Ben là c’est pas des écrans mais des images de 16 millions de couleurs. Et plus précisément : 16 777 216 couleurs. Autrement dit : TOUTES les couleurs disponibles en RGB (où chaque couleur, je le rappelle, correspond à l’addition de trois longueurs d’ondes pour chacune des trois couleurs Rouge, Vert, Bleu pour lesquelles il existe 256 longeurs d’onde chacune). Et ça donne allRGB.

Si vous avez du temps et des compétences en création d’algorithmes…

Chaque couleur a un nom

Billet

21 Apr

Bleu, jaune, vert… On connaît tous ces couleurs. Mais si je vous dis : Prairie Sand, Bilbao ou Bossanova ?

Name That Color est un outil qui permet d’associer un nom à une couleur (en hexadécimal).

L’auteur a puisé dans plusieurs listes :

Par exemple, la couleur des liens de mon site s’appelle Lochmara. Qui l’aurait cru ?

Icones iPhone rangées par couleur

Billet

3 Apr

Oui, je me suis amusé. Oui, c’est assez pratique. Et non, je n’ai pas téléchargé d’appli uniquement pour la couleur de son icône.

01-bleu

02-gris-rouge

03-orange

04-vert

05-violet

Il est vrai que les deux derniers écrans sont moins pertinents dans cette nouvelle organisation, mais il fallait bien que je classe toutes mes icônes!

Le Magenta est une couleur

Billet

19 Feb

J’ai failli poster l’article qui disait que le magenta n’était pas une couleur. Mais il me paraissait un peu bancal. Et l’article, qui date d’il y a quelques semaines, à fait l’objet d’un buzz pas possible ces derniers jours.

Je poste aujourd’hui la réponse à cet article : le Magenta est une couleur.

En résumé, le premier article définissait une couleur comme étant une longueur d’onde particulière dans le spectre lumineux. Le second interprète cette définition comme réductive: la couleur est avant tout une interprétation de la lumière par notre cerveau et ne peut se restreindre à ce que l’on peut voir dans le spectre lumineux. (Corrigez-moi si je me suis trompé…).

Bref, je trouvais cette “bataille” assez sympathique car elle montre qu’un sujet aussi peu couvert habituellement, peut très vite apparaître au premier plan simplement parce que les internautes se l’approprient (comme moi) sans trop savoir la pertinence des propos (d’un côté ou de l’autre).

Générateur de nuancier à partir d’une image

Billet

17 Feb

En uploadant une image sur le Colors Palette Generator de CSS Drive, vous obtenez un 4 nuanciers différents, ainsi que des fichiers CSS et .aco (pour Photoshop) associés.

Un exemple en utilisant une de mes photos prises récemment à New York:

Choisir des couleurs en fonction du contraste

Billet

9 Oct

Choisir des couleurs pour son site, c’est cool, parce qu’il n’y a pas de limites. Même si l’on est parfois contraint de respecter une certaine homogénéité lorsqu’il s’agit d’un client ayant déjà une charte graphique définie (même partiellement), les couleurs (et surtout leur association) sont un terrain de jeu quasi infini.

Mais le web, même si il est très graphique, reste un support pour le contenu. Et le média le plus répandu reste le texte. Dans ce cas là, le choix des couleurs doit tenir compte de certaines règles en matière de contraste pour éviter de rendre difficile voire impossible à lire votre site web. Le W3C possède une formule pour analyser ce contraste.

Analyser le contraste de son site

AccessColor est un outil gratuit qui analyse les CSS de votre site pour vérifier le contraste entre le texte et le fond. Il évalue alors la différence de luminosité et le contraste (en utilisant le formule du W3C). Mais il ne marche pas pour les images de fond. Mon site, comme vous le voyez, obtient un très mauvais score.

Analyse AccessColor de bbxdesign

Trouver des couleurs suffisamment contrastées

Autant l’outil précédent est utile pour analyser, autant il ne permet pas de décider quelles couleurs utiliser à la place. C’est là que Particletree entre en jeu. En utilisant là encore la formule du W3C, ils ont écrit une fonction en PHP pour définir la couleur d’un élément en fonction de la couleur de fond. Bien sûr, tout ceci est dynamique.

Wufoo Charts

Sortie de Colorzilla 2.0, avec son générateur de palette de couleurs

Billet

4 Jul

Ce matin en ouvrant mon navigateur préféré, une mise à jour de Colorzilla était disponible. Vous connaissez sans doute cette extension Firefox qui permet d’avoir un outil “pipette” dans votre navigateur. Ainsi, en naviguant sur un site, il suffit de cliquer sur l’icône Colorzilla et de placer le curseur sur un pixel d’un élément de la page pour connaître ses codes couleurs (RVB et Hexadécimal).

Souvent, lors d’une mise à jour, une page du site de l’extension s’ouvre pour vous décrire les maj installées. En général, je zappe rapidement cette page, pensant qu’il n’y a qu’une liste de bugfix sans intérêt pour ma part. Mais là, j’ai bien fait de lire les nouveautés.

Aujourd’hui, la version 2.0 de Colorilla est sortie. Quoi de neuf ? Et bien 2 fonctions bien pratiques :

Webpage DOM Color Analyzer
En un clic, vous obtenez une palette de couleurs du site sur lequel vous êtes. Mais le must, c’est qu’il dresse la liste des éléments qui utilisent les couleurs en question. Il y a même la possibilité de sauvegarder la palette ou d’obtenir un permalien vers celle-ci. Voici un exemple avec mon blog :

Un excellent outil pour obtenir les couleurs d’un site que vous appréciez.
Online Palette Viewer
En complément de l’outil précédent, Colorzilla permet de visualiser, sauvegarder et partager les palettes de couleurs proposées par les utilisateurs. Par exemple, voici la palette du site du W3C. Vous remarquerez l’outil “pipette” en bas à gauche de la page, même si vous n’avez pas installé l’extension.

La version 2.0 porte plutôt bien son nom, avec son lot de fonctionnalités de partage très intéressantes, sans oublier la simplicité et l’efficacité du générateur de palettes.

Génial tour de magie : les couleurs des cartes changent

Billet

19 Jan

Mmh, un énième tour de magie avec des cartes. Banal me direz-vous ? N’en soyez pas si sûr. Regardez la vidéo d’abord, puis lisez la suite.

Spoiler :
[spoiler]Et oui, vous l’aurez remarqué, ça n’a rien à voir avec la couleur des cartes, mais plutôt celle de tout le reste. J’avoue ne pas l’avoir remarqué du tout, mon attention étant focalisée (et c’est le but) sur la réalisation du tour, qui n’est en finalement pas un.[/spoiler]

couleur bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript microsoft musique navigateur new york photo photoshop theme vidéo wordpress

Analyser le contraste de son site

Trouver des couleurs suffisamment contrastées

couleur
bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript microsoft musique navigateur new york photo photoshop theme vidéo wordpress