Documentation - Couleurs.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Couleurs
Marssel offre un système flexible pour gérer les couleurs dans vos classes utilitaires, supportant les formats hexadécimaux, RGB, RGBA et les variables de thème.
Formats supportés
Marssel accepte plusieurs formats de couleur :
<!-- Hexadécimal sans # -->
<div class="bg-[ff0000]">Rouge</div>
<div class="bg-[0000ff] c-[white]">Bleu</div>
<!-- Hexadécimal court -->
<div class="bg-[000] c-[white]">Noir</div>
<div class="bg-[999]">Gris</div>
<!-- RGB -->
<div class="bg-rgb-[255,0,0]">Rouge RGB</div>
<div class="c-rgb-[0,128,255]">Texte bleu</div>
<!-- RGBA avec transparence -->
<div class="bg-rgba-[255,0,0,50%]">Rouge 50% transparent</div>
<div class="bg-rgba-[0,0,0,0.5]">Noir 50% transparent</div>Couleurs de texte
Utilisez c- ou c- pour la couleur du texte :
<p class="c-[000000]">Texte noir</p>
<h2 class="c-[2563eb]">Titre bleu</h2>
<span class="c-rgba-[0,0,0,70%]">Texte semi-transparent</span>
<a href="#" class="c-[6b7280] c-[2563eb]:hover">Lien avec hover</a>Couleurs de fond
Utilisez bg- ou background-c- pour la couleur de fond :
<!-- Fond coloré -->
<div class="bg-[f3f4f6]">Fond gris clair</div>
<!-- Fond avec bordure -->
<div class="bg-[000] border-[1px_solid_e5e7eb] c-[white]">
Contenu avec fond blanc
</div>
<!-- Fond transparent -->
<div class="bg-rgba-[0,0,0,20%]">Fond noir 20% opaque</div>
<!-- Fond au hover -->
<button class="bg-[2563eb] bg-[1d4ed8]:hover">
Bouton avec hover
</button>Couleurs de bordure
Appliquez des couleurs aux bordures :
<!-- Bordure colorée -->
<div class="border-[2px_solid_2563eb]">Bordure bleue</div>
<!-- Bordures multiples -->
<div class="border-t-[1px_solid_37e32f] border-b-[1px_solid_37e32f]">
Bordures top et bottom
</div>
<!-- Bordure avec hover -->
<input class="border-[1px_solid_d1d5db] border-[2563eb]:focus">Dégradés linéaires
Créez des dégradés avec bg-linear- :
<!-- Dégradé horizontal -->
<div class="bg-linear-[to_right,667eea,764ba2]">
Dégradé horizontal
</div>
<!-- Dégradé vertical -->
<div class="bg-linear-[to_bottom,667eea,764ba2]">
Dégradé vertical
</div>
<!-- Dégradé diagonal -->
<div class="bg-linear-[135deg,667eea_0%,464ba2_100%]">
Dégradé diagonal
</div>
<!-- Dégradé avec plusieurs couleurs -->
<div class="bg-linear-[to_right,67eea4,f093fb,764ba2]">
Dégradé multicolore
</div>
<!-- Dégradé complexe -->
<div class="bg-linear-[90deg,FF1000_0%,rgba(9,9,121,1)_35%] bg-size-[40px_40px] c-[white]">
Dégradé complexe
</div>Dégradés radiaux
Créez des dégradés radiaux avec bg-radial- :
<!-- Dégradé radial simple -->
<div class="bg-radial-[circle,667eea,764ba2]">
Dégradé circulaire
</div>
<!-- Dégradé complexe -->
<div class="bg-radial-[circle,rgba(2,0,36,1)_0%,45d21a_35%,rgb(65,55,114)_59%,FF0000_66%,blue_93%]">
Dégradé complexe
</div>Variables de thème
Utilisez les couleurs définies dans votre thème :
<!-- Couleurs de thème prédéfinies -->
<div class="bg-[theme-primary]">Fond primaire</div>
<div class="bg-[theme-secondary]">Fond secondaire</div>
<div class="c-[theme-text] bg-[theme-mirage]">Texte du thème</div>
<!-- Dans les bordures -->
<div class="border-[1px_solid_theme-border]">
Bordure thématique
</div>
<!-- Dans les dégradés -->
<div class="bg-linear-[to_right,theme-primary,theme-secondary]">
Dégradé thématique
</div>Conversion automatique
Marssel convertit automatiquement les formats :
class="bg-[ff0000]" // → background-color: #ff0000
class="bg-[000]" // → background-color: #000
class="bg-rgb-[255,0,0]" // → background-color: rgb(255, 0, 0)
class="bg-rgba-[0,0,0,0]" // → background-color: rgba(0, 0, 0, 0)
class="bg-linear-[to_right,667eea,764ba2]" // → background: linear-gradient(to right, #667EEA, #764BA2);