COMPRENDRE · COMPARER · CRÉER
Roue chromatique en ligne : accords et palettes HEX
Partez d’un code HEX, choisissez un accord et récupérez les couleurs de la palette. Le fond et le texte peuvent ensuite être testés ensemble.
HSL
sRGB
sRGB
Tournez la roue pour déplacer la couleur de départ. Au clavier, utilisez les flèches pour un degré et Maj + flèche pour dix degrés.
Télécharger le schéma de cet accord (SVG)De 1 à 8 codes HEX, séparés par des espaces ou des virgules. Les doublons sont regroupés. La roue modifie uniquement la première couleur ; les autres restent en place.
217.2° — modèle numérique HSL / sRGB
Couleurs de l’accord sélectionné
Complémentaire
Analogue +30°
Analogue −30°
Triade +120°
Triade −120°
Plus clair
Plus foncé
Vérifier tous les couples de couleurs et exporter les contrastes
Le calcul porte sur les codes opaques sRGB de cette palette, sans les neutres ajoutés aux réglages de composition. Il vérifie uniquement le contraste du texte, pas l’accessibilité complète d’une page.
Composer avec cet accord
ÉTUDE DE COULEURS
Votre projet en couleurs
Un fond, un texte et un accent clairement définis.
Découvrir le projetMaquette illustrative : le cartouche d’accent ne déclenche aucune action.
Le lien partagé conserve l’accord, le fond, l’accent, les textes, la mise en page et le titre saisi. Le choix automatique prend le noir ou le blanc le plus contrasté. Vous pouvez choisir un texte coloré ; le verdict signale alors les couples insuffisants pour le texte courant.
Voir le CSS de cette composition
Accords géométriques en HSL ; ni recettes de peinture, ni garantie de contraste.
Sommaire complet de la page
Deux exemples reproductibles#
| Base | Complémentaire HSL | Observation |
|---|---|---|
| #FF0000 | #00FFFF | Rouge et cyan |
| #0000FF | #FFFF00 | Bleu et jaune, pas orange |
Ces exemples concernent le numérique. Pour la peinture pédagogique, consultez le comparatif des complémentaires.
Transformer les résultats en une palette utile#
- Choisissez une couleur dominante et gardez les autres en accents.
- Copiez les valeurs ou exportez le SVG pour les comparer dans votre projet.
- Testez chaque couple texte/fond : une complémentaire peut manquer de contraste.
- Pour un mur ou une impression, validez un échantillon réel.
Questions fréquentes#
La palette libre est-elle une harmonie calculée ?
Non. Le mode libre conserve les codes que vous saisissez ; les autres modes calculent un accord HSL. Aucun mode ne modélise un mélange de pigments.
Pourquoi les gris donnent-ils les mêmes accords ?
À saturation nulle, changer l’angle de teinte ne change pas la couleur. Il faut choisir un accent coloré séparément.
Les données sont-elles envoyées à un serveur ?
Les calculs et l’export sont effectués dans votre navigateur. À l’ouverture d’un lien partagé, les paramètres de son URL sont cependant transmis au serveur. Le lien partageable contient les couleurs, le type d’accord, la mise en page et le titre de votre composition. Ces paramètres sont visibles par les personnes qui reçoivent ce lien.
Sources et méthode
- W3C — CSS Color : codes sRGB, noms CSS et HSL
Les valeurs numériques et mots-clés CSS ; pas une normalisation des noms français. - National Gallery of Art — The Elements of Art: Color
Repères pédagogiques en arts plastiques : primaires, secondaires et complémentaires. - W3C — WCAG 2.2 : contraste minimal
Seuils de contraste des textes, tailles et exceptions.
Les palettes et exemples de ce site sont des propositions éditoriales. Les conversions et contrastes sont calculés à partir des codes indiqués. Voir la méthode et signaler une correction.
Comment sont calculés les résultats ?#
Les angles sont ramenés entre 0° et 360°. Les sorties sont arrondies à des canaux sRGB entiers. Le blanc reste blanc lorsqu’on l’éclaircit ; le noir reste noir lorsqu’on l’assombrit. Les gris n’ont pas de teinte visuelle : une rotation ne les colore pas. Définition du modèle HSL.
Le tracé représente les angles de construction avant la conversion en codes à 8 bits. Par exemple, le corail #FF7F50 tourné de +30° donne un canal vert de 214,5 sur 255. La roue arrondit une seule fois à 215, ce qui donne #FFD750. Essayer les trois analogues du corail · Conversion HSL vers sRGB du W3C.