Générateur de Palette & Harmonies

Générateur de Palette & Harmonies

Générez instantanément des harmonies de couleurs équilibrées. Créez des palettes complémentaires, analogues ou triadiques avec audit de contraste WCAG et export CSS.

Préréglages
Paramètres de la couleur d'ancrage
#0F172A
Modulateur de saturation0%
Décalage thermique0°
Moteur chromatique opérationnel
Écart de couleur (ΔE) 0%Nuances actives 5
Ancrage principal
#0F172A
RGB15, 23, 42
HSL222°, 47%, 11%
OKLCH0.208, 0.04, 266°
Luminance0.0088
Couleur d'accord 1
#C0B8DB
RGB192, 184, 219
HSL254°, 33%, 79%
OKLCH0.8, 0.05, 296°
Luminance0.506
Couleur d'accord 2
#D8B69F
RGB216, 182, 159
HSL24°, 42%, 74%
OKLCH0.8, 0.051, 56°
Luminance0.5056
Couleur d'accord 3
#BCC29E
RGB188, 194, 158
HSL70°, 23%, 69%
OKLCH0.8, 0.049, 115°
Luminance0.5174
Couleur d'accord 4
#A0C3DA
RGB160, 195, 218
HSL204°, 44%, 74%
OKLCH0.799, 0.05, 237°
Luminance0.5157
Contraste moyen WCAG4.43:1|Score d'accessibilité106
5 nuances
Règle géométriqueSPLIT-COMPLEMENTARY
Contraste moyen4.43:1
Modèle colorimétriqueOKLCH (266°)
Sécurité & Isolation0 octet transmis

Calcul 100% côté client

Calculs haute performance exécutés intégralement dans la mémoire de votre navigateur.

Zéro transmission serveur

Toutes les données restent strictement locales, sans aucun transfert vers un serveur externe.

Export prêt pour la production

Formats de sortie optimisés et prêts pour un déploiement immédiat en production.

ToolsAA•Utilitaires web 100% privés côté client
Référence technique et guide d'architecture

Générateur de Palettes & Harmonies — Guide de référence

Générez instantanément des harmonies de couleurs professionnelles : palettes complémentaires, analogues, triadiques et split avec validation de contraste WCAG et export CSS.

Générateur de Palettes & Harmonies — Guide de référence — Architecture en mémoire côté client et flux de données
Générateur de Palettes & Harmonies — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

Angle de teinte de base (θ)Angle chromatique CIE [0° – 360°]

Position angulaire sur le cercle chromatique continu à 360 degrés CIE/Munsell déterminant la longueur d'onde spectrale dominante (0° Rouge, 60° Jaune, 120° Vert, 180° Cyan, 240° Bleu, 300° Magenta). Évaluée en complexité trigonométrique O(1) comme coordonnée d'origine pour les rotations harmoniques au sein du runtime V8 sandboxé du navigateur.

Par défaut : 240° (Bleu royal)
Décalage angulaire géométrique (Δθ)Intervalle de corde trigonométrique

Déplacement angulaire géométrique établissant les topologies harmoniques classiques : Complémentaire (180°), Triadique (120° / 240°), Analogue (±30° / ±60°), Split-complémentaire (150° / 210°) et Tétradique (60° / 180° / 240°). Calculé modulo 360° par rotation mathématique pure sans aucune dépendance externe.

Par défaut : 180° (Complémentaire)
Clarté perceptive (L*)CIE L* / OKLCH L [0,00 – 1,00]

Échelle de luminosité perceptuellement uniforme de 0,0 (noir à absorption absolue) à 1,0 (blanc diffus pur). Neutralise les pics de clarté perceptive jaune/bleu inhérents au modèle HSL brut, garantissant que des couleurs à valeur L identique partagent la même luminance perçue par l'œil humain à travers toutes les teintes.

Par défaut : 0,55
Chroma / Saturation (C*)OKLCH Chroma [0,00 – 0,37] / Pureté spectrale

Distance radiale entre l'axe achromatique gris neutre et le locus spectral. Un chroma élevé (>0,20 en OKLCH, >80 % en sRGB) engendre fatigue oculaire et chromostéréoscopie ; les surfaces d'interface accessibles requièrent un chroma restreint (<0,08), tandis que les contrôles interactifs ciblent 0,12–0,18.

Par défaut : 75 % (0,18 OKLCH)
Luminance relative WCAG (Y)Ratio photométrique linéarisé [0,00 – 1,00]

Luminosité photométrique linéarisée calculée selon la formule Y = 0,2126R_lin + 0,7152G_lin + 0,0722B_lin définie par le W3C WCAG 2.1 §1.4.3. Détermine le ratio de contraste (L1 + 0,05) / (L2 + 0,05), imposant un seuil ≥4,5:1 pour le texte standard (AA) et ≥7,0:1 pour une lisibilité accrue (AAA).

Par défaut : 0,21
Moteur de transformation d'espace colorimétriqueIEC 61966-2-1 sRGB ↔ OKLCH / Display-P3

Pipeline de transformation matricielle côté client exécutant des convolutions 3x3 : expansion gamma [0, 255] ➔ sRGB linéaire ➔ CIE XYZ (illuminant D65) ➔ espace de cônes LMS ➔ coordonnées polaires OKLCH. Traitement déterministe en complexité temporelle O(1) dans l'isolat d'exécution du navigateur sans aucune télémétrie serveur.

Par défaut : OKLCH (W3C Color 4)

Conseils de pro et bonnes pratiques

Déjouer la distorsion perceptive de Helmholtz-Kohlrausch

Le calcul HSL standard assigne une clarté identique (L=50 %) au jaune saturé à 100 % et au bleu saturé à 100 %, alors que la réponse photopique de l'œil humain perçoit le jaune comme infiniment plus lumineux. Basculez systématiquement vers l'espace colorimétrique perceptif OKLCH pour équilibrer le contraste textuel sur aplats colorés : des valeurs L identiques en OKLCH garantissent une clarté perçue uniforme sur l'intégralité des 360 degrés du cercle chromatique.

Éviter la vibration chromatique grâce aux séparateurs neutres

La juxtaposition directe de couleurs complémentaires à forte saturation (ex. rouge pur #FF0000 et cyan pur #00FFFF) provoque une inhibition latérale rétinienne, un conflit d'accommodation et une fatigue visuelle aiguë. Intercalez une transition neutre (une nuance de Chroma < 0,02 ou une surface sombre avec L < 0,20, assurant un différentiel de luminance ΔY ≥ 0,30) entre deux teintes complémentaires saturées.

Appliquer la règle de répartition 60-30-10 en UI Design

Ne distribuez jamais les couleurs d'une harmonie en proportions égales. Allouez 60 % de la surface visuelle à la teinte neutre ou d'arrière-plan dominante, 30 % à la couleur structurelle secondaire de la marque, et réservez strictement les 10 % restants à la couleur d'accent ou d'action complémentaire (boutons d'appel à l'action, badges, états actifs).

Valider les collisions de dyschromatopsie et daltonisme

Environ 8 % des hommes et 0,5 % des femmes présentent une deutéranopie ou une protanopie. Les palettes complémentaires rouge-vert s'effondrent en nuances brun-jaune indiscernables sous vision dichromatique. Maintenez toujours un écart de luminance minimal de 3,0:1 entre les états d'alerte critiques, sans vous fier uniquement à la teinte, et doublez l'information par des indices typographiques ou des icônes conformément au critère WCAG 2.1 SC 1.4.1.

Exploiter l'entropie matérielle de la Web Crypto API pour l'exploration

La méthode standard Math.random() repose sur des générateurs pseudo-aléatoires (PRNG) sujets à la reconstruction d'état et à des regroupements statistiques modulo autour de certains quadrants de teinte. Pour une génération exploratoire rigoureusement uniforme, captez l'entropie matérielle via la Web Crypto API avec window.crypto.getRandomValues(new Uint32Array(1)) / 4294967296 * 360, garantissant une équiprobabilité totale sur l'ensemble du spectre CIE à 360°.

Pièges courants et dépannage

⚠️La palette complémentaire générée échoue au test de contraste WCAG AA sur fond blanc ou sombre

Deux teintes complémentaires partagent une tension chromatique, et non une compatibilité de luminance. Ajustez le curseur de clarté perceptive (L*) de la teinte d'accentuation au premier plan à ≤0,35 pour un affichage sur fond blanc, ou à ≥0,75 sur fond anthracite sombre afin d'atteindre le ratio réglementaire minimal de 4,5:1.

⚠️Les dégradés intermédiaires et les teintes analogues paraissent ternes, grisâtres ou boueux

L'interpolation linéaire en sRGB traverse le cœur désaturé du cylindre colorimétrique. Basculez l'espace de calcul du générateur de sRGB/HSL vers OKLCH : cette transformation courbe l'interpolation à travers une saturation perceptive constante et supprime les zones mortes grises.

⚠️Altération ou écrêtage des couleurs lors de l'export CSS vers Display-P3 ou de l'impression CMJN

Les valeurs RGB synthétiques à haute saturation (comme les cyans et verts néon) dépassent le triangle sRGB ou le gamut d'impression CMJN. Activez le limiteur d'écrêtage de gamut (Gamut Clipping Armor) pour ramener les valeurs dans les limites sRGB [0, 255] standard ou prévisualiser les jetons CSS Display-P3 correspondants avec color(display-p3 r g b).

⚠️Les palettes triadiques et tétradiques semblent chaotiques et surchargées dans les cartes d'interface

Une saturation identique sur 3 ou 4 teintes distinctes crée des points focaux concurrents et surcharge la charge cognitive. Conservez une seule teinte dominante à haute saturation (>70 %) et désaturez délibérément les harmonies secondaires et tertiaires à un chroma de 20-35 % pour leur conférer un rôle d'accompagnement subtil.

Foire aux questions (FAQ)

Comment calcule-t-on mathématiquement les harmonies complémentaires, triadiques et analogues ?▼

Les harmonies chromatiques sont déterminées en convertissant les valeurs sRGB en coordonnées polaires (Teinte θ de 0° à 360°, Saturation, Clarté). L'harmonie complémentaire ajoute 180° (θ + 180° mod 360°). L'harmonie triadique applique des rotations incrémentales de 120° (θ + 120°, θ + 240°). L'harmonie analogue calcule les teintes adjacentes à ±30° et ±60° (θ ± 30° mod 360°). L'harmonie split-complémentaire associe la teinte de base θ à deux angles adjacents à sa complémentaire directe : θ + 150° et θ + 210°. L'ensemble des transformations s'exécute en complexité temporelle O(1).

Quel est le ratio de contraste WCAG minimal exigé pour l'accessibilité des boutons et textes ?▼

Selon la norme WCAG 2.1 Niveau AA, le texte courant et les libellés de boutons inférieurs à 18 pt normal (ou 14 pt gras) exigent un ratio de contraste minimal de 4,5:1 par rapport à leur arrière-plan. Le texte de grande taille (≥18 pt normal ou ≥14 pt gras) ainsi que les composants graphiques essentiels d'interface (bordures de boutons, contours de champs de saisie, indicateurs d'onglets actifs) requièrent un contraste minimal de 3,0:1. Le niveau AAA porte ces exigences à 7,0:1 pour le texte standard et 4,5:1 pour le texte agrandi.

Quelle est la différence entre le mélange de couleurs HSL et l'harmonie perceptive OKLCH ?▼

Le modèle HSL (Teinte, Saturation, Luminosité) est une transformation cylindrique élémentaire du sRGB brut qui ignore la sensibilité spectrale de la rétine humaine : le jaune (luminosité de 50 %) y apparaît artificiellement beaucoup plus clair que le bleu (luminosité de 50 %). Le modèle OKLCH, dérivé des modèles CIECAM02 et CAM16 par Björn Ottosson, découple uniformément la clarté perçue (L), le chroma (C) et la teinte (h), assurant que deux couleurs présentant une valeur L identique possèdent rigoureusement la même clarté perçue sur l'ensemble des 360 degrés du cercle chromatique.

Pourquoi les couleurs complémentaires vibrent-elles ou deviennent-elles boueuses lorsqu'elles sont juxtaposées ?▼

La vibration visuelle (chromostéréoscopie) se produit lorsque des couleurs complémentaires hautement saturées et de luminance équivalente stimulent de manière conflictuelle les cônes rétiniens adjacents sans contraste de luminance suffisant, provoquant une instabilité optique à la frontière des aplats. L'aspect terne ou boueux apparaît lors du mélange alpha en RGB linéaire, car l'interpolation passe par le centre désaturé et assombri du cube RGB. Pour y remédier, il convient d'introduire un écart de luminance suffisant (ΔL ≥ 0,3) ou une ligne de démarcation neutre.

La génération de palettes dans cet outil transmet-elle des codes hexadécimaux confidentiels à un serveur tiers ?▼

Non. L'ensemble des conversions d'espaces colorimétriques (sRGB, CIE XYZ, OKLCH, Display-P3), des calculs de contraste WCAG et des simulations de daltonisme s'exécute à 100 % côté client dans la machine virtuelle JavaScript V8 sandboxée de votre navigateur. Aucun code HEX, valeur de couleur ou ressource graphique n'est transmis sur le réseau, assurant une absence totale de télémétrie serveur, un fonctionnement autonome hors ligne et une conformité rigoureuse avec les exigences de sécurité et de confidentialité d'entreprise (RGPD).

Outils et utilitaires connexes

Tous les outils →
Générateur Glassmorphism & Verre DépoliDesign

Générez du code CSS moderne de glassmorphism et verre dépoli avec réglages en direct du flou backdrop-filter, opacité, bordure et ombres. Copiez instantanément du code HTML et CSS propre.

Ouvrir l'outil→
Compresseur d'Image & Réducteur PhotoDesign

Compressez vos images en ligne sans perte de qualité. Réduisez la taille des fichiers JPG, PNG et WebP dans le navigateur sans téléversement, avec solveur de Ko cible et export ZIP groupé.

Ouvrir l'outil→
Générateur Interactif de Dégradés CSS Linéaires et RadiauxDesign

Tous les calculs et conversions sont exécutés exclusivement dans la mémoire de votre navigateur sans aucun transfert.

Ouvrir l'outil→
Générateur d'Ombres CSS Multicouches (Box Shadow)Design

Concevez des ombres portées CSS multicouches réalistes avec élévation optique, biseau intérieur, diffusion de flou et export Tailwind, CSS et React.

Ouvrir l'outil→
Générateur de CSS Clip-Path Polygones & Masques VectorielsDesign

Créez des masques de découpe géométriques réactifs et des balises SVG avec manipulation visuelle des sommets et CSS instantané.

Ouvrir l'outil→
Générateur Visuel de Disposition CSS GridDesign

Outil interactif de conception CSS Grid 2D. Créez des grilles réactives avec unités fr, fonctions minmax(), espacements gap et exportez en CSS, Tailwind ou React JSX.

Ouvrir l'outil→