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 :

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 :

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; 
}

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; 
}

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 :

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

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.