ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

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

Open mabryl opened this issue 1 year ago • 1 comments

📝 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:

https://github.com/ckeditor/ckeditor5/assets/72079603/4408a160-81f1-45e3-8dea-14b2e0fb50f7

❓ 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 avatar May 23 '24 14:05 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.

mabryl avatar May 23 '24 14:05 mabryl