Palette de couleurs

Palette de Couleurs Complète

Découvrez toutes les couleurs disponibles et apprenez à les utiliser

Générer un thème de couleurs

Couleur neutre

#6366F1

#7DD420

#F472B6

#34D399

#FBBF24

#FB7185

#60A5FA

#334155

Couleurs Primaires

#F7F7FE

#E8E8FD

#C8C9FA

#9A9CF6

#6366F1

#5457CD

#4547A9

#323379

#1E1F48

#0F0F24

#070711

Couleurs Secondaires

#F9FDF4

#ECF9DE

#D2F0B1

#ABE36E

#7DD420

#6AB41B

#589416

#3F6A10

#26400A

#132005

#090F02

Couleurs Accent

#FEF8FB

#FDEAF4

#FBCEE5

#F8A3D0

#F472B6

#CF619B

#AB507F

#7A395B

#492237

#25111B

#11080D

Succès

#F5FDFA

#E1F8F0

#B8F0DB

#7BE2BD

#34D399

#2CB382

#24946B

#1A6A4D

#103F2E

#082017

#040F0B

Avertissement

#FFFCF4

#FEF5DE

#FEE9B2

#FCD571

#FBBF24

#D5A21F

#B08619

#7E6012

#4B390B

#261D05

#120D03

Erreur

#FFF8F9

#FEEAED

#FECDD4

#FCA3B0

#FB7185

#D56071

#B04F5D

#7E3943

#4B2228

#261114

#120809

Information

#F7FBFF

#E7F2FE

#C7E0FD

#98C5FC

#60A5FA

#528CD5

#4373AF

#30537D

#1D324B

#0E1926

#070C11

Neutre

#F5F6F7

#E0E3E6

#B8BDC4

#7A8491

#334155

#2B3748

#242E3B

#1A212B

#0F141A

#080A0D

#040506

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

#5457CD

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: #5457CD;
}


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)

Prendre rendez-vous