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 de palette de couleurs 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.
Source : CSS Color 4, § 7, W3C – CSS Color Module Level 4: HSL colors. Mise à jour : .
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.
Créer une palette de couleurs en 3 étapes
- Saisissez une couleur de base en HEX, RGB ou HSL, ou choisissez-la avec le sélecteur.
- Choisissez une harmonie : complémentaire, analogue, triadique ou monochrome.
- Copiez les couleurs avec leurs valeurs HEX, RGB et HSL.
Exemple : en faisant tourner le bleu hsl(217, 91 %, 60 %) de 180° sur le cercle chromatique, on obtient la complémentaire hsl(37, 91 %, 60 %), un orange chaud proche de #F6AF3C.
| 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.
Autres outils couleur : le convertisseur de couleurs, le vérificateur de contraste et la pipette couleur pour prendre une teinte dans une image.
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.
Quelles couleurs vont bien ensemble ?
Les couleurs placées à distance fixe sur le cercle chromatique s’harmonisent : complémentaires (180°) pour un fort contraste, analogues (teintes voisines) pour une palette calme, triadiques (120°) pour un ensemble coloré équilibré.
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 : · Principes éditoriaux
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 des couleurs 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.
- Calcul de l’IMC selon l’OMSCalcul IMC : indice de masse corporelle à partir de la taille et du poids, classe OMS sur une échelle colorée, poids normal pour votre taille et BMI Prime.
- Calcul des calories par jourCalcul calories : indiquez âge, sexe, taille, poids, activité et objectif hebdomadaire pour connaître l’apport journalier pour maigrir ou grossir.
- Générateur de couleur aléatoireGénérez une couleur aléatoire ou une palette : totalement aléatoire, pastel, vive, sombre, camaïeu ou harmonie. Avec HEX, RGB, HSL et couleur de texte lisible.
- Convertisseur de calendrier mayaCalendrier maya en ligne : convertissez une date en compte long, en jour tzolk’in et en date haab’, ou un compte long en date grégorienne (corrélation GMT).
- Calcul du temps de triathlonCalcul temps triathlon : saisissez allure natation, vitesse vélo, allure course et transitions pour obtenir le temps final et les temps intermédiaires.
- Courbe de croissance bébé : calculez le percentile de votre enfantCourbe de croissance bébé selon l’OMS : saisissez sexe, âge, poids, taille et périmètre crânien et obtenez percentile, z-score et zone normale de 0 à 5 ans.