Recréer l’icône du sélecteur de couleurs d’Apple

Je travaille actuellement sur un sélecteur de couleurs, où l’utilisateur peut sélectionner une couleur thématique prédéfinie :

Initial colorpicker

Bien que cela soit assez simple à coder et à utiliser, il y aura des cas où l’utilisateur aura besoin de créer une couleur personnalisée.

Alors, comment indiquer qu’une couleur est personnalisée, qu’elle ne fait pas partie des couleurs par défaut du thème – et qu’elle peut être modifiée ?

J’ai passé un certain temps à étudier cette question, et j’ai découvert comment Apple le fait dans son application Notes :

Apple Color Picker

Simple et beau ! La couleur choisie est affichée au centre du cercle, entourée d’une bordure intérieure et d’un dégradé de teintes.

Mais comment réaliser cela en CSS ?.

Nous allons simplement remplacer le dégradé linéaire par un dégradé conique :

.box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; 
  padding: 8px; 
  background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
) border-box;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}

… ce qui donne le résultat suivant :

Color Picker Icon with gradient border

Joli ! Maintenant, pour la « bordure intérieure », j’ai créé un deuxième masque :

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; 
  padding: 12px;
  background: linear-gradient(var(--body-bg) 0 0) border-box;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}

Ce qui nous donne :

With inner white border

On y est presque… mais qu’en est-il du « mode sombre » ? Avez-vous remarqué la variable –body-bg ? Cela prend en charge l’héritage de la couleur de fond, donc :

Dark mode

Ce qui est génial avec cette technique, c’est qu’elle fonctionne avec ou sans border-radius :

Square picker

Réflexions finales

Je dois admettre que cela m’ennuie un peu d’utiliser les deux pseudo-éléments pour les masques : un pour le dégradé conique et un pour la bordure intérieure. Ce dernier devrait simplement « découper » une zone et laisser la couleur de fond de la page ou de la section « transparaître ». Si vous savez comment faire, merci de partager vos découvertes dans les commentaires !

Après avoir fini d’écrire ce billet, j’ai remarqué que l’icône d’Apple est un peu plus dé-saturée. Pour obtenir ce résultat, il suffit de modifier la partie saturation des couleurs hsl dans le masque.

Exemple : Changez hsl(360, 100%, 50%) en hsl(360, 80%, 50%), etc.

Desaturated


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.