CDRN

Générer une palette de couleurs harmonieuses

  • Tableau de bord
  • Documentation
  • API
Génère des palettes de couleurs harmonieuses en fonction du nombre de couleurs souhaité et de la règle de couleurs choisie, comme les couleurs complémentaires, analogues, triadiques, etc.

Comment utiliser l'outil de génération de palette de couleur ?

Spécifiez le nombre de couleurs souhaité et la règle de couleurs dans le formulaire. Vous pouvez utiliser les palettes générées dans vos projets en suivant l'exemple.

Le premier paramètre définit la couleur principale.

Le second paramètre définit le nombre de couleurs. Notez que selon la règle choisie, le choix de la quantité peut ne pas être pris en compte.

Le troisième paramètre définit la règle de couleurs à utiliser (complémentaires, analogues, triadiques, etc.).

Exemples de Palettes

Palette Monochromatiques

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffab99;"></div>
<div class="p-4" style="background-color: #ffffff;"></div>

Palette Analogue

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffbb32;"></div>
<div class="p-4" style="background-color: #dcff32;"></div>

Palette Triadique

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #32ff54;"></div>
<div class="p-4" style="background-color: #5432ff;"></div>

Questions fréquentes

Quelle règle de palette choisir pour une charte graphique ?

Une palette monochromatique donne un rendu calme et professionnel, idéale pour les sites corporate ou éditoriaux. Les analogues offrent une variation douce, naturelle, utile pour les ambiances vertes ou océan. La règle complémentaire ou triadique apporte un contraste fort, parfait pour les CTA et les sites e-commerce qui veulent capter l'attention.

Pourquoi le nombre de couleurs demandé n'est-il pas toujours respecté ?

Certaines règles imposent un nombre fixe de couleurs. Une palette complémentaire renvoie toujours 2 couleurs (la teinte et son opposé sur la roue chromatique), une palette triadique en renvoie 3, une tétradique en renvoie 4. Le paramètre de quantité est respecté uniquement pour les règles monochromatique et analogue.

Le calcul est-il fait sur HSL ou RGB ?

La génération s'appuie sur l'espace HSL, plus naturel pour manipuler la teinte (rotation sur la roue chromatique) et la luminosité. Les couleurs renvoyées sont ensuite converties au format HEX pour intégration directe en CSS. Si vous avez besoin du format RGB, utilisez le convertisseur de couleur sur chaque code généré.

Comment associer la palette générée à une image existante ?

Commencez par extraire la couleur dominante de votre image via l'extracteur de palette, prenez la teinte principale comme couleur de référence, puis injectez-la dans le générateur avec une règle analogue ou triadique. Vous obtiendrez ainsi des couleurs cohérentes avec votre visuel pour habiller le reste du site.

Les palettes générées sont-elles accessibles aux normes WCAG ?

Le générateur ne vérifie pas les ratios de contraste. Une couleur ne devient accessible qu'en relation avec une autre couleur de fond. Pour valider un duo texte/fond, exportez les codes HEX et utilisez un vérificateur de contraste qui calcule le ratio selon les exigences WCAG (4.5:1 pour le texte normal en AA, 7:1 en AAA).

Peut-on exporter la palette dans un format particulier ?

La palette est renvoyée en codes HEX, prêts à coller dans une feuille CSS, dans un fichier de variables SASS, dans un thème Tailwind ou dans un système de tokens design. Pour récupérer les équivalents RGB ou HSL, passez chaque code dans le convertisseur de couleur.

Exemple de requête

curl -X POST https://cdrn.fr/api/v1/tools/color-generator/execute \
  -H "Content-Type: application/json" \
  -d '{"color_base":"...","quantity":1,"rules":"complementary"}'

Schéma d'entrée

Champ Type Requis Défaut
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Points d'accès

  • GET https://cdrn.fr/api/v1/tools - liste tous les outils disponibles
  • GET https://cdrn.fr/api/v1/tools/color-generator - récupère le schéma de cet outil
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - exécute cet outil avec un payload JSON