Palette de Couleurs Complète
Découvrez toutes les couleurs disponibles et apprenez à les utiliser
Couleur neutre
#0A73E1
#182D42
#818cf8
#4ade80
#fbbf24
#f87171
#22d3ee
#a3a3a3
Couleurs Primaires
#EFEAF5
#DED5EC
#BBA8D6
#9A7EC3
#0A73E1
#5A3E85
#49326C
#362550
#231834
#130D1C
#09060E
Couleurs Secondaires
#DAE6F1
#B0C9E2
#6696C7
#34618E
#182D42
#142638
#101F2D
#0C1722
#080F16
#04080B
#010304
Couleurs d'Accent
#eef2ff
#e0e7ff
#c7d2fe
#a5b4fc
#818cf8
#6366f1
#4f46e5
#4338ca
#3730a3
#312e81
#1e1b4b
Couleurs de Succès
#f0fdf4
#dcfce7
#bbf7d0
#86efac
#4ade80
#22c55e
#16a34a
#15803d
#166534
#14532d
#052e16
Couleurs d'Avertissement
#fffbeb
#fef3c7
#fde68a
#fcd34d
#fbbf24
#f59e0b
#d97706
#b45309
#92400e
#78350f
#451a03
Couleurs d'Erreur
#fef2f2
#fee2e2
#fecaca
#fca5a5
#f87171
#ef4444
#dc2626
#b91c1c
#991b1b
#7f1d1d
#450a0a
Couleurs d'Information
#ecfeff
#cffafe
#a5f3fc
#67e8f9
#22d3ee
#06b6d4
#0891b2
#0e7490
#155e75
#164e63
#083344
Couleurs Neutres
#fafafa
#f5f5f5
#e5e5e5
#d4d4d4
#a3a3a3
#737373
#525252
#404040
#262626
#171717
#0a0a0a
Exemples d'utilisation
Boutons
Alertes
Démonstration Interactive
Testez la palette de couleurs en temps réel
Contrôles
Aperçu
Couleur actuelle
#5A3E85
bg-primary-500
Toutes les nuances de primary
50
100
200
300
400
500
600
700
800
900
950
Exemples d'utilisation
Boutons
Alertes
Code généré
<div class="bg-primary-500">...</div>
.bg-primary-500 {
background-color: #5A3E85;
}
class="bg-primary-500 hover:bg-primary-600 focus:bg-primary-700"
Guide d'utilisation
Classes Tailwind disponibles
bg-primary-500
text-secondary-600
border-accent-400
bg-success-100
text-error-700
hover:bg-primary-600
focus:ring-primary-500
active:bg-primary-700
Fonctions Service disponibles
Informations sur les couleurs
ColorPaletteService::getAvailableColors()ColorPaletteService::getColorInfo($color)ColorPaletteService::getColorName($color)ColorPaletteService::getColorShades($color)
Génération de classes
ColorPaletteService::generateTailwindClass($color, $shade, $property)ColorPaletteService::isValidColor($color)ColorPaletteService::isValidShade($color, $shade)