Mélangeur de couleurs
Mélanger #FF0000 et #0000FF à 50 % donne #800080, un violet avec rouge 128, vert 0 et bleu 128. Créez des tons intermédiaires de marque et des couleurs d'état à partir de deux couleurs que vous avez déjà. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Première couleur hex
- #FF0000
- Deuxième couleur hex
- #0000FF
- Proportion
- 50
- T
- 0,5
- Code hex
- #800080
- Chaîne RVB
- rgb(128, 0, 128)
Un mélangeur de couleurs prend deux codes hex et un pourcentage de fusion, puis renvoie une seule couleur située entre eux dans l'espace des canaux RVB. Les designers l'utilisent lorsqu'ils ont besoin d'un ton intermédiaire entre un rouge de marque et un bleu profond, lorsqu'ils souhaitent un état de survol à trente pour cent vers une mise en évidence, ou lorsqu'ils génèrent des rampes échelonnées sans ouvrir une suite graphique de bureau. Les codes hex invalides échouent avec une erreur claire d'entrée invalide afin que les pipelines détectent les fautes de frappe avant de publier de mauvais échantillons.
Comment fonctionne le mélange RVB et comment choisir le ratio
Envoyez deux couleurs hex et un ratio de zéro à cent. En interne chaque couleur est développée en trois canaux dans la plage de zéro à deux cent cinquante-cinq. La forme courte à trois chiffres, comme dièse f zéro zéro, s'étend à six chiffres en doublant chaque nibble, de sorte que dièse f zéro zéro et dièse FF0000 sont le même rouge pur.
Les préfixes optionnels dièse ou zéro-x sont acceptés et retirés avant la validation. Le RVB linéaire n'est pas un point médian perceptuel en LAB ou HSL, donc deux couleurs de luminosité très différente peuvent paraître biaisées vers le parent plus clair ; c'est le comportement attendu de ce produit et il correspond à l'interpolation classique de canaux style CSS que de nombreux scripts de design utilisent déjà.
Cas d’usage
Tons intermédiaires de palette de marque
Fusionnez un hex de marque primaire avec un secondaire à 25 %, 50 % et 75 % pour générer des jetons intermédiaires échelonnés pour thèmes d'IU et kits marketing.
Couleurs de survol et d'état
Mélangez une couleur de base de bouton avec du blanc ou du noir à un petit ratio pour produire des états de survol plus clairs et actifs plus foncés sans choisir chaque nuancier à la main.
Questions fréquentes
Que se passe-t-il si j'envoie un code hex invalide ?
Les deux couleurs doivent être hexadécimales à 3 ou 6 chiffres (# optionnel). Longueur incorrecte ou chiffres non hex sont rejetés et non facturés.
Le mélangeur de couleurs est-il gratuit ?
L'outil du navigateur s'exécute gratuitement sur votre appareil.
Le mélange se fait-il en HSL ou LAB ?
Les espaces perceptuels relèvent d'une autre intention produit ; cet outil suit les fusions classiques de canaux hex.
Quelle couleur obtient-on en mélangeant rouge et bleu à 50 % ?
On obtient #800080, un violet. Chaque canal s'arrête à mi-chemin : le rouge descend de 255 à 128, le bleu monte de 0 à 128 et le vert reste à 0.
Que signifie le pourcentage de mélange ?
Il indique la part de la seconde couleur dans le mélange. À 0 vous gardez la première couleur intacte, à 100 vous obtenez la seconde, et à 50 le milieu de chaque canal.
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 \
-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", {
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",
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", 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", 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",
"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
Cette capacité effectue un mélange linéaire déterministe sur le rouge, le vert et le bleu indépendamment : au ratio zéro le résultat est color1 pur, à cent c'est color2 pur, et les valeurs intermédiaires interpolent chaque canal et arrondissent en pas entiers 0–255.
Comment fonctionne le mélange RVB et comment choisir le ratio
Le ratio s'interprète comme le pourcentage de color2 dans le mélange : canal égal à l'arrondi de color1 fois un moins t plus color2 fois t, où t est le ratio divisé par cent. Ainsi le ratio zéro laisse color1 intact, le ratio cent donne color2, et le ratio cinquante se place à mi-chemin en RVB linéaire pour chaque canal. Des entrées identiques produisent toujours un JSON identique car le chemin est de l'arithmétique pure, sans réseau, sans graine aléatoire et sans horloge murale.
Lire la réponse : hex, RVB et entrées renvoyées
Utilisez hex lorsque vous avez besoin d'un jeton unique pour des jetons de style ou des fichiers de thème ; utilisez rgb lorsqu'un canevas, une bibliothèque de graphiques ou un vérificateur d'accessibilité attend des canaux séparés. En cas de succès la réponse renvoie color1 et color2 normalisés en hex à six chiffres en majuscules avec dièse initial, le ratio numérique envoyé et t comme intervalle unitaire utilisé dans le lerp. Le résultat mélangé apparaît de trois façons : hex comme nuancier mixte principal, rgb comme objet avec champs entiers r g et b, et rgb_string comme ligne lisible rgb parenthèse ouverte r virgule g virgule b parenthèse fermée pour coller dans CSS ou notes de design. color1_rgb et color2_rgb exposent les canaux parents analysés afin que les IU dessinent les deux extrémités d'un dégradé sans réanalyser. L'étiquette method est toujours rgb_lerp pour que le code aval puisse brancher sans renifler les formes. L'absence de color1, de color2, de ratio, un ratio hors de zéro à cent, et tout code hex invalide échouent avec invalid_input et ne sont pas facturés après le rejet du moteur. Les messages d'erreur nomment le champ pour que les clients API affichent une validation de formulaire précise.
Usage de l'API, tarification, flux de design et limites pratiques
Appelez le mélangeur gratuit dans le navigateur pour des croquis de palette, des expériences de teinte de marque et des contrôles rapides de mélange intermédiaire sans installer d'outil de design. Seule l'entrée hex est prise en charge —les couleurs CSS nommées et les chaînes rgb entre parenthèses sont hors périmètre—, normalisez donc en amont si vos données source utilisent des noms. Envoyez un corps JSON avec les champs chaîne obligatoires color1 et color2 plus le nombre obligatoire ratio. Les alias hex1, hex2, a, b, from, to, percent, amount et mix sont acceptés lorsqu'ils sont documentés afin que d'anciens champs de formulaire se mappent proprement. Utilisez l'API prépayée lorsqu'un générateur de thèmes, un pipeline de design system, un constructeur de nuanciers e-commerce ou un service d'actifs marketing a besoin d'un contrat stable sous solde KIT à $0.002 par élément réussi ; les échecs de validation ne consomment jamais le solde. Associez ce endpoint à des outils hex vers HSL ou de couleurs complémentaires lorsque l'étape suivante est une palette complète, ou à des vérificateurs de contraste lorsque la couleur mélangée doit respecter WCAG face au texte. Les auteurs qui livrent des SDK peuvent mapper hex et rgb directement dans des sélecteurs de couleur et des tables de jetons que étudiants et designers attendent déjà.
Cas d'intégration
Pipelines de thèmes automatisés
Les scripts de design system appellent l'API prépayée pour fusionner deux couleurs semences en jetons JSON bit-identiques d'une exécution CI à l'autre.
Questions techniques
Comment mélanger deux couleurs hex avec ce mélangeur ?
Envoyez un JSON avec color1, color2 et ratio (0–100). Exemple : color1 "#FF0000", color2 "#0000FF", ratio 50 renvoie le mélange intermédiaire RVB en champs hex et rgb.
Que signifie le pourcentage de ratio ?
Ratio est le pourcentage de color2 dans le mélange. 0 garde color1 pur, 100 donne color2 pur, et 50 est un mélange linéaire égal de chaque canal RVB.