colorize
ColorKit
CK

Générateur de Palettes de Couleurs

Appuyez sur la barre d'espace pour générer des palettes infinies. Verrouillez vos teintes favorites et créez des harmonies parfaites.

#4F7AD2

#A2E906

#22D621

#253C1E

#ACECB4

Que fait le Générateur de Palettes ?

Il génère instantanément des combinaisons harmonieuses de 5 teintes calculées selon les principes de la théorie des couleurs pour inspirer vos interfaces web et chartes graphiques.

Comment l'utiliser ?

  • Générer : Appuyez sur la touche Espace ou cliquez sur le bouton pour renouveler les teintes déverrouillées.
  • Verrouiller : Cliquez sur l'icône de cadenas pour figer une nuance pendant que vous faites défiler les autres.
  • Copier : Cliquez sur le code HEX d'une colonne pour le copier immédiatement dans votre presse-papier.
Base de Connaissances & FAQ

Foire Aux Questions

Réponses directes et solutions aux questions courantes, défis techniques et normes de l'industrie.

Quelle est la règle des 60-30-10 en design d'interface et web design ?expand_more
La règle des 60-30-10 est un principe d'équilibre chromatique :
  • 60% Couleur dominante : Généralement un fond neutre (blanc pur, ardoise ou fond sombre) qui constitue la structure visuelle.
  • 30% Couleur secondaire : Utilisée pour les cartes, barres latérales et en-têtes pour apporter du relief.
  • 10% Couleur d'accentuation : Une teinte vive à fort contraste réservée aux éléments clés : boutons d'appel à l'action (CTA), badges actifs et liens capitaux.
Comment s'assurer qu'une palette respecte les normes d'accessibilité ?expand_more
Pour respecter les normes d'accessibilité numérique (WCAG 2.1 AA) :
  • Assurez-vous que chaque texte possède un contraste minimal de 4.5:1 avec son arrière-plan.
  • N'appliquez jamais de texte blanc sur du jaune pur (#FFFF00) ou du vert citron (contraste trop faible d'environ 1.2:1).
  • Testez vos combinaisons sur notre Vérificateur de Contraste WCAG avant la mise en ligne.
Comment exporter ma palette vers Tailwind CSS ou des variables CSS ?expand_more
Déclarez les nuances sous forme de variables CSS personnalisées : 
:root {
  --color-primary: #4F46E5;
  --color-secondary: #06B6D4;
  --color-accent: #F43F5E;
  --color-neutral: #1E293B;
  --color-surface: #F8FAFC;
}
Ou dans le fichier tailwind.config.js sous theme.extend.colors.
Quelle est la différence psychologique entre palettes chaudes et froides ?expand_more
Les palettes chaudes (rouges, oranges, ocres) stimulent l'émotion, le dynamisme et l'action (e-commerce, restauration). Les palettes froides (bleus, cyans, verts profonds) inspirent la sécurité, la clarté et la pérennité (banques, logiciels SaaS, santé).
Combien de couleurs un design system doit-il comporter ?expand_more
Un design system complet intègre habituellement :
  • 1 couleur primaire de marque (échelle de 50 à 950).
  • 1 couleur secondaire de soutien.
  • 1 accent vif pour les conversions.
  • 1 gamme neutre (8 à 10 nuances de gris pour fonds et textes).
  • 4 couleurs sémantiques : Succès (vert), Avertissement (ambre), Erreur (rouge), Information (bleu).