Pin light blend
#C0C0C0 on top of #808080 gives #818181: the light top channels only lift the base slightly, from 128 to 129. Pin light keeps base values unless the top layer is darker or lighter enough to override them. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Base
- #808080
- Top
- #C0C0C0
- Hex
- #818181
- Rgb string
- rgb(129, 129, 129)
- Mode r
- lighten
- Mode g
- lighten
Pin light is a classic compositing blend mode that replaces each channel of a base colour with a darker or lighter value depending on the top (blend) colour. When a top channel sits below mid-grey, the mode darkens: the result is the minimum of the base channel and twice the top channel. When a top channel sits at or above mid-grey, the mode lightens: the result is the maximum of the base channel and twice the top channel minus two hundred fifty-five. Designers, texture artists, and pipeline engineers reach for pin light when they need a crisp selective contrast effect without a full image editor—overlaying a highlight mask, tightening shadows under a mid-tone panel, or matching Photoshop pin-light previews in automated theme tools. This capability accepts two validated hex colours, applies the same deterministic per-channel rule on red, green, and blue, and returns the blended swatch as hex and RGB.
How pin light chooses darken or lighten on each channel
Pin light treats the top colour as a decision surface, not as a simple mix ratio. For every channel in the zero-to-two-hundred-fifty-five range, compare the top channel against mid-grey (one hundred twenty-eight). If the top channel is strictly less than one hundred twenty-eight, the darken branch runs: twice the top channel becomes an upper bound, and the result is the smaller of that bound and the base channel.
Visually this pulls bright base pixels down wherever the top layer is a deep shadow. If the top channel is greater than or equal to one hundred twenty-eight, the lighten branch runs: twice the top channel minus two hundred fifty-five becomes a lower bound, and the result is the larger of that bound and the base channel. That lifts dark base pixels wherever the top layer is a bright highlight.
Mid-grey top channels sit on the boundary and tend to leave base values largely intact because the darken and lighten envelopes meet near the base. Order matters: swapping base and top is a different operation, unlike a fifty-percent RGB lerp.
What to enter and what you get back
Each value must be a three- or six-digit hexadecimal colour with optional hash or zero-x prefix. Named CSS colours and rgb parenthesis strings are out of scope—normalize those upstream. Validation failures are not charged.
Use hex when you need a single token for theme files; use rgb when canvas code or accessibility tooling expects separate channels; use the mode_* labels when teaching or debugging which branch fired on a mixed grey-and-tint top colour.
Workflows, pricing, and how pin light differs from other colour tools
Call the free in-browser pin light blend for quick mask checks, logo overlay experiments, and texture previews without installing a desktop suite. Pin light is the right search intent when users type pin light blend mode, pin light two colors, or Photoshop pin light hex—those queries are not served by a generic mixer. Keep requests to two hex strings, avoid shipping named colours without conversion, and document that base is the bottom layer so teammates never reverse the order by accident.
Authors mapping SDKs can surface hex and the three mode labels next to colour pickers students and production designers already expect.
What you can do with it
Selective highlight and shadow overlays
Composite a mid-tone panel colour under a top mask hex so dark top channels deepen shadows and light top channels punch highlights without a full image editor.
Game and UI material tuning
Material authors blend a base albedo token with a top lighting hint colour to generate pin-light accent swatches for HUD skins and prop palettes.
FAQ
How does pin light blend two colours?
For each RGB channel, if top is below 128 the result is min(base, 2×top) (darken); if top is 128 or higher the result is max(base, 2×top−255) (lighten). Send base and top as hex.
What is the difference between base and top?
Base is the bottom layer colour. Top is the blend colour that chooses darken or lighten per channel. Order matters; swapping them is a different result.
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 pin light blender free?
The browser tool runs free on your device.
Is this the same as color.mix?
No. color.mix does a linear RGB lerp by ratio. Pin light never takes a ratio: the top channel alone chooses darken or lighten. Different algorithm and different search intent.
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/pin-light \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":"#808080","top":"#C0C0C0"}'const res = await fetch("https://api.kit.forhosting.com/color/pin-light", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": "#808080",
"top": "#C0C0C0"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/pin-light",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": "#808080",
"top": "#C0C0C0"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/pin-light", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":"#808080","top":"#C0C0C0"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":"#808080","top":"#C0C0C0"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/pin-light", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"base": "#808080",
"top": "#C0C0C0"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.pin_light",
"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 or missing inputs fail with invalid_input so scripts never ship a silent wrong colour. The free browser path and the prepaid API share one pure module, so goldens stay bit-identical at $0.002 per successful item.
How pin light chooses darken or lighten on each channel
The algorithm is pure arithmetic with no network, no random seed, and no wall clock, so identical inputs always produce identical JSON.
Input contract, response fields, and validation errors
POST a JSON body with two required string fields: base (the bottom layer) and top (the blend layer that selects darken or lighten). Aliases color1, bottom, hex1, from, and background map to base; color2, blend, hex2, to, and foreground map to top, so older form fields and design-tool vocabularies connect cleanly. On success the payload echoes normalized base and top hex, base_rgb and top_rgb channel objects, the blended hex, rgb as integer r g b, rgb_string for paste into CSS, mode_r mode_g and mode_b as the words darken or lighten for each channel, and method always equal to pin_light so clients can branch without sniffing shapes. Missing base, missing top, empty strings, non-hex digits, and wrong lengths all fail with invalid_input; messages name the field so form validation can highlight the exact control.
Workflows, pricing, and how pin light differs from other colour tools
Use the prepaid API when a design-system pipeline, game material generator, ecommerce swatch service, or marketing asset bot needs a stable contract under KIT balance at $0.002 per successful item. Pair this endpoint with color.mix when you need a ratio lerp instead of a selective darken-or-lighten, with color.mix_subtractive when you want paint-like RYB mud, and with color.lighten or color.darken when only one colour should shift by a percentage.
Integration use cases
Match Photoshop pin-light previews in CI
Theme and texture pipelines call the API so automated builds reproduce the same pin-light hex a designer saw in Photoshop, bit-identical every run.