Specific hex values picked via the color picker change to a different value

[mabryl]

📝 Provide detailed reproduction steps (if any)

1. Open the color picker and specify 006EB7 as the value
2. Accept the value and close the color picker
3. Select the content that you applied the color to and open the color picker again

✔️ Expected result

The color value should stay the same.

❌ Actual result

The color value changes to 006EB8:

Screen.Recording.2024-05-23.at.16.03.04.mov

❓ Possible solution

This was brought to our attention by one of our clients. Here's what they had to say about the bug:

The underlying cause is that CKEditor stores the color as HSL and rounds the individual HSL values. Specifically, #006EB7 converts to hsl(203.93, 100%, 35.88%), which is then rounded to hsl(204, 100%, 36), resulting in the hex value #006EB8.

📃 Other details

• Browser: cross-browser
• OS: cross-OS
• First affected CKEditor version: N/A
• Installed CKEditor plugins: something that uses the color picker

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[mabryl]

Quick heads up that this is easily fixable via config.fontColor.colorPicker.format. The following config for the color picker will make the issue go away:

colorPicker: {
  // Use 'hex' format for output instead of 'hsl'.
  format: 'hex'
}

More info on this behavior can be found in our documentation.