Assombrisseur de couleur
Assombrissez n'importe quelle couleur HEX d'un pourcentage précis. Obtenez des nuances plus foncées pour les ombres et la profondeur.
Saisissez un HEX, rgb(59, 130, 246) ou hsl(217, 91%, 60%).
Mélange le pourcentage sélectionné avec du noir. 0 % conserve la couleur d'origine ; 100 % donne du noir.
Assombrie
#3B82F6#2F68C5#2F68C5rgb(47, 104, 197)hsl(217, 61%, 48%)Sortie CSS
--color-darkened: #2F68C5;color-mix(in srgb, #3B82F6 80%, black)Échelle de nuances plus sombres
Aperçu du contraste
Texte de l'aperçu
5.37:1
Conforme au niveau WCAG AA pour le texte normal. Assombrissement minimal pour AA : 12 %
Noter Assombrisseur de couleur
Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.
Assombrissez une couleur sans tâtonner
Une couleur plus sombre est utile lorsqu'une interface a besoin d'un changement visuel net sans abandonner sa palette d'origine. Utilisez cet assombrisseur de couleurs pour transformer une valeur HEX, RGB ou HSL en états d'interface pratiques, puis copiez la valeur exacte ou le CSS dont vous avez besoin.
Créez des états d'interface utiles à partir d'une couleur de base
Au lieu de choisir à l'œil une nouvelle nuance pour chaque composant, partez de la même couleur de marque ou d'interface et créez des variantes plus sombres maîtrisées. Les boutons, liens, badges, bordures et graphiques restent ainsi visuellement liés, et les états d'interaction sont plus faciles à repérer.
- Créez une couleur de survol subtilement plus sombre, de 10 % à 20 %, pour les boutons et les liens.
- Choisissez un état actif ou enfoncé plus marqué sans changer de famille de couleurs.
- Générez des bordures, des ombres, des séries de graphiques et des accents de mode sombre plus foncés à partir de la même couleur source.
Choisissez la méthode d'assombrissement adaptée à votre objectif de design
Mélanger avec du noir est l'option par défaut et la plus prévisible pour un ajustement en pourcentage : 20 % signifie que le résultat contient 20 % de noir. Réduire la luminosité HSL est utile lorsque la préservation de la teinte et de la saturation d'origine compte plus qu'un mélange littéral avec du noir. Comparez les deux résultats avant de choisir un jeton de design.
- Utilisez Mélanger avec du noir pour un assombrissement direct et cohérent, et pour du CSS color-mix() copiable.
- Utilisez Réduire la luminosité HSL lorsque vous voulez une échelle guidée par la teinte pour une palette ou une visualisation de données.
- Utilisez l'échelle de nuances plus sombres pour comparer plusieurs valeurs candidates côte à côte.
Vérifiez la lisibilité avant de publier
Une couleur plus sombre ne rend pas automatiquement le texte lisible. Ajoutez l'arrière-plan prévu dans l'aperçu du contraste pour voir le ratio actuel et le statut WCAG AA pour le texte normal. Si une valeur plus sombre atteint le niveau AA, l'outil affiche le plus petit pourcentage d'assombrissement disponible qui y parvient ; utilisez-le comme point de départ, puis examinez le composant final en contexte.
- Copiez le HEX, le RGB ou le HSL pour vos outils de design et les styles de vos composants.
- Copiez une propriété personnalisée CSS pour créer un jeton de design réutilisable.
- Tous les calculs restent dans votre navigateur ; aucune valeur de couleur n'est importée.
Comment fonctionne Assombrisseur de couleur
Comment fonctionne le calcul d'assombrissement des couleurs
Saisissez une couleur HEX, RGB ou HSL et sélectionnez une valeur de 0 % à 100 %. L'outil normalise la saisie, calcule immédiatement la couleur plus sombre et affiche le résultat en HEX, RGB et HSL afin que vous puissiez utiliser le format dont votre flux de travail a besoin.
Deux façons d'assombrir une couleur
- Mélanger avec du noir : le pourcentage de noir sélectionné est mélangé à la couleur de base. À 0 %, le résultat est inchangé ; à 100 %, il est noir. Cette méthode fournit aussi une expression
color-mix()copiable. - Réduire la luminosité HSL : le nombre de points de pourcentage sélectionné est retiré de la luminosité HSL, tandis que la teinte et la saturation restent intactes. Cela peut être utile pour créer une échelle de couleurs visuellement cohérente.
Comparer, valider et copier
L'échelle de nuances plus sombres vous permet de comparer des ajustements courants sans déplacer le curseur à répétition. Ajoutez un arrière-plan à l'aperçu du contraste pour vérifier le résultat par rapport au niveau WCAG AA pour le texte normal, puis copiez une valeur HEX, RGB, HSL, une variable CSS ou une valeur color-mix() prête à l'emploi. Chaque étape s'exécute localement dans votre navigateur.
Comment utiliser Assombrisseur de couleur
Saisissez une couleur de base
Collez une valeur HEX, RGB ou HSL, ou utilisez le sélecteur de couleur natif.
Choisissez l'intensité et la méthode
Définissez un pourcentage, puis mélangez avec du noir ou réduisez la luminosité HSL.
Copiez une valeur exploitable
Utilisez le résultat, l'échelle de nuances, l'aperçu du contraste ou l'extrait CSS.
Exemple d'utilisation
Un mélange de 20 % de noir crée un bleu ciel plus sombre, prêt pour le CSS.
Questions fréquentes
Comment assombrir une couleur HEX en ligne ?
Comment assombrir une couleur en CSS ?
Que signifie assombrir selon un pourcentage ?
Quelle est la différence entre mélanger avec du noir et réduire la luminosité HSL ?
Puis-je assombrir des couleurs RGB ou HSL ?
Quels formats de couleur puis-je convertir et copier ?
Comment créer une couleur de survol plus sombre ?
Puis-je générer une palette ou une échelle de nuances plus sombres ?
Cet outil peut-il m'aider à trouver une couleur avec un contraste WCAG AA ?
Mes couleurs sont-elles importées ou stockées ?
Outils associés
Éclaircisseur de couleur
Éclaircissez n'importe quelle couleur HEX d'un pourcentage donné. Obtenez des nuances plus claires pour le design d'interface.
Générateur de palette de couleurs IA
Générez des palettes de couleurs à partir d'une ambiance, d'une marque ou d'un thème grâce à l'IA. Passez du mode aléatoire instantané au mode IA, puis copiez les codes HEX.
Décalage de teinte
Décalez la teinte d'une couleur ou d'une image sur le cercle chromatique. Copiez les valeurs HEX, RVB ou TSL, ou téléchargez le résultat.
Mélangeur de couleurs
Mélangez deux couleurs de façon réglable. Créez des transitions fluides et des nuances intermédiaires.
Convertisseur Pantone en HEX
Convertissez les couleurs du Pantone Matching System (PMS) en codes HEX.
Carte de couleurs TSV
Choisissez des couleurs sur une carte de couleurs TSV interactive et convertissez-les instantanément en valeurs HEX, RGB, HSL et HSV.
Commentaires
Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.
Assombrisseur de couleur est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.
