color-mix() et syntaxe des couleurs relatives
Mélangez des couleurs et créez des variations de couleur avec les fonctions de couleur CSS modernes.
color-mix() et syntaxe des couleurs relatives est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Fonction color-mix()
color-mix() mélange deux couleurs dans un espace colorimétrique indiqué. Elle permet de créer des variations de couleur pilotées par des jetons de conception, sans Sass ni JavaScript.
<button class="button-hover">Hover-mixed button</button>Syntaxe de color-mix()
Syntaxe complète : color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). La somme des pourcentages doit être égale à 100 %.
<div class="mix-equal">Equal mix</div>
<div class="mix-weighted">Weighted mix</div>Espaces colorimétriques dans color-mix()
L’espace colorimétrique influence le résultat du mélange. Les espaces perceptuels modernes comme oklch produisent des résultats visuellement plus uniformes que srgb :
<div class="oklch-mix">OKLCH mix</div>
<div class="srgb-mix">sRGB mix</div>Créer des échelles de couleurs avec color-mix()
Créez une palette de couleurs cohérente à partir d’une seule couleur de marque :
<span class="swatch swatch-100"></span>
<span class="swatch swatch-300"></span>
<span class="swatch swatch-700"></span>
<span class="swatch swatch-900"></span>Syntaxe des couleurs relatives
Les couleurs relatives permettent de dériver une nouvelle couleur à partir d’une couleur existante en modifiant certains canaux. Utilisez le mot-clé from :
<p class="darker">20% darker text</p>
<p class="desaturated">Half saturation text</p>Variante transparente avec une couleur relative
Créez une version transparente d’une couleur de marque sans connaître ses valeurs RGB :
<div class="overlay">Overlay</div>Éclaircissement et assombrissement
Ajoutez ou soustrayez de la luminosité dans oklch pour créer des teintes et des nuances :
<div class="card demo-active">Card</div>Présentation de l’espace colorimétrique oklch
OKLCH est un espace colorimétrique perceptuellement uniforme :
l— luminosité (de 0 à 1)c— chromaticité/saturation (de 0 à 0,4+)h— angle de teinte (de 0 à 360)
Modifier l produit des teintes et des nuances uniformes de manière prévisible.
Prise en charge par les navigateurs
color-mix() est pris en charge dans Chrome 111+, Firefox 113+ et Safari 16.2+. La syntaxe des couleurs relatives (avec le mot-clé from) est prise en charge dans Chrome 119+, Safari 16.4+ et Firefox 128+. Consultez caniuse.com pour connaître la prise en charge actuelle.
Avenir de color-contrast()
color-contrast() est une fonction proposée qui choisit automatiquement la couleur la plus lisible (dans une liste) sur un arrière-plan donné. Elle n’est pas encore disponible dans les navigateurs, mais elle est conçue pour créer des thèmes axés sur l’accessibilité.
Vérification rapide
Quel espace colorimétrique de color-mix() produit les résultats de mélange les plus uniformes sur le plan perceptuel ?
Récapitulatif
color-mix(in oklch, color1 %, color2 %) mélange les couleurs dans un espace indiqué, ce qui est idéal pour créer des teintes, des nuances et des variantes transparentes à partir d’une seule couleur de marque. La syntaxe des couleurs relatives (oklch(from var(--brand) calc(l+0.2) c h)) dérive de nouvelles couleurs en modifiant chaque canal individuellement. OKLCH est le meilleur espace colorimétrique pour obtenir des résultats perceptuellement uniformes.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « color-mix() et syntaxe des couleurs relatives » est-elle gratuite ?
Oui — le texte complet de « color-mix() et syntaxe des couleurs relatives » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « color-mix() et syntaxe des couleurs relatives » ?
Mélangez des couleurs et créez des variations de couleur avec les fonctions de couleur CSS modernes. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « color-mix() et syntaxe des couleurs relatives » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- calc() pour les calculs dynamiques
- min(), max() et clamp() pour des valeurs fluides
- repeat() et minmax() dans Grid
- color-mix() et syntaxe des couleurs relatives