interpolateColor

Maps input range to output colors using linear interpolation. It works just like interpolate function but the output is color string in rgba(r, g, b, a) notation.

Arguments

value [Float]

Value from within the input range that should be mapped to a value from the output range.

input range [Float[]]

An array of Floats that contains points that indicate the range of the input value. Values in the input range should be increasing.

output range [(string | number)[]]

An array of colors (strings like 'red', '#ff0000', 'rgba(255, 0, 0, 0.5)' etc.) that contains points that indicate the range of the output value. It should have at least the same number of points as the input range.

color space [String]

Can be either 'RGB' or 'HSV'.

options [Object]

Object containing color interpolation options. Allowed parameters are listed below:

Options	Default	Description
gamma	2.2	Gamma parameter used in gamma correction.
useCorrectedHSVInterpolation	true	See Options explanation section

Returns

interpolateColor returns the color after interpolation from within the output range in rgba(r, g, b, a) format.

Options explanation

• gamma - Colors on web / mobile are expressed in sRGB colorspace which is gamma-corrected, that is non-linear. Operations on colors in non-linear space like addition will give wrong results. For example the interpolated color may appear darker than it should. That's why when interpolating we convert sRGB to linear space first and then convert the result back into non-linear sRGB space. Gamma correction is device-dependent but for most devices to convert from non-linear to linear space raising components to the power of gamma=2.2 is a good approximation. If you'd like to disable that you can always set gamma=1. A nice article on that if you'd like to know more: https://observablehq.com/@sebastien/srgb-rgb-gamma
• useCorrectedHSVInterpolation - Sometimes (for example when interpolating from yellow to purple) HSV interpolation goes through many other hues. This option allows to reduce the number of hues in such cases by treating HSV hues like a circular spectrum and choosing the shortest arc (so instead of going from yellow to purple through green and blue, it goes only through red).

Example

const Component = () => {
  const progress = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        progress.value,
        [0, 1],
        ['red', 'green']
      ),
    };
  });

  return (
    <View>
      <Animated.View style={[{ width: 100, height: 100 }, animatedStyle]} />
      <Button
        onPress={() => {
          progress.value = withTiming(1 - progress.value, { duration: 1000 });
        }}
        title="run animation"
      />
    </View>
  );
};

Playground

From:

To:

Mode	Result
RGB without gamma correction
RGB with gamma = 2.2 (default)
HSV without correction
HSV with correction

Live demo

Select colorspace:RGBHSVGamma: