Palette de couleurs

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

✓
Message de succès
⚠
Message d'avertissement
✕
Message d'erreur

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

✓
Message d'alerte avec la palette primary

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)