Outils CSS

Gratuit Generateur de syntaxe de couleur relative CSS

Générez la syntaxe de couleur relative CSS pour des variantes alpha, claires, sombres et ajustees.

Chargement de l'outil...

Qu'est-ce que Generateur de syntaxe de couleur relative CSS ?

La syntaxe de couleur relative CSS permet de partir d'une couleur existante et de modifier ses canaux individuellement. En utilisant la syntaxe rgb(from color r g b / alpha) ou hsl(from color h s l / alpha), vous pouvez ajuster la luminosite, la saturation, l'alpha ou les canaux individuels. C'est plus puissant que color-mix() pour la manipulation precise des canaux.

Réponse rapide

La syntaxe de couleur relative CSS permet de creer une nouvelle couleur en ajustant les canaux individuels d'une couleur existante. C'est plus puissant que color-mix() pour la manipulation precise au niveau des canaux sans preprocesseur.

Last updated: 2026-06-11

Limites

  • La compatibilité navigateur necessite Chrome 119+, Safari 16.4+ et Firefox 128+. Les navigateurs plus anciens ignoreront entierement la declaration.
  • La syntaxe varie legerement selon l'espace colorimetrique. Tous les canaux ne sont pas disponibles dans chaque espace colorimetrique, et les plages de valeurs des canaux diffèrent.
  • Les expressions de couleur relative imbriquees complexes peuvent nuire a la lisibilite. Utilisez une propriete personnalisee CSS pour la couleur de base afin de garder les declarations propres.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Saisissez une couleur de base au format hex, RGB ou HSL.
  2. Choisissez l'espace colorimetrique de sortie et les ajustements de canaux.
  3. L'outil genere la syntaxe de couleur relative CSS.
  4. Copiez la declaration dans votre feuille de style.

A quoi il sert

  • Creer des variantes semi-transparentes d'une couleur de marque.
  • Generer une teinte plus claire ou plus foncee en ajustant le canal de luminosite.
  • Augmenter ou reduire la saturation pour les etats de survol et actifs.

Cas d'usage

Exemples concrets

Exemple

Couleur de marque avec transparence alpha

Un designer convertit une couleur de marque hexadecimale en variante a 80% d'opacite en utilisant rgb(from #3b82f6 r g b / 0.8).

Exemple

Arriere-plans de carte plus clairs via oklch

Un theme genere des arriere-plans de carte plus clairs et plus fonces en ajustant le canal L dans oklch.

Erreurs frequentes

  • Utiliser le mauvais espace colorimetrique pour la manipulation de canal souhaitee.
  • Imbriquer trop profondement les couleurs relatives et nuire a la lisibilite.
  • Ne pas fournir de solution de repli pour les navigateurs qui ne prennent pas en charge la syntaxe de couleur relative.

Vérification

  1. Testez le CSS genere dans le panneau Styles de Chrome DevTools pour confirmer que la couleur se resout en la valeur calculee attendue.
  2. Verifiez qu'une couleur de repli statique est declaree avant la syntaxe de couleur relative pour les navigateurs qui ne prennent pas en charge la fonctionnalite.

FAQ

Questions sur Generateur de syntaxe de couleur relative CSS

Quelle est la difference entre color-mix() et la syntaxe de couleur relative ?

color-mix() melange deux couleurs. La syntaxe de couleur relative prend une couleur et ajuste ses canaux. Utilisez color-mix() pour le melange et la syntaxe relative pour la manipulation des canaux.

Quels navigateurs prennent en charge la syntaxe de couleur relative ?

Chrome 119+, Edge 119+, Safari 16.4+, Firefox 128+. Fournissez une couleur statique de repli.

Quels espaces colorimetriques puis-je utiliser avec from ?

Vous pouvez utiliser rgb, hsl, hwb, oklch, oklab, lab, lch et srgb-linear. Chaque espace expose différents canaux d'ajustement. oklch est souvent prefere pour les ajustements de luminosite uniformes sur le plan perceptuel.

Quel est un cas d'usage pratique de la syntaxe de couleur relative que je ne peux pas faire avec color-mix() ?

La syntaxe de couleur relative peut extraire et manipuler des canaux de couleur individuels -- par exemple, prendre une couleur de marque et creer une variante plus claire en augmentant son canal de luminosite tout en conservant la meme teinte et saturation. Ce controle au niveau des canaux est impossible avec color-mix().

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi