Générateur de palette de couleurs
Saisissez la couleur de base en HEX, RGB ou HSL ou choisissez-la avec le sélecteur, puis sélectionnez l’harmonie. Le générateur fait tourner la teinte sur le cercle chromatique HSL et affiche chaque couleur sous forme d’échantillon avec ses valeurs HEX, RGB et HSL à copier.
Comment le calcul est fait
Comment sont calculées les harmonies
Le générateur convertit la couleur de base dans le modèle HSL (teinte H en degrés, saturation S et luminosité L en pourcentage, selon le CSS Color Module Level 4). Pour chaque harmonie, seule la teinte tourne ; la saturation et la luminosité restent identiques. Chaque couleur est ensuite reconvertie en sRGB et arrondie à des valeurs entières de 0 à 255.
| Harmonie | Rotation de la teinte | Couleurs |
|---|---|---|
| Complémentaire | 0°, 180° | 2 |
| Analogue | −30°, 0°, +30° | 3 |
| Triadique | 0°, 120°, 240° | 3 |
| Complémentaire adjacent | 0°, 150°, 210° | 3 |
| Tétradique (rectangle) | 0°, 60°, 180°, 240° | 4 |
| Carré | 0°, 90°, 180°, 270° | 4 |
| Monochrome | pas de rotation ; luminosité en 5 niveaux | 5 |
Exemple : le rouge pur #FF0000 a H = 0°, S = 100 %, L = 50 %. Une rotation de 180° donne H = 180°, soit le cyan #00FFFF, sa couleur complémentaire. En triadique s’ajoutent 120° (vert #00FF00) et 240° (bleu #0000FF).
Palette monochrome
En mode « Monochrome », la teinte ne change pas. La luminosité varie en deux pas égaux vers le noir et en deux pas vers le blanc. Avec la couleur par défaut #3B82F6 (L ≈ 60 %), les niveaux se situent à environ 20 %, 40 %, 60 %, 73 % et 87 %.
Texte lisible sur les échantillons
Le libellé de chaque échantillon est noir ou blanc, selon ce qui donne le meilleur contraste d’après la formule de luminance relative des WCAG. Le texte atteint ainsi toujours au moins 4,58 : 1. Pour savoir si deux couleurs de votre palette conviennent comme couleur de texte et couleur de fond, utilisez le vérificateur de contraste.
Limites
HSL est un modèle géométrique simple, pas un modèle perceptuellement uniforme : à L égal, le jaune paraît nettement plus clair que le bleu. Les harmonies calculées sont donc un point de départ, à affiner à l’œil. Les gris n’ont pas de teinte ; pour eux, les rotations donnent la même couleur.
Questions fréquentes
Quelle est la couleur complémentaire du bleu ?
Sur le cercle chromatique HSL, elle se trouve à 180° à l’opposé. Pour le bleu #0000FF (H = 240°), c’est le jaune #FFFF00 (H = 60°) ; pour #3B82F6 (H ≈ 217°), un orange proche de #F6AF3B.
Quels formats de saisie le générateur accepte-t-il ?
HEX à 3, 4, 6 ou 8 chiffres (avec ou sans #), rgb() et rgba(), hsl() et hsla(), hsv()/hsb(), hwb() ainsi que trois nombres comme « 59, 130, 246 » (lus en RGB). Les syntaxes avec virgules et avec espaces selon CSS Color 4 fonctionnent toutes les deux.
Comment reprendre les couleurs dans du CSS ou un logiciel graphique ?
Chaque échantillon dispose d’un bouton pour copier la valeur HEX. « Copier en variables CSS » place dans le presse-papiers un bloc :root avec --farbe-1, --farbe-2… Les valeurs RGB et HSL figurent dans le tableau en dessous.
Pourquoi certaines harmonies paraissent-elles déséquilibrées ?
HSL mesure la luminosité de façon purement mathématique. À valeur L égale, le jaune et le cyan paraissent bien plus clairs que le bleu ou le violet. Ajustez au besoin la luminosité de certaines couleurs ou choisissez une couleur de base moins saturée.
Sources et références juridiques
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Dernière mise à jour :
Outils similaires
- Convertisseur de couleurs : HEX, RGB, HSL, HSV, CMJNConvertissez vos couleurs : HEX en RGB, RGB en HEX, HSL, HSV, HWB et CMJN. Saisie dans tout format ou via le sélecteur, résultat à copier, dans le navigateur.
- Vérificateur de contraste selon les WCAG 2.2Vérifiez le contraste entre couleur de texte et couleur de fond : ratio WCAG 2.2, niveaux AA/AAA pour texte normal, grand texte et composants d’interface.
- Pipette : trouver la couleur d’une imageLisez le code couleur d’une image : chargez une photo, cliquez sur un point, copiez HEX, RGB et HSL, plus les couleurs dominantes. Sans envoi, tout reste local.
- Calculer l’âge de son chat en âge humainQuel âge a mon chat en années humaines ? Conversion selon le tableau AAFP-AAHA, chatons en mois compris, avec le stade de vie des lignes directrices 2021.
- Calculer l’âge de son chien en âge humainQuel âge a votre chien en années humaines ? Formule 16·ln(âge)+31 (Wang et al. 2020) et tableau de l’AVMA selon la taille, avec l’âge senior du chien.
- Calculer son besoin en eau par jourCombien d’eau boire par jour ? Apport en boissons et en eau totale selon l’âge, le sexe, la grossesse et l’allaitement, selon l’EFSA et la DGE.