Blend two colors by ratio

Supply the first color, the second color, and the percentage contribution of the second color. The calculator averages red, green, and blue independently, rounds each result to a valid channel integer, and returns both a normalized uppercase hex value and separate RGB numbers. It is useful when a design token, generated chart, theme, or automated asset needs a repeatable result rather than a color selected by eye. Invalid colors and ratios are rejected clearly, while identical inputs always return identical output.

Define the ratio before blending the colors

Treat the ratio as the percentage contribution of the second color. A ratio of zero gives all the weight to the first color, so the output equals color1. A ratio of one hundred gives all the weight to color2. At twenty-five, the first color contributes seventy-five percent and the second contributes twenty-five percent. This direction matters when a workflow creates several related swatches, because reversing the two inputs without also reversing the ratio changes the result. Enter either three-digit shorthand, such as #F00, or a complete six-digit hexadecimal value, such as #FF0000. The leading hash is optional, but every remaining character must be a hexadecimal digit. The tool deliberately rejects CSS names, RGB function strings, eight-digit alpha colors, missing fields, and malformed values instead of guessing. Explicit validation makes batch processing safer: a typo becomes an invalid input response at the affected record rather than silently producing a plausible but incorrect palette entry. Keep the input order documented in reusable scripts so later maintainers understand which endpoint of the blend owns the stated percentage.

Understand the weighted RGB calculation

The algorithm first converts each hexadecimal color into red, green, and blue channel values between zero and 255. For every channel it multiplies the first value by one minus the ratio fraction, multiplies the second value by the ratio fraction, adds those products, and rounds the sum to the nearest whole channel value. For example, a fifty-percent mix gives equal weight to both inputs, while a ten-percent mix remains much closer to the first. Red, green, and blue are calculated separately, so no random choice, lookup table, network request, or hidden palette rule affects the answer. This is a linear weighted average of encoded RGB channels. It is not a perceptual blend and does not convert through HSL, LAB, LCH, paint pigments, or gamma-linear light. Consequently, the visual midpoint between very different colors may not appear equally bright to a human observer. That behavior is intentional and useful when software needs the familiar arithmetic blend used by many token generators and graphics routines. The method field identifies the calculation, making stored results easier to audit if another mixing model is introduced elsewhere.

Use the result reliably in design and automation

The response provides the blended color as an uppercase six-digit hex string and as an RGB object containing integer red, green, and blue fields. It also echoes the ratio, reports both normalized weights, and names the method. Use the hex value directly in CSS variables, theme manifests, chart configuration, email templates, or design-token files. Use the separate channels when another program needs numeric input or when you want to pass the result to a contrast or luminance calculator. Because the calculation is deterministic and bounded, it works well in tests: a fixed request can be stored as a golden fixture and compared exactly on every run. The in-browser version is convenient for occasional palette work, while an API request costs $0.002 when a build pipeline, content system, or application needs the same behavior programmatically. Validate accessibility after blending when the output will sit behind text, because a mathematically correct ratio does not guarantee sufficient contrast. For a color ramp, call the capability with the same ordered pair and a planned sequence such as zero, twenty, forty, sixty, eighty, and one hundred; this preserves consistent endpoints and makes every intermediate swatch reproducible.