Overlay blend two colors

Every red, green, and blue channel is evaluated separately: darker base channels use multiply, while lighter base channels use screen. Enter three-digit or six-digit hex colors and receive a normalized hex result, numeric RGB channels, and a ready-to-use CSS RGB string. The calculation is deterministic, requires no image upload, and validates both inputs before producing an answer.

How overlay blending chooses its formula

Overlay is a contrast-producing blend mode rather than an average of two colors. The calculator first converts each hexadecimal component into a value from zero to one. It then examines the base component, independently for red, green, and blue. When that base value is at or below one half, the component follows multiply-style math: two times the base times the blend. When the base is above one half, it follows screen-style math: one minus two times the remaining distance of both components from one. This branch is selected separately for every channel, so a single result can use multiply for red and screen for blue. The normalized result is converted back to the zero-to-255 RGB range and rounded to the nearest integer. That explicit sequence makes the output reproducible and matches the usual non-alpha overlay definition used by graphics tools. The base and blend positions matter; exchanging the two inputs can change which branch is selected and therefore can produce a different color.

Enter colors and interpret the result

Provide a base color and a blend color in hexadecimal notation. Both the familiar six-digit form, such as #336699, and the compact three-digit form, such as #369, are accepted. The leading hash is optional, but alpha channels, color names, CSS functions, and extra whitespace inside the digits are rejected. Compact values are expanded before calculation, and accepted inputs are returned as uppercase six-digit hex strings so logs and tests have a consistent representation. The response includes the blended hex color, an RGB object with integer red, green, and blue fields, and an rgb(...) string that can be pasted into CSS. It also echoes the normalized inputs and identifies the mode as overlay. Validation happens before any channel calculation. If either field is absent, is not a string, contains a non-hexadecimal character, or has the wrong length, the request returns an invalid-input error instead of silently guessing. This strict behavior is useful in build systems where a plausible but unintended color would be harder to detect than a clear failure.

Use deterministic overlay results in design workflows

Use this calculator when a design specification names overlay blending but you need a concrete flat color rather than a layered document. It is helpful for generating theme tokens, checking a graphics-editor result, producing fixture values for rendering tests, or calculating a fallback color for a system that cannot preserve blend modes. Because the operation works on color channels only, it does not inspect pixels, opacity, color profiles, gradients, or surrounding artwork. If a layer includes transparency, composite that alpha separately or use an image-processing workflow that understands the full layer stack. Also remember that this calculation uses encoded RGB channel values directly; it does not linearize sRGB light or perform a perceptual color-space mix. Those properties are intentional because they make the result correspond to the conventional overlay formula that designers expect. Browser use is free, while automated API requests cost $0.002 each. The same pure calculation drives both paths, with no network lookup, random state, or current-time dependency, so identical validated inputs always produce identical output.