ColorPicker with alpha returns wrong values

[displaynone]

Describe the bug
I have a custom block that includes a ColorPicker

<ColorPicker color={ this.props.color } onChange={ this.props.onChangeColor } />

onChangeColor only sets the color to an attribute, using the function onChangeBoxShadowColor from a different component

onChangeBoxShadowColor( color ) {
	console.log(color);
	const { setAttributes, data } = this.props;
	setAttributes( { boxShadow: { ...data.boxShadow, color } } );
}

Notice that I have a console.log so I get the value of the color

If I set this values:

• r = 10
• g = 20
• b = 30
• a = 0.8

The b value changes to 31, and there are more 'changes' if I play with the values

To reproduce
Steps to reproduce the behavior:

1. Create a component with the specifications commented above
2. See the screen capture

Expected behavior
Values shouldn't change

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 66.0.3

Additional context

• WP 5.2-beta3-45205

[displaynone]

Forgot to paste the object displayed by console.log

{
  "color": {
    "_originalInput": {
      "h": 210,
      "s": 50,
      "l": 8,
      "a": 1,
      "source": "rgb"
    },
    "_r": 10.200000000000003,
    "_g": 20.39999999999999,
    "_b": 30.599999999999998,
    "_a": 1,
    "_roundA": 1,
    "_format": "hsl",
    "_ok": true,
    "_tc_id": 108
  },
  "hex": "#0a141f",
  "hsl": {
    "h": 210,
    "s": 50,
    "l": 8,
    "a": 1
  },
  "hsv": {
    "h": 210,
    "s": 67,
    "v": 12,
    "a": 1
  },
  "oldHue": 210,
  "rgb": {
    "r": 10,
    "g": 20,
    "b": 31,
    "a": 1
  },
  "source": "rgb"
}

[noisysocks]

Confirmed this by:

1. Adding a Group block
2. Opening the colour picker for the Group block's background colour
3. Changing the colour mode to RGB
4. Setting r = 10 g = 20 b = 30
5. Clicking 'Change colour mode' a few times until it was back on RGB

The b value changed to 31.

I suspect this is a rounding error when converting HSV to RGB. Not sure how we could fix it without supporting decimal places in these fields.

[matiasbenedetto]

This is still an issue today. Testing with WordPress 5.9.3 + Gutenberg latest dev version.

color.alpha.mp4

[t-hamano]

This problem seems to be the same as #28758.
As this comment suggests, it seems to be a problem with react-colorful.

[youknowriad]

We're not using react-colorful anymore, and I can't reproduce the issue using the instructions in #15110 (comment)