Darken blend two colors
Combine two colors the way the darken blend mode does, keeping the darker value channel by channel: #FF8800 with #00AAFF gives a deep green, #008800. No channel ever ends up lighter than either parent. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Color1
- #FF8800
- Color2
- #00AAFF
- Hex
- #008800
- Rgb string
- rgb(0, 136, 0)
The darken blend mode combines two colours by keeping, for every red, green, and blue channel, the darker of the two values. Designers reach for it when they want a shadow swatch that never lightens either parent, when they stack brand marks over photos without opacity math, and when they need a deterministic Photoshop-style darken result inside scripts. This capability accepts two hex codes, validates both, expands three-digit shorthand, and returns the min-channel result as hex and RGB. Unlike percentage darkening of a single colour or a ratio mix that can brighten channels, darken never increases any channel above either input.
How darken blend works: per-channel minimum
Darken blend is one of the classic compositing modes used in image editors and CSS mix-blend-mode. For each channel independently the result equals the mathematical minimum of the corresponding channel from color1 and color2.
If color1 is hash FF8800 and color2 is hash 00AAFF, red becomes the minimum of two hundred fifty-five and zero which is zero, green becomes the minimum of one hundred thirty-six and one hundred seventy which is one hundred thirty-six, and blue becomes the minimum of zero and two hundred fifty-five which is zero, so the result is a deep green hash 008800. Three-digit shorthand such as hash f80 expands by doubling each nibble to hash FF8800 before comparison, and optional leading hash or zero-x prefixes are stripped.
Because each channel is chosen independently, the result can pick red from one parent and green from the other; that is correct for darken and is not the same as choosing the darker colour as a whole by luminance. Channels already at zero stay zero; if both parents share a bright channel that channel stays bright only if both are equally high.
Workflows, pricing, and how this differs from darken percent or mix
Call the free in-browser darken blend tool when sketching layered brand marks, photo overlays, or dual-swatch shadows without installing a graphics suite. Searchers looking for darken blend two colors want the min-channel behaviour of Photoshop darken and CSS mix-blend-mode darken, not a lerp mid-tone. 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.
Source inputs follow the same retention rules as other KIT parse items. Authors shipping SDKs can map hex and rgb directly into colour pickers and token tables students and designers already expect when documenting layered darken rules.
What you can do with it
Layered brand mark shadows
Combine a logo hex with a photo-derived accent using darken blend so no channel lightens, producing a stable shadow token for marketing kits.
Dual-swatch UI overlays
Stack two theme colours with min-channel darken for card overlays and badge backs that stay darker than both parents without opacity math.
FAQ
What is the darken blend formula?
No ratio is applied; the darker channel always wins independently.
How is this different from color darken by percentage?
Percentage darken lowers lightness of one colour. This tool takes two colours and keeps the minimum of each RGB pair—the classic darken blend mode.
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 darken blend tool free?
The browser tool runs free on your device.
Can the result mix channels from both colors?
Yes. Each channel is chosen on its own, so #FF8800 and #00AAFF give #008800: red 0 comes from the second color, while green 136 and blue 0 come from the first. It does not pick the darker color as a whole.
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/darken-only \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color1":"#FF8800","color2":"#00AAFF"}'const res = await fetch("https://api.kit.forhosting.com/color/darken-only", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color1": "#FF8800",
"color2": "#00AAFF"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/darken-only",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color1": "#FF8800",
"color2": "#00AAFF"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/darken-only", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color1":"#FF8800","color2":"#00AAFF"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color1":"#FF8800","color2":"#00AAFF"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/darken-only", 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": "#FF8800",
"color2": "#00AAFF"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.darken_only",
"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
Invalid hex fails with invalid_input and is not charged.
How darken blend works: per-channel minimum
Identical inputs always produce identical JSON: the path is pure arithmetic with no network, no random seed, and no wall clock.
Input contract, response shape, and validation errors
Missing color1, missing color2, and any invalid hex all fail before billing. Use hex when you need a single style token; use rgb when a canvas, chart, or accessibility checker expects separate channels. Send a JSON body with two required string fields: color1 and color2. Each value must be three or six hexadecimal digits with optional leading hash; empty strings, wrong lengths, and non-hex characters fail with invalid_input naming the field so clients can highlight the exact control. On success the response echoes normalized color1 and color2 as six-digit uppercase hex with a leading hash, exposes color1_rgb and color2_rgb for UI previews of both parents, and returns the darken result three ways: hex as the primary token for theme files, rgb as an object with integer r g and b in zero through two hundred fifty-five, and rgb_string as a paste-ready CSS rgb open parenthesis line. The method label is always darken_min so downstream code can branch without sniffing shapes. Pair this endpoint with contrast checkers when the darkened result must meet WCAG against text on a light background.
Workflows, pricing, and how this differs from darken percent or mix
Use the prepaid API when a design-system pipeline, ecommerce theme generator, or marketing asset service needs a stable darken contract under KIT balance at $0.002 per successful item; validation failures never consume balance. This product is not single-colour percentage darkening, which lowers HSL lightness of one hex by an amount, and it is not a linear RGB ratio mix, which can raise a channel toward a brighter parent.
Integration use cases
Deterministic design-system pipelines
CI scripts call the prepaid API to darken-blend seed pairs into JSON tokens that stay bit-identical across every run.
Technical questions
How do I darken-blend two hex colours?
Send JSON with color1 and color2 as hex strings (3 or 6 digits, optional #). The API returns the per-channel minimum as hex and rgb fields with method darken_min.