# Mélangeur de couleurs

Mélangez deux couleurs dans l’espace colorimétrique de votre choix et selon n’importe quelle proportion, comme le fait CSS color-mix(). Saisissez deux couleurs dans n’importe quel format CSS, définissez la proportion de la seconde couleur entre 0 et 100 pour cent, puis choisissez OKLab, OKLCH, Lab, LCH, sRGB, sRGB linéaire, Display P3, HSL, HWB ou XYZ. Le résultat s’affiche en HEX, RGB, HSL et OKLCH, avec une expression color-mix() prête à intégrer à votre feuille de style.

## Foire aux questions

### Comment fonctionne la proportion ?

La proportion correspond à la part de la couleur 2 dans le mélange. À 0 %, le résultat est la couleur 1 ; à 100 %, il s’agit de la couleur 2 ; et à 50 %, le résultat se situe à mi-chemin entre les deux dans l’espace choisi. Cela correspond à color-mix(in space, color1 (100 - p)%, color2 p%).

### Quel espace colorimétrique choisir ?

OKLab, l’option par défaut, est perceptuellement uniforme et évite les tons intermédiaires ternes ou sombres. sRGB mélange les canaux encodés en gamma, comme les anciens navigateurs et Sass, ce qui assombrit et ternit les mélanges de couleurs saturées. Lab est l’ancien espace perceptuel CIE ; son comportement est proche de celui d’OKLab, mais les bleus y sont moins uniformes.

### À quoi servent les espaces basés sur la teinte ?

OKLCH, LCH, HSL et HWB interpolent la teinte en suivant l’arc le plus court du cercle chromatique, selon l’option par défaut CSS. Le ton intermédiaire conserve ainsi sa saturation et peut être plus vif que chacune des couleurs d’entrée. Si l’une des couleurs est un gris neutre sans teinte, la teinte de l’autre couleur est utilisée.

### À quoi servent sRGB linéaire et XYZ ?

Tous deux mélangent linéairement les intensités lumineuses, comme des faisceaux lumineux qui se superposent ; le ton intermédiaire paraît donc plus clair qu’en sRGB. Ils sont utiles pour les effets basés sur la physique et pour reproduire l’apparence de pixels floutés ou mélangés.

### Comment la transparence est-elle gérée ?

Comme CSS color-mix(), le mélangeur effectue l’interpolation avec un canal alpha prémultiplié, afin qu’une couleur transparente ne tire pas le mélange vers le noir. La valeur alpha est elle-même interpolée selon la même proportion ; elle apparaît dans les codes hexadécimaux à 8 chiffres et après la barre oblique dans les fonctions CSS.

### Quels formats d’entrée puis-je utiliser ?

Codes hexadécimaux avec ou sans #, noms de couleurs CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), espaces color() tels que display-p3, et cmyk(), dans n’importe quelle combinaison. Chaque couleur peut comporter jusqu’à 100 caractères.

### Que se passe-t-il si le résultat est hors du gamut sRGB ?

Un mélange effectué en Display P3, OKLCH ou LCH peut produire des couleurs que sRGB ne peut pas afficher. Les valeurs HEX, RGB et HSL sont alors converties en sRGB avec l’algorithme CSS Color 4, et le résultat est accompagné d’une remarque ; la valeur OKLCH conserve la couleur non convertie.

### Comment utiliser l’expression color-mix() ?

Collez-la dans n’importe quelle propriété CSS qui accepte une couleur. Elle indique les entrées par leur code hexadécimal, ou par oklch() pour les couleurs à large gamut, afin que le navigateur recalcule le même mélange. color-mix() fonctionne dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari.

### Quelle est la précision du résultat ?

La proportion est exprimée en pourcentage entier et le mélange est calculé avec toute la précision offerte par la bibliothèque culori. Les canaux RGB sont arrondis à l’entier, les pourcentages HSL à deux décimales, et la luminosité et la chroma OKLCH à quatre décimales. Les navigateurs peuvent donc différer d’une unité sur le dernier chiffre.

### Comment obtenir plusieurs étapes entre deux couleurs ?

Effectuez le mélange avec différentes proportions, par exemple 25 %, 50 % et 75 %. Pour créer une gamme complète vers le blanc, le noir ou le gris, les générateurs de teintes claires, de teintes foncées et de tons de couleur produisent toutes les étapes dans un seul tableau.

Votre publicité ici ?

[Envoyez-nous un e-mail](mailto:hi@dennn.is?subject=Publicit%C3%A9%20sur%20OneClick%20Pro)

[Annonce La suite de plugins prête pour les agents de WordPress.](https://sleekwp.com/?ref=oneclickpro)