Color mixer
Mixing #FF0000 and #0000FF at 50 % gives #800080, a purple with red 128, green 0 and blue 128. Make brand mid-tones and hover shades from two colors you already have. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- First hex colour
- #FF0000
- Second hex colour
- #0000FF
- Ratio
- 50
- T
- 0.5
- Hex
- #800080
- Rgb string
- rgb(128, 0, 128)
A color mixer takes two hex codes and a blend percentage, then returns a single colour that sits between them in RGB channel space. Designers use this when they need a mid-tone between a brand red and a deep blue, when they want a hover state that is thirty percent toward a highlight, or when they generate stepped ramps without opening a desktop graphics suite. This capability performs a deterministic linear mix on red, green, and blue independently: at ratio zero the result is pure color1, at one hundred it is pure color2, and values in between interpolate each channel and round to whole 0–255 steps. Invalid hex codes fail with a clear invalid input error so pipelines can catch typos before shipping bad swatches.
How RGB mixing works and how to choose the ratio
Send two hex colours and a ratio from zero to one hundred. Internally each colour is expanded to three channels in the zero-to-two-hundred-fifty-five range. Three-digit shorthand such as hash f zero zero expands to six digits by doubling each nibble, so hash f zero zero and hash FF0000 are the same pure red.
Optional leading hash or zero-x prefixes are accepted and stripped before validation. The ratio is interpreted as the percentage of color2 in the blend: channel equals round of color1 times one minus t plus color2 times t, where t is ratio divided by one hundred. That means ratio zero keeps color1 untouched, ratio one hundred yields color2, and ratio fifty sits halfway in linear RGB for every channel.
Linear RGB is not the same as a perceptual midpoint in LAB or HSL, so two colours of very different lightness may look biased toward the brighter parent; that is expected for this product and matches the classic CSS-style channel lerp many design scripts already use.
What you can do with it
Brand palette mid-tones
Blend a primary brand hex with a secondary at 25%, 50%, and 75% to generate stepped intermediate tokens for UI themes and marketing kits.
Hover and state colours
Mix a base button colour with white or black at a small ratio to produce lighter hover and darker active states without hand-picking each swatch.
FAQ
How do I mix two hex colours with this color mixer?
Example: color1 "#FF0000", color2 "#0000FF", ratio 50 returns the RGB mid-blend as hex and rgb fields.
What does the ratio percentage mean?
Ratio is the percentage of color2 in the blend. 0 keeps color1 pure, 100 yields color2 pure, and 50 is an even linear mix of each RGB channel.
What happens if I send an invalid hex code?
Both colours must be 3- or 6-digit hexadecimal (optional #). Bad length or non-hex digits are rejected and not charged.
Is the color mixer free?
The browser tool runs free on your device.
Is the mix done in HSL or LAB?
Perceptual spaces are a different product intent; this tool matches classic hex channel blends.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your 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)Example request
{
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.mix",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
How RGB mixing works and how to choose the ratio
Identical inputs always produce identical JSON because the path is pure arithmetic with no network, no random seed, and no wall clock.
Reading the response: hex, RGB, and echoed inputs
Use hex when you need a single token for style tokens or theme files; use rgb when a canvas, chart library, or accessibility checker expects separate channels. On success the response echoes normalized color1 and color2 as six-digit uppercase hex with a leading hash, the numeric ratio you sent, and t as the unit interval used in the lerp. The blended result appears three ways: hex as the primary mixed swatch, rgb as an object with integer r g and b fields, and rgb_string as a human-readable rgb open parenthesis r comma g comma b close parenthesis line for paste into CSS or design notes. color1_rgb and color2_rgb expose the parsed parent channels so UIs can draw both ends of a gradient without re-parsing. The method label is always rgb_lerp so downstream code can branch without sniffing shapes. Missing color1, missing color2, missing ratio, ratio outside zero to one hundred, and any invalid hex code all fail with invalid_input and are not charged after the engine rejects the request. Error messages name the field so API clients can surface precise form validation.
API usage, pricing, design workflows, and practical limits
Call the free in-browser color mixer for palette sketches, brand-tint experiments, and quick mid-blend checks without installing a design tool. Only hex input is supported—named CSS colours and rgb parenthesis strings are out of scope—so normalize upstream if your source data uses names. Authors shipping SDKs can map hex and rgb directly into colour pickers and token tables students and designers already expect. Send a JSON body with required string fields color1 and color2 plus required number ratio. Aliases hex1, hex2, a, b, from, to, percent, amount, and mix are accepted when documented so older form fields map cleanly. Use the prepaid API when a theme generator, design-system pipeline, ecommerce swatch builder, or marketing asset service needs a stable contract under KIT balance at $0.002 per successful item; validation failures never consume balance. Pair this endpoint with hex-to-HSL or complementary-colour tools when the next step is a full palette, or with contrast checkers when the mixed colour must meet WCAG against text.
Integration use cases
Automated theme pipelines
Design-system scripts call the prepaid API to merge two seed colours into JSON tokens that stay bit-identical across CI runs.