Cubic-bezier color interpolation

Supply the start and end colors, a fraction from zero through one, and the same four control coordinates used by CSS cubic-bezier easing. The result includes the eased fraction, normalized colors, hexadecimal output, and RGB channels, making transitions reproducible in design tools, animation pipelines, tests, and generated assets without relying on a browser animation clock.

Separate timeline progress from visible color progress

A linear blend treats fifty percent of elapsed time as fifty percent of the distance between two colors. Real interfaces often need a different rhythm: a transition may begin gently, accelerate through its middle, and settle slowly near its destination. This capability applies a cubic-bezier timing curve before blending the RGB channels. The input t remains the timeline fraction, while eased_t reports the color fraction produced by the curve. That distinction makes the result easy to inspect and reuse. At timeline zero the starting color is returned, and at timeline one the ending color is returned. Between those endpoints, the curve controls how quickly the channels advance. Because the operation receives explicit numbers and does not consult a clock, repeated requests with identical inputs produce identical output. This is useful when a renderer, design exporter, test suite, or build process must agree on a transition frame without running an animation or estimating what a browser displayed at a particular instant.

How the cubic-bezier fraction is solved

A CSS-style cubic-bezier curve starts at zero, ends at one, and has two caller-provided control points. The requested timeline fraction belongs to the curve's x-axis, so simply evaluating the y polynomial at that same number would be incorrect for most curves. The calculator first finds the internal curve parameter whose x coordinate matches the requested fraction. It uses a bounded Newton search when the slope is suitable and a fixed bisection search as a stable fallback. It then evaluates the y coordinate at that solved parameter. The x control coordinates must stay from zero through one, which keeps time monotonic and gives a unique answer. The y controls may range from negative ten through ten, allowing anticipation and overshoot curves. If easing goes outside zero through one, interpolated RGB channels are clamped to their valid byte range. Reported decimal easing is rounded consistently, while channel values use nearest-integer rounding. These explicit rules remove dependence on browser engines, frame rates, and platform-specific animation sampling.

Choose inputs and use the returned color

Enter each color as three or six hexadecimal digits, optionally preceded by a hash. Short colors are expanded and every accepted color is returned in normalized lowercase six-digit form. Provide t between zero and one, then provide x1, y1, x2, and y2 in the familiar cubic-bezier order. For example, the common ease-in-out shape uses 0.42, 0, 0.58, and 1. The response preserves the normalized endpoints and curve, exposes the calculated eased fraction, and supplies both a hexadecimal color and separate red, green, and blue channels. Use the hex value in CSS, SVG, design tokens, or image instructions; use the channel object where structured numeric data is preferable. For a sequence of frames, call the operation with evenly spaced timeline fractions while keeping the endpoints and controls constant. Validation rejects malformed colors, non-finite numbers, fractions outside the timeline, non-monotonic x controls, and excessively large y controls, so an invalid configuration cannot silently generate a misleading transition sample.