Mélanger deux couleurs par proportion
Avec une proportion de 50, #FF0000 et #0000FF pèsent chacun 0.5 et donnent #800080. Vous fixez exactement la part de la seconde couleur, si bien que chaque palier d'un dégradé ou de vos jetons peut être refait plus tard. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Couleur 1
- #FF0000
- Couleur 2
- #0000FF
- Rapport
- 50
- Hex
- #800080
Cet outil combine deux couleurs hexadécimales selon un poids précis dans l’espace RGB. Vous indiquez la première couleur, la seconde et la contribution de cette dernière en pourcentage. Le calculateur traite séparément le rouge, le vert et le bleu, arrondit chaque résultat à une valeur de canal valide, puis renvoie un code hexadécimal normalisé en majuscules et trois nombres RGB. Il convient aux jetons graphiques, thèmes, diagrammes et ressources automatisées qui exigent un résultat reproductible plutôt qu’une couleur choisie à l’œil. Toute couleur ou proportion incorrecte est clairement refusée, et des entrées identiques donnent toujours la même sortie.
Définissez la proportion avant de mélanger
Considérez la proportion comme le pourcentage apporté par la seconde couleur. Zéro attribue tout le poids à la première et cent à la seconde. L’ordre est donc essentiel lors de la création d’une gamme.
Saisissez une notation hexadécimale courte de trois chiffres, comme #F00, ou complète de six chiffres, comme #FF0000. Le croisillon initial reste facultatif, mais les autres caractères doivent être hexadécimaux. L’outil refuse volontairement les noms CSS, les fonctions RGB, les couleurs alpha à huit chiffres, les champs absents et les valeurs mal formées.
Il ne tente aucune supposition. Dans un traitement par lots, une faute produit ainsi une erreur d’entrée explicite plutôt qu’une teinte plausible mais fausse. Documentez l’ordre des couleurs dans vos scripts afin que chaque responsable sache à quelle extrémité s’applique le pourcentage déclaré.
Comprenez la moyenne RGB pondérée
L’algorithme convertit chaque code en canaux rouge, vert et bleu compris entre zéro et 255. Pour chaque canal, il multiplie la première valeur par un moins la fraction, la seconde par la fraction, additionne les produits et arrondit à l’entier le plus proche. Une proportion de cinquante pour cent accorde le même poids aux deux entrées; dix pour cent reste proche de la première.
Les canaux sont calculés séparément, sans hasard, table, réseau ni règle cachée. Il s’agit d’une moyenne linéaire des canaux RGB encodés, et non d’un mélange perceptuel ou d’une conversion HSL, LAB, LCH, pigmentaire ou corrigée en gamma. Le milieu peut donc sembler plus lumineux d’un côté, ce qui est normal.
Ce modèle convient aux générateurs de jetons et routines graphiques qui attendent une arithmétique simple et vérifiable. Le champ de méthode précise le calcul pour faciliter les audits.
Exploitez la sortie dans vos automatisations
La réponse fournit une valeur hexadécimale à six chiffres en majuscules et un objet RGB composé de canaux entiers. Elle rappelle aussi la proportion, expose les deux poids normalisés et nomme la méthode. Utilisez le code hexadécimal dans des variables CSS, thèmes, graphiques, modèles de courrier électronique ou fichiers de jetons; préférez les canaux séparés lorsqu’un autre programme attend des nombres ou doit mesurer contraste et luminance.
Vérifiez ensuite l’accessibilité si du texte doit apparaître sur la teinte obtenue, car une proportion correcte ne garantit pas un contraste suffisant. Pour une gamme régulière, conservez la même paire ordonnée et appliquez une suite planifiée de pourcentages.
Cas d’usage
Créer des paliers de jetons graphiques
Produisez des teintes intermédiaires reproductibles entre deux couleurs de marque approuvées.
Composer des variantes pour diagrammes
Rapprochez une couleur de série d’un fond ou d’un accent commun sans choisir chaque nuance à la main.
Tester les états d’une interface
Générez des couleurs stables pour les états survolé, sélectionné et désactivé dans une chaîne de thèmes.
Questions fréquentes
Quels formats de couleur sont acceptés ?
Les codes hexadécimaux à trois ou six chiffres sont acceptés, avec ou sans croisillon initial.
Comment les canaux fractionnaires sont-ils traités ?
Chaque canal RGB pondéré est arrondi à l’entier le plus proche de manière déterministe par JavaScript.
Le mélange est-il perceptuel ?
Non. C’est une moyenne directe de canaux RGB encodés, sans modèle HSL, LAB ni correction gamma.
Que représente la proportion ?
C'est la part de la seconde couleur, en pourcentage. À 0 vous obtenez la première couleur telle quelle, à 100 la seconde, et à 50 les deux pèsent 0.5 chacune.
L'ordre des deux couleurs compte-t-il ?
Oui. Le pourcentage appartient toujours à la seconde couleur : inverser les couleurs sans inverser la proportion change le résultat. Gardez la même paire ordonnée pour chaque palier d'un dégradé.
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/mix-ratio \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color1":"#FF0000","color2":"#0000FF","ratio":50}'const res = await fetch("https://api.kit.forhosting.com/color/mix-ratio", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/mix-ratio",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/mix-ratio", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color1":"#FF0000","color2":"#0000FF","ratio":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color1":"#FF0000","color2":"#0000FF","ratio":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/mix-ratio", 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
{
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.mix_ratio",
"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
Définissez la proportion avant de mélanger
À vingt-cinq, color1 contribue pour soixante-quinze pour cent et color2 pour vingt-cinq.
Exploitez la sortie dans vos automatisations
La version dans le navigateur répond aux besoins ponctuels; l’API coûte $0.002 lorsqu’une chaîne de compilation, un CMS ou une application automatise le traitement.
Questions techniques
Que représente la proportion ?
Elle correspond au poids de color2 en pourcentage; le reste revient à color1.
Quel est le prix d’une requête API ?
Le tarif de base est de $0.002 par élément; l’outil du navigateur reste utilisable directement sur la page.