Quelles harmonies sont générées ?

Complémentaire (+180°), analogue (±30°), triadique (±120°) et split-complémentaire (±150°), saturation et luminosité inchangées.

Puis-je exporter des variables CSS ?

Oui. Copiez le bloc `:root` ou touchez un nuancier pour copier le HEX.

Remplace-t-il un guide de marque ?

Non. C’est un point de départ d’exploration ; rôles, contraste et variantes clair/sombre restent à valider.

Les nuanciers gris restent-ils identiques ?

Oui si la saturation est ~0 — la rotation de teinte ne change pas la couleur.

Utill.net

Palette de couleurs

harmonies et thèmes

Générez des palettes de couleurs complémentaires, analogues, triadiques et harmonieuses à partir d'une couleur de base pour le design et le développement.

Cette conversion s’exécute uniquement dans votre navigateur — rien n’est téléversé.

Couleur

Hex

Base#3b82f6
Complémentaire#f6af3b

Couleurs opaques uniquement (HEX / RGB / HSL). Pas d’alpha — collez #rgb court ou #rrggbb.

Base

#3b82f6

Complémentaire

#f6af3b

Analogue

#3bdff6

#523bf6

Triadique

#f63b82

#82f63b

Complémentaire partagé

#f6523b

#dff63b

Variables CSS

:root {
  --color-base: #3b82f6;
  --color-complementary: #f6af3b;
  --color-analogous-1: #3bdff6;
  --color-analogous-2: #523bf6;
  --color-triadic-1: #f63b82;
  --color-triadic-2: #82f63b;
  --color-split-1: #f6523b;
  --color-split-2: #dff63b;
}

Qu'est-ce que cet outil ?

À partir d’un HEX graine (#rgb ou #rrggbb), l’outil génère des harmonies HSL : complémentaire, analogue, triadique et split-complémentaire. Copiez les nuanciers ou un bloc de variables CSS.

Ce n’est ni un guide de marque ni un vérificateur de contraste. Validez contraste et rôles sémantiques avant la prod.

Cas d'usage courants

Esquisser des accents depuis le HEX primaire produit
Exporter --color-* pour une feuille de style prototype
Comparer complémentaire et split-complémentaire avant revue

Comment utiliser

Choisissez la graine via le sélecteur ou saisissez un HEX.
Parcourez les groupes d’harmonie étiquetés.
Touchez un nuancier pour le HEX ou copiez le bloc CSS.
Validez contraste et marque en dehors de cet outil.

Exemples

Entrée / réglage	Sortie	Notes
`#3b82f6`	complémentaire `#f6af3b`; analogues `#3bdff6`, `#523bf6`	Graine bleue d’exemple
`#ff0000`	complémentaire `#00ffff`; triadiques `#00ff00`, `#0000ff`	Rouge pur → cyan
`#808080`	toutes `#808080`	Saturation 0 — pas d’effet de teinte

Pièges courants

Les harmonies ne remplacent pas un guide de marque.
Les pas HSL ne sont pas perceptuellement uniformes (contrairement à OKLCH).
Les graines neutres font coincider tous les groupes sur le même HEX.

Références

Dernière révision: 2026-07-27

Questions fréquentes

Quelles harmonies sont générées ?: Complémentaire (+180°), analogue (±30°), triadique (±120°) et split-complémentaire (±150°), saturation et luminosité inchangées.
Puis-je exporter des variables CSS ?: Oui. Copiez le bloc `:root` ou touchez un nuancier pour copier le HEX.
Remplace-t-il un guide de marque ?: Non. C’est un point de départ d’exploration ; rôles, contraste et variantes clair/sombre restent à valider.
Les nuanciers gris restent-ils identiques ?: Oui si la saturation est ~0 — la rotation de teinte ne change pas la couleur.