Fix RGBA calc error when change alpha

src/components/HexAlphaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalHex } from "../utils/compare";
-import { hexToHsva, hsvaToHex } from "../utils/convert";
+import { hexToHsva, hsvaToHex, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "0001",
   toHsva: hexToHsva,
   fromHsva: hsvaToHex,
   equal: equalHex,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const HexAlphaColorPicker = (props: Partial<ColorPickerBaseProps<string>>): JSX.Element => (

src/components/HslaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps, HslaColor } from "../types";
 import { equalColorObjects } from "../utils/compare";
-import { hslaToHsva, hsvaToHsla } from "../utils/convert";
+import { hslaToHsva, hsvaToHsla, updateAlphaFromObject } from "../utils/convert";
 
 const colorModel: ColorModel<HslaColor> = {
   defaultColor: { h: 0, s: 0, l: 0, a: 1 },
   toHsva: hslaToHsva,
   fromHsva: hsvaToHsla,
   equal: equalColorObjects,
+  updateAlpha: updateAlphaFromObject,
 };
 
 export const HslaColorPicker = (props: Partial<ColorPickerBaseProps<HslaColor>>): JSX.Element => (

src/components/HslaStringColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalColorString } from "../utils/compare";
-import { hslaStringToHsva, hsvaToHslaString } from "../utils/convert";
+import { hslaStringToHsva, hsvaToHslaString, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "hsla(0, 0%, 0%, 1)",
   toHsva: hslaStringToHsva,
   fromHsva: hsvaToHslaString,
   equal: equalColorString,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const HslaStringColorPicker = (

src/components/HsvaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps, HsvaColor } from "../types";
 import { equalColorObjects } from "../utils/compare";
-import { roundHsva } from "../utils/convert";
+import { roundHsva, updateAlphaFromObject } from "../utils/convert";
 
 const colorModel: ColorModel<HsvaColor> = {
   defaultColor: { h: 0, s: 0, v: 0, a: 1 },
   toHsva: (hsva) => hsva,
   fromHsva: roundHsva,
   equal: equalColorObjects,
+  updateAlpha: updateAlphaFromObject,
 };
 
 export const HsvaColorPicker = (props: Partial<ColorPickerBaseProps<HsvaColor>>): JSX.Element => (

src/components/HsvaStringColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalColorString } from "../utils/compare";
-import { hsvaStringToHsva, hsvaToHsvaString } from "../utils/convert";
+import { hsvaStringToHsva, hsvaToHsvaString, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "hsva(0, 0%, 0%, 1)",
   toHsva: hsvaStringToHsva,
   fromHsva: hsvaToHsvaString,
   equal: equalColorString,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const HsvaStringColorPicker = (

src/components/RgbaColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps, RgbaColor } from "../types";
 import { equalColorObjects } from "../utils/compare";
-import { rgbaToHsva, hsvaToRgba } from "../utils/convert";
+import { rgbaToHsva, hsvaToRgba, updateAlphaFromObject } from "../utils/convert";
 
 const colorModel: ColorModel<RgbaColor> = {
   defaultColor: { r: 0, g: 0, b: 0, a: 1 },
   toHsva: rgbaToHsva,
   fromHsva: hsvaToRgba,
   equal: equalColorObjects,
+  updateAlpha: updateAlphaFromObject,
 };
 
 export const RgbaColorPicker = (props: Partial<ColorPickerBaseProps<RgbaColor>>): JSX.Element => (

src/components/RgbaStringColorPicker.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { AlphaColorPicker } from "./common/AlphaColorPicker";
 import { ColorModel, ColorPickerBaseProps } from "../types";
 import { equalColorString } from "../utils/compare";
-import { rgbaStringToHsva, hsvaToRgbaString } from "../utils/convert";
+import { rgbaStringToHsva, hsvaToRgbaString, updateAlphaFromString } from "../utils/convert";
 
 const colorModel: ColorModel<string> = {
   defaultColor: "rgba(0, 0, 0, 1)",
   toHsva: rgbaStringToHsva,
   fromHsva: hsvaToRgbaString,
   equal: equalColorString,
+  updateAlpha: updateAlphaFromString,
 };
 
 export const RgbaStringColorPicker = (

src/hooks/useColorManipulation.ts

@@ -32,10 +32,20 @@ export function useColorManipulation<T extends AnyColor>(
   // Trigger `onChange` callback only if an updated color is different from cached one;
   // save the new color to the ref to prevent unnecessary updates
   useEffect(() => {
-    let newColor;
+    const { a, ...hsv } = hsva;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { a: _, ...cacheHsv } = cache.current.hsva;
+
+    // When alpha channel is changed, use cached RGB values to prevent rounding errors
+    const newColor = equalColorObjects(hsv, cacheHsv)
+      ? colorModel.updateAlpha
+        ? colorModel.updateAlpha(cache.current.color, a)
+        : cache.current.color
+      : colorModel.fromHsva(hsva);
+
     if (
       !equalColorObjects(hsva, cache.current.hsva) &&
-      !colorModel.equal((newColor = colorModel.fromHsva(hsva)), cache.current.color)
+      !colorModel.equal(newColor, cache.current.color)
     ) {
       cache.current = { hsva, color: newColor };
       onChangeCallback(newColor);

src/types.ts

@@ -39,6 +39,7 @@ export interface ColorModel<T extends AnyColor> {
   toHsva: (defaultColor: T) => HsvaColor;
   fromHsva: (hsva: HsvaColor) => T;
   equal: (first: T, second: T) => boolean;
+  updateAlpha?: (color: T, alpha: number) => T;
 }
 
 type ColorPickerHTMLAttributes = Omit<

src/utils/convert.ts

@@ -204,3 +204,14 @@ export const hsvaToHsv = (hsva: HsvaColor): HsvColor => {
   const { h, s, v } = roundHsva(hsva);
   return { h, s, v };
 };
+
+export const updateAlphaFromString = (color: string, alpha: number): string => {
+  return color.replace(/\d+\.\d+\)/, `${alpha})`);
+};
+
+export const updateAlphaFromObject = <T extends RgbaColor | HslaColor | HsvaColor>(
+  color: T,
+  alpha: number
+): T => {
+  return Object.assign({}, color, { a: alpha });
+};