Rémi Scandella

Web developer

Biography

I am Rémi, I am 31 . I studied mathematics at university for 4 years and I am a web developer. I like to create fun experiences on the internet.

My interest for geeky stuff started very early — my passion for video games developed as soon as I could hold my brother's Sega MegaDrive controller. Then, a passion for the internet manifested itself as soon as I got access to it, when I was 11. I was fascinated by the possibility to create my own website, accessible by anyone, anywhere.

My third passion is science. I've always been fascinated by physics, but I chose to study mathematics instead. In the end, I want to focus on web development.

After having developed many projects on the web since 2006 — mainly personal projects, with no desire to share them — I have decided to do it professionally.

Don't hesitate to contact me, whatever the reason! :)

My skill set

HTML
CSS
PHP
SQL
JavaScript
TypeScript
2006 2008 2010 2021

Personal projects

Colori icon

Colori

Colour manipulation and conversion

Colori on a smartphone
Colori on a PC

This JavaScript module (also available in PHP) enables you to manipulate colours, by extracting many of their properties (hue, saturation, luminosity, etc.) in order to use and edit them on the fly.

The why and the how (in French)

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.