Color Calculator

Color mixing is the process of combining two or more colors to produce a new one. In digital design, this happens mathematically by manipulating the red, green, and blue (RGB) channel values of each color. Unlike physical pigment mixing — where combining blue and yellow paint produces green — digital color mixing follows precise arithmetic rules that yield perfectly reproducible results every time.

This color calculator supports six blend operations: Mix, Add, Subtract, Multiply, Screen, and Overlay. Each operation is rooted in the same foundational principle: take two RGB triplets, apply a per-channel formula, clamp the output to the valid 0–255 range, and convert the result back to HEX, RGB, and HSL for easy use in code, design tools, or print workflows.

Understanding color operations is essential for web developers choosing CSS blend modes, graphic designers crafting layer effects in image editors, and UI designers maintaining a coherent color palette. When you know exactly what mathematical transformation a "Screen" or "Multiply" blend applies, you can predict the output before touching a tool — and reverse-engineer any color effect you admire on screen.

The calculator also generates an 11-step gradient between the two chosen colors, using linear interpolation. This gradient is invaluable for building accessible color scales, hover-state transitions, data-visualization palettes, and design-system tokens where consistent perceptual steps between shades are required.

Results are shown in three standard formats simultaneously: HEX (used in HTML, CSS, and most design software), RGB (the native web format and the basis of all calculations here), and HSL (hue, saturation, lightness — a human-friendly model that makes it easy to adjust the perceived brightness or vividness of a color without changing its hue). Click any value to copy it directly to your clipboard.

RGB stands for Red, Green, Blue — the three additive primary colors of light. Every color on a digital screen is expressed as a combination of these three channels, each ranging from 0 (none) to 255 (full intensity). When all three channels are 0, the result is black; when all are 255, the result is pure white.

The HEX color format is simply the RGB triplet written in hexadecimal. For example, #3B82F6 decodes to R = 0x3B = 59, G = 0x82 = 130, B = 0xF6 = 246. The color calculator performs all arithmetic in the RGB domain, making the math transparent and exact.

Converting between RGB and HSL requires a bit more work. Given normalized RGB values (each divided by 255), the lightness is the average of the maximum and minimum channel values: L = (max + min) / 2. Saturation depends on whether the lightness is above or below 0.5, and hue is derived from which channel is dominant and the ratio of the remaining channels. The calculator shows the HSL values so you can immediately judge how light or saturated the result color will appear without doing any extra arithmetic yourself.

Knowing the RGB model matters because every blend operation in this tool works channel-by-channel. The red channel of Color 1 is blended with the red channel of Color 2, independently of green and blue. This channel-independence is what makes the math predictable and composable across all six operations.

Each blend mode produces a different visual character, and understanding the formula explains exactly why.

Mix is a weighted average. At ratio = 50, each color contributes equally and the result is a true midpoint hue. Slide the ratio toward 100 to lean toward Color 1, or toward 0 to lean toward Color 2. Because the formula is a convex combination, the result is always between the two inputs — no clipping occurs.

Add sums the channel values and caps at 255. Adding two bright colors often produces white or near-white because multiple channels hit the ceiling. Adding a dark color to any other color brightens it proportionally. This mode is identical to the "Linear Dodge (Add)" layer mode in Photoshop and Figma.

Subtract removes the second color's light from the first, clamped at zero. It tends to darken and can introduce unexpected hue shifts when one channel reaches zero before others. Subtracting a color from itself produces black (0, 0, 0).

Multiply scales each channel by the other, normalized to the 0–255 range: C1 × C2 / 255. Because both values are at most 255, the product divided by 255 is always ≤ the smaller of the two inputs. Multiplying any color by black (var(--foreground)000) gives black; multiplying by white (var(--card-bg)FFF) leaves the original unchanged. Multiply always darkens or preserves.

Screen is the inverse of Multiply: it inverts both inputs, multiplies, normalizes, then inverts the result. Screen always brightens or preserves, and multiplying two screens together is never darker than either input. Screening with white (var(--card-bg)FFF) always yields white; screening with black leaves the original unchanged.

Overlay combines Multiply and Screen depending on the base value. When Color 1's channel is below 128, Multiply is applied; above 128, Screen is applied. This boosts contrast — darks get darker, lights get lighter — while preserving mid-tones. Overlay is the workhorse of contrast-enhancing layer effects in professional design tools.

The gradient panel at the bottom of the calculator shows 11 evenly spaced color stops between Color 1 and Color 2, computed by linear interpolation. For each step index i from 0 to 10, the interpolation parameter is t = i / 10, and each channel is blended as:

gradient[ch] = C1[ch] × (1 − t) + C2[ch] × t

At t = 0 the result equals Color 1 exactly; at t = 1 it equals Color 2 exactly. The intermediate stops are mathematically uniform steps in RGB space. While RGB linear interpolation is computationally simple and widely understood, it can sometimes produce desaturated mid-tones when the two hues are complementary (e.g., red and cyan), because their RGB midpoints happen to be near gray. For most adjacent-hue combinations — blues to greens, oranges to yellows — RGB interpolation produces natural-looking gradients that translate directly into CSS linear-gradient color stops.

Each gradient swatch is clickable: clicking copies that stop's HEX value to the clipboard so you can paste it directly into a CSS file, design token sheet, or Figma style. This workflow is faster than manually computing intermediate hex values or reaching for a separate gradient tool.

Color blending operations appear throughout professional digital design workflows, often under different names. CSS exposes the same operations through the mix-blend-mode and background-blend-mode properties; image editors expose them as layer blend modes. When you understand the math, translating results from this calculator directly to production code or design files becomes straightforward.

Brand palette generation: Use the Mix operation with varying ratios (20%, 40%, 60%, 80%) to produce a full tint-and-shade scale from a single brand color. This is the same technique used by Tailwind CSS and Material Design to derive the 50–950 scale from a base 500-level color.

Texture overlays: The Multiply mode is the standard choice for darkening a photographic background with a semi-opaque color wash. Because Multiply always darkens, a warm brown multiplied over a photo will tint the highlights amber while keeping shadows deep — the classic "vintage photo" effect.

Glow and bloom effects: Screen mode is ideal for adding light effects over dark backgrounds. Particle systems, lens flares, and neon signs in UI design all exploit the Screen formula's property of never darkening, allowing bright overlays to accumulate to white without harsh clipping artifacts.

Contrast enhancement: Overlay mode doubles as a contrast filter. Overlaying a 50% gray (#808080) leaves the base image unchanged (it is the identity for Overlay). Overlaying with a lighter gray boosts contrast toward the highlights, while a darker gray boosts toward the shadows.

Data visualization palettes: The gradient panel gives you a ready-made sequential color scale between two anchor colors. Copy the 11 stops into a palette definition for a chart library, a choropleth map, or a heat-map visualization where value magnitude maps to color intensity.

The calculator shows the result color in all three major CSS color formats so you can choose whichever suits your workflow without any manual conversion.

HEX is the most compact and most widely supported format. It encodes each of the three RGB channels as a two-digit hexadecimal number (00–FF), concatenated into a six-character string prefixed with #. HEX is the default format in CSS, SVG, and most design tool color pickers. It contains no explicit alpha (opacity) channel; for opacity you need the eight-character HEX8 or var(--card-bg) notation.

RGB (rgb(R, G, B)) is the native format of screens and browsers. It expresses each channel as a decimal integer 0–255. RGB is especially useful when you need to manipulate channels programmatically in JavaScript, apply CSS filters, or interface with canvas-based drawing code where channel values are read and written individually.

HSL (hsl(H, S%, L%)) represents color as Hue (0–360°, the color wheel angle), Saturation (0–100%, how vivid the color is), and Lightness (0–100%, ranging from black through the pure hue to white). HSL is the most human-friendly model for design work: to make a color lighter, increase L; to desaturate it, decrease S; to shift the hue, rotate H. Many design systems store base colors as HSL tokens precisely because the parameters map directly to designer intent.