Palette de Couleurs

Système de couleurs complet basé sur l'identité visuelle CCB.

CCB Orange (Couleur Principale)

orange-900
#CC5500
orange-800
#E65C00
orange
#FF6900
orange-400
#FF8533
orange-300
#FFA366
orange-200
#FFC299
orange-100
#FFE0CC
orange-50
#FFF5EE

CCB Bleu (Couleur Secondaire)

blue-900
#004499
blue-800
#0055BB
blue
#0066CC
blue-400
#0088FF
blue-300
#33A3FF
blue-200
#66BBFF
blue-100
#99D4FF
blue-50
#E6F3FF

Couleurs Sémantiques

Success

var(--success)
#28A745

Utilisé pour les confirmations et actions réussies

Warning

var(--warning)
#FFC107

Utilisé pour les avertissements et alertes

Danger

var(--danger)
#DC3545

Utilisé pour les erreurs et suppressions

Info

var(--info)
#17A2B8

Utilisé pour les informations générales

Couleurs Neutres (Gris)

gray-900
#1A1A1A
gray-800
#2D2D2D
gray-700
#4A4A4A
gray-600
#6C757D
gray-500
#8C8C8C
gray-400
#ACACAC
gray-300
#D1D1D1
gray-200
#E9ECEF
gray-100
#F5F6FA
gray-50
#FAFBFC

Exemples d'Utilisation

En CSS

/* Utiliser les variables CSS */
.my-element {
    background-color: var(--ccb-orange);
    color: var(--white);
    border: 1px solid var(--ccb-orange-400);
}

/* Texte avec couleurs sémantiques */
.success-text {
    color: var(--success);
}

.error-text {
    color: var(--danger);
}

Avec les Classes Utilitaires

.bg-primary .text-white - Fond orange CCB, texte blanc
.bg-secondary .text-white - Fond bleu CCB, texte blanc
.bg-light - Fond gris clair
.bg-success .text-white - Fond vert (succès) 
<div class="bg-primary text-white p-4">
    Fond orange CCB
</div>

<p class="text-success">
    Texte vert (succès)
</p>

Bonnes Pratiques

À Faire

  • Utiliser les variables CSS (var(--ccb-orange))
  • Respecter la hiérarchie des couleurs
  • Vérifier le contraste (WCAG AA minimum)
  • Utiliser les couleurs sémantiques pour les états
  • Tester en mode sombre si activé

À Éviter

  • Valeurs de couleurs en dur (#FF6900)
  • Trop de couleurs différentes sur une page
  • Contraste insuffisant (texte illisible)
  • Couleurs sémantiques pour autre chose que leur usage
  • Modifier les couleurs CCB principales