Mélangeur de couleurs
Mélangez deux couleurs dans n’importe quelle proportion en OKLab, OKLCH ou sRGB. Copiez le résultat ou une expression color-mix() prête à l’emploi.
- HEX
- RGB
- OKLCH
CSS avec repli
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Paliers de la première à la seconde
Le même mélange dans chaque espace
Le sRGB devient gris et sombre au milieu. OKLab garde une luminosité régulière. OKLCH et HSL gardent la saturation mais font le tour du cercle des teintes.
Questions et réponses
Qu’est-ce que color-mix() en CSS ?
color-mix() est une fonction CSS qui mélange deux couleurs dans l’espace colorimétrique de votre choix, par exemple color-mix(in oklab, #ff5733, #3b82f6 30%). Elle fonctionne dans tous les navigateurs actuels. Placez une couleur simple juste avant comme solution de repli pour les plus anciens, comme dans l’extrait ci-dessus.
Dans quel espace colorimétrique mélanger ?
OKLab est le choix par défaut le plus sûr : le milieu garde sa luminosité et ne devient pas terne. OKLCH conserve la saturation mais prend le chemin le plus court sur le cercle des teintes : le rouge et le bleu passent par le violet et le rose. sRGB, c’est le mélange des anciens outils, et son milieu paraît souvent gris et sombre.
Pourquoi mélanger la lumière diffère-t-il du mélange de peinture ?
Un écran additionne la lumière, cet outil fait donc la moyenne des valeurs lumineuses : le bleu et le jaune donnent un gris ou une couleur pâle, pas du vert. La peinture soustrait la lumière, c’est pourquoi le même mélange paraît vert sur le papier. Pour prévoir le résultat en peinture, utilisez un modèle de mélange de pigments plutôt qu’un espace colorimétrique d’écran.