Color Mix Crossfade
Trois blocs CSS comparent en direct les chemins de mélange color-mix() en oklch et en sRGB — zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La fonction CSS color-mix() prend deux couleurs et un espace colorimétrique, puis retourne la couleur au point médian du trajet entre elles dans cet espace. L'effet pose deux instances côte à côte : le bloc central affiche color-mix(in oklch, …) au repos, et bascule sur color-mix(in srgb, …) au survol — via un sélecteur :hover seul, sans JavaScript.
La différence visuelle vient de la géométrie des espaces : oklch est perceptuellement uniforme (L = luminosité constante, C = chroma, H = teinte), donc le point médian entre un rouge-orange oklch(.65 .28 30) et un bleu-violet oklch(.6 .25 260) produit un violet saturé. sRGB interpole linéairement ses canaux R, G, B bruts — le trajet traverse le centre du cube RGB, ce qui désature le résultat vers un gris terne.
Au survol du .crossfade-container, trois changements se déclenchent simultanément : les blocs A et B s'écartent de 20 px via transform: translateX(±20px), le bloc mix s'élargit de 60 px à 120 px, et son background passe de la version oklch à la version sRGB. Tout est piloté par les transition déclarées sur chaque bloc (1,2 s pour A et B, 1 s pour le mix). L'espace de mélange affiché au repos est indiqué par le .crossfade-info qui monte en opacité au survol.
Accessibilité
- ⚠️ prefers-reduced-motion absent : les transitions (1,2 s et 1 s) s'exécutent quelle que soit la préférence système. Ajoutez
@media (prefers-reduced-motion: reduce) { .crossfade-block { transition: none } }avant de déployer en production. - L'interaction est déclenchée par :hover uniquement — les utilisateurs au clavier ne peuvent pas déclencher la comparaison sans script supplémentaire.
.crossfade-infoest un<span>dans le flux du DOM — son texte est lu par les lecteurs d'écran.- Aucun
roleniaria-labelsur les blocs colorés — ils sont purement décoratifs dans la démo originale. - Contraste de
.crossfade-info: blanc à 60 % d'opacité sur fond#0f0f1a— ratio inférieur au seuil WCAG AA pour le texte de petite taille (objectif 4,5:1 non atteint).
Compatibilité navigateur
Nécessite color-mix() et oklch() — disponibles dans tous les navigateurs modernes depuis début 2023.
Sans support <code>color-mix()</code> ou <code>oklch()</code>, le bloc mix s'affiche sans fond (transparent) ; les blocs A et B peuvent aussi perdre leur couleur. Aucune erreur JS — la dégradation est silencieuse.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="chroma-demo crossfade-container">
<div class="crossfade-blocks">
<div class="crossfade-block block-a"></div>
<div class="crossfade-block block-mix"></div>
<div class="crossfade-block block-b"></div>
</div>
<span class="crossfade-info">hover: oklch → srgb blend path</span>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| .block-a { background } | oklch(.65 .28 30) | Première couleur source. Accepte tout format CSS valide : hex, rgb, hsl, oklch. |
| .block-b { background } | oklch(.6 .25 260) | Deuxième couleur source. Garder les deux dans le même espace (oklch + oklch) donne les résultats les plus prévisibles. |
| color-mix(in oklch, …) — repos | oklch | Espace de mélange affiché au repos. Remplacez par lch, lab ou hsl pour une autre comparaison de départ. |
| color-mix(in srgb, …) — survol | srgb | Espace de mélange révélé au survol. La paire oklch / sRGB montre le contraste le plus saisissant ; essayez oklch / hsl pour une autre perspective. |
| .crossfade-block { transition } | 1.2s | Durée de la translation des blocs A et B. Réduisez à 0,4 s pour une réponse vive, augmentez à 2 s pour un fondu lent. |
| .block-mix { width } / hover 120px | 60px / 120px | Largeur du bloc mix au repos et au survol. Augmentez la valeur hover pour accentuer le résultat ; réduisez les deux pour des blocs plus compacts. |
| .crossfade-info (texte) | "hover: oklch → srgb blend path" | Texte descriptif sous les blocs. Modifiez-le pour refléter les espaces de mélange que vous comparez. |
FAQ
background: #hex juste avant la règle color-mix() — les navigateurs qui ne reconnaissent pas la valeur appliquent la précédente.background: var(--color-a) et color-mix(in oklch, var(--color-a), var(--color-b)). Mettez à jour ces variables depuis JavaScript : el.style.setProperty('--color-a', newColor). color-mix() recalcule le résultat immédiatement.color-mix(in lab, …), color-mix(in hsl, …)) et révélez-les sur d'autres états : :focus-within, une classe JS activée au clic, ou des sélecteurs :hover en cascade. La structure CSS est identique pour chaque bloc ajouté.
