Points clés
- Catégorie
- Design et couleur
- Types d’entrée
- color, select, range, number, checkbox
- Type de sortie
- html
- Couverture des échantillons
- 3
- API disponible
- Yes
Vue d’ensemble
Cet outil en ligne vous permet d'ajuster précisément la saturation de vos couleurs, offrant un contrôle total sur l'intensité chromatique pour vos projets de design, de web ou d'illustration.
Quand l’utiliser
- •Pour harmoniser une palette de couleurs en ajustant leur intensité globale.
- •Pour créer des variations subtiles ou des dégradés de saturation à partir d'une couleur de base.
- •Pour préparer des éléments graphiques en désaturant des couleurs trop vives afin d'améliorer la lisibilité.
Comment ça marche
- •Sélectionnez votre couleur de base via le sélecteur intégré.
- •Choisissez le type d'ajustement souhaité (saturer, désaturer, ou générer un dégradé).
- •Ajustez la quantité d'intensité via le curseur de pourcentage.
- •Validez pour obtenir instantanément vos nouvelles nuances de couleurs.
Cas d’usage
Exemples
1. Création d'une palette de boutons UI
Designer UI- Contexte
- Un designer doit créer une gamme de boutons d'action déclinés en plusieurs intensités pour un système de design.
- Problème
- Besoin de générer rapidement des variantes d'une couleur de marque sans altérer la teinte.
- Comment l’utiliser
- Sélectionner la couleur de marque, choisir 'Dégradé' et définir 5 étapes pour obtenir une progression fluide.
- Configuration d’exemple
-
baseColor: #4A90E2, adjustmentType: gradient, steps: 5 - Résultat
- Une série de 5 nuances allant du bleu pastel au bleu profond, prêtes à être intégrées dans le CSS.
2. Désaturation pour un design sobre
Graphiste- Contexte
- Un graphiste travaille sur une mise en page où les couleurs vives actuelles distraient trop l'utilisateur du contenu textuel.
- Problème
- Les couleurs sont trop agressives et doivent être atténuées pour un rendu plus professionnel.
- Comment l’utiliser
- Utiliser le mode 'Désaturer' avec une valeur de 30 % pour adoucir l'ensemble des couleurs de la charte.
- Configuration d’exemple
-
baseColor: #E24A4A, adjustmentType: desaturate, adjustmentValue: 30 - Résultat
- Une version plus douce et élégante de la couleur, conservant son identité tout en étant moins saturée.
Tester avec des échantillons
designHubs associés
FAQ
Quelle est la différence entre saturer et désaturer ?
Saturer augmente l'intensité et la vivacité de la couleur, tandis que désaturer la rapproche du gris, la rendant plus neutre et douce.
Puis-je générer plusieurs nuances à la fois ?
Oui, en sélectionnant l'option 'Dégradé', vous pouvez définir le nombre d'étapes pour créer une séquence de couleurs allant de la saturation totale à la désaturation.
La teinte de ma couleur sera-t-elle modifiée ?
Non, si l'option 'Préserver caractéristiques de teinte' est activée, seul le niveau de saturation change, garantissant que la couleur reste fidèle à sa teinte d'origine.
Quelles valeurs puis-je utiliser pour l'ajustement ?
Vous pouvez ajuster la saturation de -100 % (gris complet) à +100 % (saturation maximale) par paliers de 5 %.
L'outil prend-il en compte les couleurs complémentaires ?
Oui, vous pouvez activer l'option 'Inclure couleurs complémentaires' pour générer automatiquement des variations basées sur la couleur opposée sur le cercle chromatique.