TL
Tool Lab
💰Faire un don
💰Faire un don

Générateur de Teintes et Tons

Générez des teintes (plus claires) et des tons (plus sombres) depuis n'importe quelle couleur de base.

Couleur de base
Niveaux
Teintes (plus clair — melange avec blanc)
#EBF3FE10%
#C4DAFC30%
#9DC1FB50%
#76A8F970%
#4F8FF790%
Base
#3B82F6Base
Ombres (plus sombre — melange avec noir)
#3575DD90%
#295BAC70%
#1E417B50%
#12274A30%
#060D1910%
Echelle complete (plus clair au plus sombre)

À propos de cet outil

Le generateur de teintes et d'ombres cree des variantes plus claires et plus sombres a partir de n'importe quelle couleur de base. Les teintes sont creees en melangeant la couleur de base avec du blanc (ajout de luminosite), et les ombres en melangeant avec du noir (reduction de luminosite).

L'outil genere jusqu'a 5 niveaux de teintes et 5 niveaux d'ombres, plus la couleur de base originale, vous offrant une palette de 11 etapes centree sur la teinte choisie. Cliquez sur un echantillon pour copier son code hex.

Comment utiliser

  1. Choisissez une couleur de base avec le selecteur de couleur ou entrez un code hex.
  2. Utilisez les boutons d'echantillon pour essayer rapidement des couleurs predefinies.
  3. Ajustez le nombre de niveaux (3-5) pour controler la largeur de la palette.
  4. Cliquez sur un echantillon pour copier son code hex. Utilisez Tout copier pour la palette complete.

Cas d'utilisation

Les systemes de design ont besoin d'une echelle de couleurs systematique pour chaque couleur de marque. Les designers UI generent des etats de survol, actif et desactive a partir d'une seule couleur d'action. Les developpeurs frontend creent des variantes de couleur coherentes.

Questions fréquentes

  • Quelle est la difference entre teinte et ombre?Une teinte melange la couleur avec du blanc (plus clair); une ombre melange avec du noir (plus sombre). Un ton melange avec du gris et n'est pas genere ici.
  • Comment les niveaux sont-ils calcules?Chaque niveau melange la couleur de base avec du blanc ou du noir dans des proportions de 10%, 30%, 50%, 70% et 90%, donnant des etapes visuelles coherentes.
  • Puis-je obtenir des variables CSS de cela?La sortie est en codes hex. Vous pouvez les coller dans votre CSS comme --color-500, --color-400, etc.