Environment

• Operating System: Darwin
• Node Version: v22.13.1
• Nuxt Version: 3.16.2
• CLI Version: 3.24.1
• Nitro Version: 2.11.8
• Package Manager: pnpm@10.8.1
• Builder: -
• User Config: app, compatibilityDate, css, devtools, devServer, eslint, imports, modules, runtimeConfig, sourcemap, ssr, icon, ui, colorMode
• Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui@3.0.2, @vueuse/nuxt@13.0.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.2

Reproduction

https://codesandbox.io/p/devbox/condescending-mcnulty-k5jgtf

Description

Hi 👋,

I’ve noticed an issue with the ColorPicker component related to color precision.

🐛 Bug Description

When I manually input the hex value #123456 into the ColorPicker, it gets changed to #123354 immediately.

After digging into the source code, I found that the component uses colortranslator and internally converts colors via HSL using HSLObject. It appears that during the RGB → HSL → RGB round-trip, there’s a slight loss of precision, which results in the hex value being altered.

It seems that the issue might be caused by the decimals option being set to 2, while the default value in colortranslator is 6.

Or Math.round here:

Additional context

No response

Logs