Color Space Morph
Deux bandeaux CSS côte à côte comparent l'interpolation sRGB et OKLCH sur les mêmes couleurs — le milieu du dégradé révèle tout.
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
L'effet repose entièrement sur CSS Color Level 4 : chaque bande est un background: linear-gradient(90deg in <color-space>, …). Le mot-clé in srgb ou in oklch indique au navigateur dans quel espace interpoler les couleurs intermédiaires — mêmes couleurs de départ et d'arrivée, chemins radicalement différents.
La bande sRGB interpole les composantes R, G, B linéairement dans l'espace sRGB non-linéaire. En traversant d'un orange (H ≈ 30°) vers un bleu-violet (H ≈ 260°), les valeurs RVB intermédiaires accumulent une composante verte parasite — le midpoint vire au brun-gris que l'œil perçoit comme « boueux ».
La bande OKLCH travaille en coordonnées Lightness-Chroma-Hue. La luminosité perceptuelle reste constante et la teinte pivote directement de 30° à 260° — les couleurs intermédiaires restent vives et saturées, sans jamais traverser une zone grise.
Au survol du conteneur, une règle :hover active un second jeu de couleurs (vert → rose, H 120° → H 330°) et agrandit chaque bande de 40 px à 50 px avec une transition: 1s. Aucun JavaScript n'est impliqué : l'effet est 100 % CSS, zéro dépendance.
Accessibilité
- prefers-reduced-motion absent : l'effet ne contient pas de règle
@media (prefers-reduced-motion: reduce). La transition de 1 s au survol s'exécute pour tous les utilisateurs. Ajoutez@media (prefers-reduced-motion: reduce) { .colorspace-strip { transition: none; } }si votre contexte l'exige. - L'interaction est hover uniquement : aucun état
:focusne déclenche la comparaison. Les utilisateurs au clavier et sur mobile tactile voient l'état par défaut uniquement. - Les labels
sRGBetOKLCHsont du texte blanc sur fond coloré. L'ombre portéetext-shadowrenforce la lisibilité, mais le contraste varie selon la position dans le dégradé et ne garantit pas WCAG AA sur tous les tons. - Le conteneur
.colorspace-containerne porte pas deroleni d'aria-label. Pour une page documentaire, ajoutezrole="img" aria-label="Comparaison dégradé sRGB vs OKLCH". - Étant 100 % CSS, l'effet est fonctionnel sans JavaScript et ne crée aucun piège au clavier.
Compatibilité navigateur
Nécessite la syntaxe in <color-space> de CSS Color Level 4 dans les dégradés, disponible depuis 2023 dans tous les moteurs modernes.
Dans les navigateurs antérieurs qui ignorent <code>in oklch</code>, les deux bandes s'affichent avec une interpolation sRGB et paraissent identiques — la comparaison est perdue, mais la page reste fonctionnelle sans erreur.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="chroma-demo colorspace-container">
<div class="colorspace-strip colorspace-srgb">
<span class="cs-label">sRGB</span>
</div>
<div class="colorspace-strip colorspace-oklch">
<span class="cs-label">OKLCH</span>
</div>
<span class="colorspace-note">hover : mêmes couleurs, chemins différents</span>
</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 |
|---|---|---|
| .colorspace-srgb { background } | oklch(.65 .28 30) → oklch(.6 .25 260) | Couleurs de départ et d'arrivée de la bande sRGB (orange → bleu-violet). Utilisez les mêmes valeurs dans la bande OKLCH — seul le mot-clé in srgb / in oklch change. |
| .colorspace-container:hover strip background | oklch(.7 .3 120) → oklch(.55 .28 330) | Second jeu de couleurs révélé au survol (vert → rose). Choisissez une paire qui maximise l'écart visible entre les deux modes. |
| .colorspace-strip { height } | 40px | Hauteur de chaque bande. 24 px pour un widget compact, 60–80 px pour une vitrine héro ou une démonstration pédagogique. |
| hover strip height | 50px | Hauteur des bandes au survol. Égaliser avec la valeur par défaut pour supprimer le zoom, augmenter pour accentuer le reveal. |
| .colorspace-strip { transition } | 1s | Durée de la transition hover. 0,3 s = snappy, 2 s = cinématique. transition: none pour les environnements qui coupent les animations. |
| .colorspace-container { gap } | 12px | Écart vertical entre les deux bandes. 4–24 px selon la densité souhaitée. |
| .colorspace-container { background } | #0f0f1a | Fond du conteneur. Adaptez à la palette de votre page (transparent, couleur brand, etc.). |
| .colorspace-strip { width } | 90% | Largeur des bandes. 100 % pour bords à bords, 70 % pour un rendu centré et aéré. |
FAQ
linear-gradient avec des espaces d'interpolation différents et une pseudo-classe :hover. Aucun script, aucune librairie, aucun framework requis. Copiez le HTML et le CSS — c'est immédiatement prêt.in <color-space> dans les dégradés est disponible depuis Chrome 111, Firefox 113 et Safari 16.2 (2023).
