La teinte choisit la famille
Parcourez rouge, jaune, vert, cyan, bleu et magenta autour de la roue. À saturation nulle, la teinte devient presque invisible.
Outil couleur gratuit
Sélecteur de couleur HSB et convertisseur HEX RGB
Choisissez une couleur par teinte, saturation et luminosité, ou saisissez une valeur HEX ou RGB précise. Tous les formats restent synchronisés pour explorer puis copier le code utile.
Mis à jour le 18 juillet 2026
sélecteur de couleur HSB
Que fait ce sélecteur de couleur HSB ?
Ce sélecteur modifie la teinte de 0 à 360 degrés et la saturation et la luminosité de 0 à 100 pour cent. Il convertit la même couleur affichée en HEX à six chiffres et en RGB, synchronise toutes les entrées et fournit un résultat prêt à copier. Utilisez-le pour régler une palette cartoon, vérifier un jeton de design, comprendre quel canal change une nuance ou préparer des couleurs avant le calcul Delta E de Toon Tone.
HSB · HEX · RGB
Choisir et convertir une couleur
Déplacez un curseur, saisissez un canal, choisissez un préréglage ou écrivez un HEX. L’aperçu et tous les formats suivent la même couleur.
Aperçu couleur en direct#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
Variable CSS
--toon-color: #2FB8D8;Préréglages de couleurs cartoon
Exemples Toon Tone modifiables, pas des spécifications officielles de franchise.
Lire les trois canaux HSB
HSB sépare la décision en famille, intensité et niveau lumineux. Modifiez un canal à la fois pour comprendre une différence.
La saturation règle l’intensité
La baisser rapproche du gris ; la monter rend la teinte plus vive. Elle ne sert pas simplement à éclaircir ou assombrir.
La luminosité fixe le plafond
Zéro produit du noir. En montant, teinte et saturation apparaissent, mais la clarté perçue dépend aussi de la famille et de l’écran.
Choisir le contrôle adapté à la tâche
Les formats décrivent une couleur sous des angles différents. Partez de la décision à prendre, puis utilisez le canal ou la mesure pertinente.
| Tâche | Point de départ | Vérification suivante |
|---|---|---|
| Choisir une famille rouge, verte ou bleue | Teinte | Saturation puis luminosité |
| Rendre une nuance vive ou sourde | Saturation | Garder la teinte stable |
| Éclaircir ou assombrir | Luminosité | Tester le contraste en contexte |
| Copier un jeton web ou design | HEX ou RGB | Noter source et profil couleur |
| Mesurer l’écart entre deux couleurs | Calculateur Delta E | Voir les échantillons et écarts HSB |
Comment HSB organise une décision de couleur
HSB signifie teinte, saturation et luminosité. La teinte repère la position sur une roue circulaire, la saturation indique l’éloignement d’un gris neutre et la luminosité contrôle le niveau maximal des canaux affichés. Cette séparation suit une séquence d’édition naturelle : choisir la grande famille, décider de son intensité, puis régler le caractère clair ou sombre de la nuance finale. Les trois nombres décrivent ensemble une couleur numérique ; aucun ne constitue seul une note de qualité ou une preuve de conformité.
Le même modèle est souvent appelé HSV, où valeur remplace le mot luminosité. Dans les outils numériques courants, HSB et HSV désignent généralement le même calcul. HSL diffère : son axe de clarté place les teintes pures au milieu et mélange vers le blanc au-dessus, donc un pourcentage HSL ne doit pas être collé dans HSB comme s’il était identique. Cette page affiche chaque canal avec HEX et RGB afin de repérer plus facilement les différences de vocabulaire, d’échelle ou d’arrondi entre applications.
Un ordre fiable pour teinte, saturation et luminosité
Commencez par la teinte avec une saturation et une luminosité assez élevées pour voir clairement la famille. Rejoignez la zone rouge, orange, jaune, verte, cyan, bleue ou violette avant de poursuivre de petits écarts numériques. Baissez ensuite la saturation jusqu’au degré de douceur souhaité. De nombreuses couleurs cartoon mémorisées sont moins saturées que leur nom ne le suggère, surtout quand ombres, compression ou couleurs voisines modifient l’impression. Réglez enfin la luminosité afin de ne pas confondre une version sombre de la bonne teinte avec une autre famille.
Pour un travail précis, changez un canal à la fois et conservez l’ancienne valeur. Un grand mouvement simultané peut donner un beau résultat sans révéler quelle correction a résolu le problème. Les champs HEX et RGB synchronisés offrent une valeur de transmission stable après l’exploration visuelle. Si un jeton approuvé existe déjà, saisissez-le directement plutôt que de le recréer avec les curseurs. Le sélecteur relie exploration et valeur exacte ; il ne remplace pas une source connue par une nouvelle approximation.
Ce qui se passe pendant la conversion HEX, RGB et HSB
HEX et RGB codent les quantités de rouge, vert et bleu pour l’affichage numérique. Un HEX à six chiffres réserve deux chiffres hexadécimaux à chaque canal, tandis que RGB présente généralement les mêmes canaux en décimal de 0 à 255. Le sélecteur convertit ces quantités en HSB, édite les coordonnées puis reconvertit le résultat en RGB affichable. Un HEX abrégé à trois chiffres est développé avant le calcul. De petits écarts d’aller-retour peuvent apparaître lorsque des pourcentages continus sont arrondis aux nombres entiers montrés dans l’interface.
La conversion ne découvre ni nom officiel, ni spécification de marque, ni formule de peinture, ni échantillon physique. Elle ne calibre pas un écran, ne déduit pas le profil incorporé d’une image et ne garantit pas le même aspect sur un autre appareil. Conservez le jeton d’origine quand la reproduction exacte compte et notez s’il vient d’un système de design, d’un fichier source ou d’une capture. Une image compressée peut déjà contenir des pixels modifiés : le calcul peut être juste pour la valeur fournie sans que celle-ci soit la couleur de référence recherchée.
Utiliser le sélecteur pour palettes cartoon et illustration
Les dessins animés emploient souvent des familles franches, mais l’identité mémorable d’une nuance dépasse son étiquette. Un jaune peut tirer vers vert ou orange, un bleu être pâle ou très saturé, un rouge se déplacer vers corail, orange ou magenta. Utilisez HSB pour créer une petite famille apparentée sans perdre la teinte de départ. Copiez le HEX dans vos notes puis modifiez volontairement saturation ou luminosité afin de construire reflets, ombres, accents d’interface ou échantillons d’étude faciles à comparer.
Les préréglages de cette page sont des exemples génériques Toon Tone. Ils servent à apprendre les commandes, pas de codes officiels pour un studio, personnage, univers, imprimeur ou produit dérivé. Si un projet possède une palette approuvée, suivez cette source. Lorsque vous étudiez une image, gardez visible la zone échantillonnée et les conditions d’affichage. Un petit accent, une image ombrée et une grande zone plane peuvent donner des couleurs représentatives différentes, même si le langage courant leur attribue le même nom.
Écrans, contraste et différence perceptuelle
L’aperçu est généré par le navigateur ; son apparence dépend du calibrage, de la luminosité d’écran, de la gestion couleur, de l’angle, de la lumière ambiante et des tons voisins. La luminosité HSB ne mesure pas la clarté perçue et ne constitue pas un rapport de contraste accessible. Un jaune et un bleu avec une luminosité HSB de cent pour cent peuvent paraître très différents. Testez textes, icônes, indicateurs de focus et contrôles avec la méthode de contraste appropriée sur la véritable paire premier plan et arrière-plan.
Pour comparer deux couleurs enregistrées, utilisez le calculateur Delta E comme mesure séparée et lisez le nombre avec les échantillons visibles. Delta E modélise un écart perceptuel global ; les canaux HSB donnent des directions d’édition intuitives. Aucun résultat n’impose un seuil universel pour marque, accessibilité, impression ou fabrication. La décision finale doit suivre la spécification concernée, une procédure calibrée et les conditions de sortie réelles plutôt qu’une seule valeur pratique issue d’un outil généraliste dans le navigateur.
Continuer avec cette couleur
Questions sur le sélecteur de couleur HSB
HSB et HSV sont-ils identiques ?
Ils désignent généralement le même modèle numérique. HSB parle de luminosité et HSV de valeur pour le troisième canal. Vérifiez toujours les plages de l’application.
HSB est-il identique à HSL ?
Non. Les deux utilisent teinte et saturation, mais HSL calcule la clarté autrement. Les mêmes pourcentages peuvent produire des couleurs différentes près du blanc et du noir.
Puis-je convertir un HEX à trois chiffres ?
Oui. Une forme comme #0af devient #00AAFF avant conversion. Les six chiffres fonctionnent avec ou sans le croisillon initial.
L’outil envoie-t-il ou enregistre-t-il ma couleur ?
Aucun compte ni envoi serveur n’est nécessaire. Le sélecteur tourne dans le navigateur et copie seulement le texte affiché quand le presse-papiers est autorisé.
La luminosité HSB prouve-t-elle le contraste accessible ?
Non. Le contraste accessible compare la luminance relative du premier plan et de l’arrière-plan. La luminosité HSB seule n’est pas un calcul WCAG.
Pourquoi un autre sélecteur affiche-t-il des nombres différents ?
Il peut arrondir autrement, employer HSL, appliquer une gestion couleur ou afficher plus de décimales. Comparez le HEX ou RGB final et le modèle documenté.