Le CSS color-mix()
vous permet de mélanger des couleurs, dans l'un des espaces de couleurs compatibles, directement à partir de votre CSS.
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">![Les sept espaces de couleur (s rgb, linear-s rgb, lch, oklch, lab, oklab et xyz) affichent chacun le résultat obtenu en mélangeant le noir et le blanc. Environ cinq teintes différentes sont affichées, ce qui montre que chaque espace de couleur se mélangera même à un gris différemment.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-f139be872a18a.png?authuser=0&hl=fr)
Ç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 type="x-smartling-placeholder">![Sept espaces de couleur (s rgb, linear-s rgb, lch, oklch, lab, oklab, xyz) affichant chacun des résultats différents. Beaucoup sont roses ou violets, mais peu sont encore bleus.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-5415cf7a20d75.png?authuser=0&hl=fr)
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 type="x-smartling-placeholder">![Dégradés noir sur blanc dans différents espaces de couleurs.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-a16c67a3aee6c.png?authuser=0&hl=fr)
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 type="x-smartling-placeholder">![Les résultats du mix sont décrits dans le paragraphe précédent.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-93bf2be27ac03.png?authuser=0&hl=fr)
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 type="x-smartling-placeholder">![Les résultats du mix sont décrits dans le paragraphe précédent.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-f139d29a23359.png?authuser=0&hl=fr)
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 type="x-smartling-placeholder">![Les résultats du mix sont décrits dans le paragraphe précédent.](https://developer.chrome.com/static/docs/css-ui/css-color-mix/image/alttexthere-5b90e9287d746.png?authuser=0&hl=fr)
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 !