Rémi Scandella

Développeur web

Biographie

Je suis Rémi, j'ai 30 ans. J'ai un bac+4 en mathématiques et je suis développeur web. J'aime créer des expériences ludiques et dynamiques sur internet.

Ma vie de geek a commencé dès le plus jeune âge ; ma passion pour les jeux vidéo est née dès que j'ai su manier la manette de la Sega MegaDrive de mes frères. Ensuite, c'est une passion pour internet qui s'est manifestée dès que j'y ai eu accès, à mes 11 ans. J'étais fasciné par la possibilité de créer mon propre site internet, accessible par tout le monde, partout.

Ma troisième passion, c'est la science. Passionné par la physique, j'ai cependant préféré m'orienter vers des études de mathématiques. Finalement, c'est au développement web que je souhaite consacrer mon temps.

Après avoir développé plusieurs projets sur le web depuis 2006 — souvent des projets personnels, sans désir de les partager — j'ai décidé d'en faire mon métier.

N'hésitez pas à me contacter, quelle qu'en soit la raison ! :)

Mes compétences

HTML
CSS
PHP
SQL
JavaScript
TypeScript
2006 2008 2010 2021

Projets personnels

Icône de Colori

Colori

Manipulation et conversion de couleurs

Colori sur smartphone
Colori sur PC

Ce module JavaScript (aussi disponible en PHP) permet de manipuler des couleurs, en extrayant plusieurs de leurs propriétés (teinte, saturation, luminosité, etc.) afin de pouvoir les utiliser et les modifier à la volée.

Le pourquoi du comment

Dans plusieurs projets présentés sur ce portfolio, j'ai fait en sorte que l'interface s'adapte à la couleur de certains éléments. C'est le cas du portfolio lui-même, où chaque projet est associé à une couleur, et cliquer sur un projet ouvre une fenêtre de cette couleur-là. C'est aussi le cas de Solaire, où l'application s'adapte à la couleur de l'étoile.

En développant ces projets et en jouant avec les couleurs, j'ai eu envie d'utiliser un outil qui me permettrait de convertir une couleur, à la volée, d'un format à un autre (par format, j'entends un format supporté par CSS, comme RGB - pour rouge / vert / bleu - ou HSL - pour teinte / saturation / luminosité). Je me suis dit qu'il serait intéressant de développer cet outil moi-même ; c'est ainsi qu'est né Colori.

Colori est disponible en tant que module JavaScript ou PHP, sans dépendance, et j'espère l'avoir rendu suffisamment simple pour pouvoir être utilisé même par un développeur débutant. Pour en démontrer les capacités, j'ai développé une interface qui utilise Colori pour faire fonctionner un convertisseur de couleurs.

Interface de Colori en rouge Interface de Colori en vert Interface de Colori en bleu
L'interface s'adapte à la couleur entrée dans le convertisseur

J'ai aussi rédigé une documentation qui renseigne sur toutes les fonctions intégrées à Colori. Par exemple, la fonction invert permet d'obtenir le négatif d'une couleur ; la fonction blend permet de fusionner deux couleurs, c'est-à-dire de déterminer quelle couleur on observerait si on superposait une couleur semi-transparente par-dessus une autre couleur. Plusieurs autres fonctions sont disponibles, je vous invite à consulter la documentation pour les voir toutes.


Pour adapter l'interface à la couleur entrée, j'ai d'abord tenté de concevoir l'interface avec des couleurs au format HSL. Ainsi, je pouvais changer la valeur de teinte des couleurs tout en conservant la même saturation et luminosité. Mon but était, par exemple, de pouvoir passer l'interface entière du rouge au jaune. Malheureusement, j'ai découvert que ce ne serait pas aussi simple.

En effet, dans l'espace de couleurs HSL, deux couleurs avec la même valeur de luminosité n'ont pas réellement la même luminosité perçue. Voici deux images de l'interface en rouge et en jaune, mettant en avant ce problème.

Ancienne interface de Colori en rouge, avec couleurs au format HSL Ancienne interface de Colori en jaune, avec couleurs au format HSL
L'ancienne interface, utilisant des couleurs HSL, montre clairement que les couleurs jaunes paraissent plus claires que les couleurs rouges, même lorsqu'elles ont la même valeur de luminosité

Pour régler ce problème, il m'a fallu concevoir l'interface avec des couleurs dans un autre espace de couleurs, qui conserve la luminosité perçue lorsqu'on change la teinte. J'ai d'abord choisi l'espace LCH. Il conserve bien les luminosités perçues en changeant la teinte, mais il présente un léger problème pour les teintes bleues. En effet, en conservant la même teinte bleue mais en variant la luminosité, la teinte dérive vers le violet.

Ancienne interface de Colori en bleu, avec couleurs au format LCH
Avec des couleurs LCH, l'interface "bleue" prend une teinte violette

Finalement, j'ai choisi l'espace de couleurs OKHSL. Tout comme LCH, il conserve ls luminosités perçues, mais il résout aussi le décalage vers le violet observé avec LCH.

Interface de Colori en rouge, avec couleurs au format OKLCH Interface de Colori en jaune, avec couleurs au format OKLCH Interface de Colori en bleu, avec couleurs au format OKLCH
La nouvelle interface, utilisant des couleurs OKLCH, conserve mieux les luminosités perçues et la teinte du bleu

OKLCH commence à être supporté par les navigateurs web, mais ce n'était pas le cas il y a quelques années quand je l'ai ajouté à Colori.

L'interface s'adapte aussi au thème choisi par l'utilisateur : clair ou sombre, selon le réglage de l'appareil ou le choix fait via le sélecteur de thème.

Thème clair de l'interface Thème sombre de l'interface
Le thème clair et le thème sombre

J'utilise des techniques similaires pour changer la couleur des sections sur ce portfolio sur lequel vous lisez ces mots, ainsi que dans mes autres projets.


Regardons plus en détail la partie "Démonstration" de l'interface de présentation de Colori. Il s'agit d'un convertisseur de couleurs : l'utilisateur entre une couleur dans un format supporté par CSS (par exemple "red" ou "#FF0000"), et le convertisseur affiche cette couleur dans tous les autres formats.

Convertisseur de couleurs
Toutes ces valeurs représentent la couleur rouge dans différents formats

L'utilisateur peut aussi choisir une couleur via un sélecteur de couleur, qui propose de manipuler individuellement chaque valeur des couleurs, dans plusieurs formats.

Sélecteur de couleur
Le sélecteur de couleur, ici dans le format OKLCH, affichant donc les valeurs de luminosité (L), chroma (C), teinte (H) et opacité

Les fonctions de modification de couleur (comme invert et blend mentionnées plus tôt) peuvent aussi être testées via ce convertisseur. Il suffit de les saisir, dans une syntaxe proche de celle de JavaScript, pour observer le résultat.

Exemple de fonction
L'inverse du rouge, c'est le cyan, aussi appelé "aqua" en CSS

J'ai fait en sorte que les fonctions puissent être enchaînées, permettant de calculer des couleurs complexes via ce convertisseur.

Exemple de fonctions en chaîne
L'inverse de l'inverse du rouge... c'est le rouge

Remarquez l'alignement des titres avec leur section, et l'ombre allongée qu'ils projettent.

Alignement précis du titre
Le titre "Documentation" est précisément aligné avec le haut de sa section

Cet effet visuel particulier, qui est obtenu suite à une mesure précise de la police utilisée, est une idée que je souhaite implémenter depuis longtemps. Un effet semblable se trouvait déjà sur un prototype de portfolio développé il y a quelques années.

Prototype de mon site personnel
Une première idée de design pour mon portfolio utilisait un effet similaire

J'ai longtemps souhaité trouver une place à cet effet en-dehors de ce prototype, et je suis content que ce soit chose faite grâce à Colori.