CSS color-mix()

Adam Argyle

Le CSS color-mix() vous permet de mélanger des couleurs, dans l'un des espaces de couleurs compatibles, directement à partir de votre CSS.

Avant color-mix(), pour assombrir, éclaircir ou désaturer une couleur, les développeurs utilisaient les préprocesseurs CSS ou calc() sur la couleur canaux de distribution.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass a obtenu d'excellents résultats de garder une longueur d'avance sur les spécifications CSS relatives aux couleurs. Il n'y a toutefois pas eu un véritable moyen de mélanger les couleurs en CSS. Pour vous rapprocher, vous devez effectuer un calcul de des valeurs de couleur. Voici un exemple réduit de la façon dont le CSS peut simuler le mélange aujourd'hui:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() apporte Possibilité de mélanger les couleurs dans le code CSS Les développeurs peuvent choisir l'espace colorimétrique qu'ils mélangent et dans quelle mesure chaque couleur doit être dominante dans le mélange.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

C'est ce que nous voulons. Flexibilité, puissance et API complètes. aucune info

Mélange de couleurs dans CSS

Le CSS existe dans un espace colorimétrique et un monde de gamme de couleurs multiples. C'est pourquoi il n'est pas facultatif de spécifier l'espace colorimétrique pour le mélange. De plus, différentes les espaces de couleurs peuvent considérablement changer les résultats d'un mélange, alors connaître les effets d'un espace colorimétrique vous aidera à obtenir les résultats dont vous avez besoin.

Pour une introduction interactive, essayez cet outil color-mix(): - Explorez les effets de chaque espace colorimétrique. - Explorer les effets de l'interpolation des teintes lors d'un mélange dans une couleur cylindrique (lch, oklch, hsl et hwb). - Modifiez les couleurs mélangées en cliquant sur l'une des deux cases de couleur du haut. - Utilisez le curseur pour modifier les proportions. - Code CSS color-mix() généré disponible en bas de la page.

Mélanger les différents espaces de couleur

L'espace colorimétrique par défaut pour le mélange (et les dégradés) est oklab. Il fournit des résultats cohérents. Vous pouvez également spécifier d'autres espaces de couleur pour adapter adapté à vos besoins.

Prenons black et white, par exemple. L'espace colorimétrique qu'ils mélangent ne fera pas une telle différence, n'est-ce pas ? Faux.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

</ph>

Ça a un effet énorme !

Prenons blue et white pour un autre exemple. J'ai choisi cette solution spécifiquement parce que c'est un cas où la forme d'un espace colorimétrique peut affecter les résultats. Dans ce cas, c'est que la plupart des espaces de couleur passent au violet lorsqu'ils passent du blanc au bleu. Il montre aussi à quel point oklab est un espace de couleurs si fiable pour le mélange. qui répond le mieux à ce que les gens attendent de mélanger le blanc et le bleu (pas de violet).

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

</ph>

Apprendre les effets d'un espace colorimétrique avec color-mix() est une excellente connaissance pour créer des dégradés . La syntaxe de couleur 4 permet également aux dégradés de spécifier l'espace colorimétrique, où un le dégradé représente le mélange sur une zone de l'espace.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

</ph>

Si vous vous demandez quel espace couleur est "le meilleur", il n'y en a pas. C'est pourquoi il y a tellement d’options ! Il n’y aurait pas non plus de nouveaux espaces de couleur inventé l'un ou l'autre (voir oklch et oklab), si l'un d'entre eux était "le meilleur". Chaque couleur peuvent avoir un moment unique pour se démarquer et être le bon choix.

Par exemple, si vous voulez un résultat de mix dynamique, utilisez hsl ou hwb. Dans les deux couleurs vives (magenta et citron vert) sont mélangées et les couleurs hsl et hwb sont mélangées. les deux produisent un résultat éclatant, tandis que s rgb et oklab produisent des couleurs non saturées.

</ph>

Si vous voulez plus de cohérence et de subtilité, utilisez oklab. Dans la démonstration suivante, qui mélange bleu et noir, hsl et hwb produisent des couleurs trop vives et dont la teinte change, tandis que s rgb et oklab produisent un bleu plus foncé.

</ph>

Passez cinq minutes sur color-mix() Playground à tester différentes couleurs et les espaces, et vous commencerez à comprendre les avantages de chaque espace. Aussi s'attendent à recevoir plus de conseils sur les espaces colorimétrique à mesure que nous nous adaptons tous à leurs potentiels dans nos interfaces utilisateur.

Ajuster la méthode d'interpolation de la teinte

Si vous avez choisi de mélanger un espace de couleurs cylindrique, pratiquement n'importe quelle couleur avec un canal de teinte h acceptant un angle, vous pouvez spécifier si le l'interpolation est shorter, longer, decreasing et increasing. C'est dans ce Guide des couleurs HD si vous souhaitez en savoir plus.

Voici le même exemple de mixage bleu-blanc, mais cette fois, des espaces cylindriques avec différentes méthodes d'interpolation des teintes.

</ph>

Voici un autre Codepen que j'ai créé pour aider à visualiser l'interpolation des teintes, mais en particulier pour les dégradés. Je pense que cela vous aidera à comprendre comment chacun dans l'espace colorimétrique produit son résultat de mélange lorsque l'interpolation des teintes est spécifiée, tu peux l'étudier !

Mélange avec des syntaxes de couleurs variables

Jusqu'à présent, nous avons principalement combiné des couleurs nommées CSS, comme blue et white. Couleur CSS le mélange est prêt à mélanger des couleurs provenant de deux espaces de couleurs différents. C'est il est essentiel de spécifier l'espace colorimétrique pour le mélange, car il définit l’espace commun lorsque les deux couleurs ne sont pas dans le même espace.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

Dans l'exemple précédent, hsl et display-p3 seront convertis en oklch puis mélangés. Plutôt cool et flexible.

Ajuster les proportions de mélange

Il est peu probable que chaque fois que vous mélangez vous voulez des parties égales de chaque couleur, comme la plupart des exemples jusqu'à présent. Bonne nouvelle, il existe une syntaxe pour en articulant la quantité de chaque couleur devant être visible dans le mélange résultant.

Pour commencer, voici un exemple de mix qui sont tous équivalents (et qui correspondent aux spécifications):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

Je trouve que ces exemples mettent en évidence les cas limites. La première série de des exemples montrent que la valeur de 50% n'est pas obligatoire, mais peut être spécifiée de manière facultative. Le dernier Cet exemple illustre un cas intéressant dans lequel les ratios dépassent 100% lorsqu'ils sont ajoutés ensemble, ils sont également limités à un total de 100%.

Notez également que si une seule couleur spécifie un ratio, l'autre est supposée être le reste à 100%. Voici quelques exemples supplémentaires pour illustrer ce processus comportemental.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

Ces exemples illustrent deux règles: 1. Lorsque les ratios dépassent 100%, ils sont limités et répartis de manière égale. 1. Lorsqu'un seul ratio est fourni, l'autre couleur est définie sur 100 moins ce ratio.

La dernière règle est un peu moins évidente : que se passe-t-il si des pourcentages sont fournis pour les deux couleurs et que leur somme n'est pas égale à 100%?

color-mix(in lch, purple 20%, plum 20%)

Cette combinaison d'un color-mix() se traduit par de la transparence, mais aussi par la 40%. Lorsque les ratios n'atteignent pas 100%, le mix qui en résulte ne sera pas opaque. Aucune des couleurs ne sera complètement mélangée.

Imbrication de color-mix()

Comme tous les CSS, l'imbrication est gérée correctement et comme prévu. fonctions internes résolvent d'abord et renvoient leurs valeurs au contexte parent.

color-mix(in lch, purple 40%, color-mix(plum, white))

N'hésitez pas à imbriquer autant de composants que nécessaire pour obtenir le résultat escompté.

Créer un jeu de couleurs clair et sombre

Créons des jeux de couleurs avec color-mix().

Un jeu de couleurs de base

Dans le CSS suivant, un thème clair et un thème sombre sont créés en fonction du code hexadécimal de la marque. couleur. Le thème clair crée deux couleurs de texte bleu foncé et un blanc très clair couleur de la surface de l'arrière-plan. Ensuite, dans une requête média de préférence sombre, propriétés se voient attribuer de nouvelles couleurs afin que l'arrière-plan soit sombre et que les couleurs du texte sont légers.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

Tout cela est accompli en mélangeant le blanc ou le noir dans une couleur de marque.

Jeu de couleurs intermédiaire

Vous pouvez aller encore plus loin en ajoutant des thèmes clair et sombre. Dans Dans la démo suivante, les modifications apportées au groupe d'options mettent à jour un attribut dans le code HTML Tag [color-scheme="auto"], qui permet ensuite aux sélecteurs d'appliquer des conditions un thème de couleurs.

Cette démonstration intermédiaire présente également une technique de thématisation des couleurs qui consiste à utiliser les couleurs du thème sont listées dans :root. Cela les rend faciles à voir tous ensemble et ajustez-les si nécessaire. Plus loin dans la feuille de style, vous pouvez utiliser les variables telles qu'elles définis. Cela évite de devoir parcourir la feuille de style pour les manipulations de couleurs, elles sont toutes contenues dans le bloc :root initial.

Cas d'utilisation plus intéressants

Ana Tudor propose une excellente démonstration avec quelques cas d'utilisation. pour l'étude:

Déboguer color-mix() avec les outils de développement

Les outils pour les développeurs Chrome sont parfaitement compatibles avec color-mix(). Il reconnaît et met en évidence la syntaxe, crée un aperçu du mix juste à côté du style dans volet Styles et permet de choisir d'autres couleurs.

Cela ressemblera à quelque chose comme ceci dans les outils de développement:

Bon mix !