Propriétés de Couleur CSS — Guide Complet pour Développeurs Web

Les deux propriétés de couleur CSS les plus fondamentales sont color (pour le texte) et background-color (pour les arrière-plans). Elles acceptent toute valeur de couleur CSS valide. La propriété color définit la couleur de premier plan de l'élément. La propriété background-color remplit toute la zone de contenu et de padding.

CSS a évolué au-delà de rgb() et hsl() basiques : rgb() supporte maintenant la syntaxe moderne : rgb(255 0 0). La transparence alpha utilise une barre : rgb(255 0 0 / 50%). hsl() fonctionne de manière similaire. HSL est utile pour créer des variations de couleur. La fonction color-mix() permet de mélanger deux couleurs. oklch() et oklab() fournissent des espaces colorimétriques perceptuellement uniformes.

Les dégradés CSS créent des transitions de couleur fluides : Dégradés linéaires : background: linear-gradient(to right, #ff0000, #0000ff). Dégradés radiaux : background: radial-gradient(circle, red, blue). Dégradés coniques : background: conic-gradient(red, yellow, green, blue, red). Excellents pour les roues chromatiques.

CSS offre plusieurs moyens de contrôler la transparence : La propriété opacity affecte l'élément entier et tous ses enfants. Les canaux alpha dans les valeurs de couleur n'affectent que la propriété spécifique. Le mot-clé transparent équivaut à rgba(0, 0, 0, 0). currentColor hérite de la couleur de texte actuelle.

Les propriétés personnalisées CSS sont le fondement des systèmes de couleur modernes. Elles définissent les couleurs une fois et les réutilisent dans toute la feuille de style. Pour le mode sombre, remplacez simplement les variables. Notre outil de sélection de couleurs génère des valeurs dans tous les formats CSS instantanément.