Assombrir une couleur hex par pourcentage
Obtenez une nuance plus profonde d’une couleur hexadécimale sans tâtonner : #4A90D9 assombri de 20 % devient #2873C0, même teinte, même saturation, moins de luminosité. À 0 % la couleur reste identique ; à 100 % on obtient du noir. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Couleur
- #4A90D9
- Quantité
- 20
- Original
- #4A90D9
- Hex
- #2873C0
Les designers, les développeurs front-end et les auteurs de design systems ont sans cesse besoin de teintes plus sombres d'une couleur de marque pour les états de survol, les bordures, les ombres et le texte accessible sur fond clair. Deviner un nouveau hex à l'œil est lent et incohérent d'un outil à l'autre. Cette capacité accepte une couleur hex et un pourcentage d'assombrissement de zéro à cent, convertit la couleur en HSL, multiplie la luminosité par un moins ce pourcentage, et renvoie le hex plus sombre avec les décompositions RGB et HSL. Zéro pour cent conserve la couleur d'origine ; cent pour cent donne du noir.
Ce que signifie assombrir par pourcentage en HSL
Les couleurs du web sont souvent stockées en hex ou en RGB, mais les paliers de teinte perceptifs sont plus faciles en HSL : la teinte porte la nuance, la saturation la pureté, et la luminosité indique à quel point l'échantillon est proche du noir ou du blanc. Assombrir d'un pourcentage revient à réduire la luminosité tout en gardant la teinte et la saturation fixes, de sorte qu'un bleu de marque reste bleu — simplement plus profond. Cet outil multiplie la luminosité actuelle par un moins le montant sur cent.
À zéro pour cent, la luminosité est inchangée, donc la sortie correspond au hex d'entrée normalisé. À cinquante pour cent, la luminosité est divisée par deux. À cent pour cent, la luminosité devient nulle et le résultat est un noir pur quelle que soit la teinte de départ.
Ce modèle relatif correspond à la façon dont de nombreux jetons de design mettent à l'échelle les états interactifs : un seul jeton de base plus un facteur d'assombrissement pour le survol ou l'état pressé. La soustraction absolue de points de luminosité peut dépasser sur des couleurs déjà sombres ; la mise à l'échelle relative reste toujours dans la plage et n'invente jamais de luminosité négative.
Contrat d'entrée : couleurs hex et le montant 0–100
Passez color sous forme de chaîne hex courte ou longue : #RGB ou #RRGGBB, avec ou sans le dièse initial. Les formes courtes s'étendent canal par canal, si bien que #F0A devient #FF00AA avant conversion. Le champ amount est requis et doit être un nombre fini compris entre zéro et cent inclus.
Les valeurs telles que moins dix, cent un ou un texte non numérique sont rejetées ; une validation échouée n'est pas facturée. En cas de succès, la réponse inclut original comme hex à six chiffres en majuscules normalisé, hex comme résultat assombri, le montant numérique que vous avez envoyé, rgb avec des canaux entiers de zéro à deux cent cinquante-cinq, et hsl avec la teinte en degrés et la saturation et la luminosité sur une échelle de zéro à cent après l'étape d'assombrissement.
L'arrondi est déterministe, si bien que réexécuter la même paire ne dérive pas. Utilisez amount zéro pour normaliser et étendre un hex court sans changer la teinte, ou amount cent lorsque vous avez besoin d'un vrai noir d'ancrage dérivé du même chemin de code que les assombrissements partiels.
Pour un essai rapide ou une palette entière
Pour une vérification ponctuelle — confirmer qu'un bleu primaire s'assombrit proprement pour le survol d'un bouton, ou qu'un palier de vingt pour cent respecte encore les objectifs de contraste sur du blanc — utilisez l'outil gratuit dans le navigateur sur cette page. Il n'y a aucun appel réseau à l'intérieur de la transformation, aucun modèle et aucune dépendance à l'horloge, si bien que les résultats sont sûrs à la lisière et mis en cache.
Insérez le point de terminaison dans un pont de plugin Figma, un addon Storybook qui prévisualise les couleurs d'état, ou une étape serveur qui matérialise les surfaces en mode sombre à partir d'une palette de base claire. Lorsque vous convertissez déjà des formats avec un convertisseur de couleur distinct, gardez-le pour les allers-retours HEX–RGB–HSL ; utilisez cet assombrisseur quand l'intention de recherche est précisément une teinte plus sombre par pourcentage.
Associez les deux dans un pipeline si vous avez besoin d'un export CMJN après assombrissement, mais l'étape d'assombrissement elle-même ne demande qu'un hex en entrée et une couleur structurée en sortie.
Cas d’usage
États de survol et pressé de l'interface
Dérivez des teintes de bouton et de lien plus sombres à partir d'un seul hex de marque afin que les styles de survol et actif restent cohérents entre composants sans choisir chaque échantillon à la main.
Accents de marque pour e-mail et PDF
Précalculez des hex d'accent plus sombres pour les bordures et les en-têtes dans des modèles qui n'acceptent que des couleurs statiques et ne peuvent pas calculer le HSL au rendu.
Questions fréquentes
Quelles entrées l'assombrisseur de couleur accepte-t-il ?
Une couleur hex (#RGB ou #RRGGBB, # facultatif) et un pourcentage de montant de 0 à 100.
Comment la couleur plus sombre est-elle calculée ?
Le hex est converti en HSL, la luminosité est multipliée par (1 − montant/100), puis reconverti en hex, RGB et HSL. La teinte et la saturation restent identiques ; un montant de 100 donne du noir.
Que contient une réponse réussie ?
original (hex d'entrée normalisé), hex (résultat assombri), amount, rgb {r,g,b}, et hsl {h,s,l} après assombrissement.
Est-ce la même chose qu'un convertisseur de format de couleur ?
Non. Un convertisseur change la représentation (HEX, RGB, HSL) sans modifier la teinte. Cet outil assombrit spécifiquement en baissant la luminosité d'un pourcentage.
Que donne un assombrissement de 20 % sur #4A90D9 ?
Sa luminosité baisse d’un cinquième tandis que teinte et saturation restent fixes : le résultat est #2873C0, soit RVB 40, 115, 192. Le bleu reste le même bleu, simplement plus profond.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/color/darken \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#4A90D9","amount":20}'const res = await fetch("https://api.kit.forhosting.com/color/darken", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#4A90D9",
"amount": 20
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/darken",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#4A90D9",
"amount": 20
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/darken", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#4A90D9","amount":20}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#4A90D9","amount":20}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/darken", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"color": "#4A90D9",
"amount": 20
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.darken",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Les montants hors de la plage zéro à cent sont rejetés avec une erreur invalid_input claire. Utilisez l'outil gratuit du navigateur pour des échantillons rapides, ou l'API à $0.002 par requête réussie lorsque vous générez des palettes dans un pipeline.
Ce que signifie assombrir par pourcentage en HSL
Comme la conversion est mathématique pure avec un arrondi fixe, le même hex et le même montant produisent toujours le même hex plus sombre dans le navigateur et à la lisière de l'API, ce qui rend les tests de référence et les exécutions multi-régions fiables pour la CI et les jetons de design.
Contrat d'entrée : couleurs hex et le montant 0–100
Les caractères invalides, les longueurs incorrectes, les chaînes vides et les valeurs non-chaînes échouent avec invalid_input et un message qui nomme le champ. Des alias sont acceptés par commodité : hex, from ou text pour la couleur, et percent, pct ou percentage pour le montant.
Où l'exécuter : outil gratuit du navigateur ou API automatisée
La même fonction pure alimente l'API lorsque vous construisez des générateurs de thèmes, exportez des jetons de design vers des propriétés personnalisées CSS, ou précalculez des échelles de teintes pour des modèles d'e-mail qui ne peuvent pas exécuter de scripts côté client. Chaque appel API réussi coûte $0.002 ; les montants invalides hors de la plage zéro à cent et les hex malformés ne consomment pas de solde prépayé.
Cas d'intégration
Échelles de teintes de jetons de design
Générez des variantes sombres progressives pour des variables CSS ou du thème JSON en appliquant des pourcentages d'assombrissement fixes aux couleurs de la palette de base en CI.
Questions techniques
Combien coûte l'API ?
$0.002 par requête réussie. L'outil du navigateur est gratuit. Une entrée invalide n'est pas facturée.