Comments (5)
Want!
from hsluv.
@no-identd the behavior you're seeing can be explained more simply.
Moving the slider by 1 pixel will change the hue value by 360 / slider width (px) = 360 / 161 = 2.236. The reason it appears as "snapping" is that mouse events have a pixel-level precision, so we cannot detect a subpixel mouse move. Apparently Chrome is supposed to support subpixel precision [1], but at least on my machine it doesn't (MacOS 10.13, Chrome 64). In either case, picker.js treats mouse coordinates as doubles so the code is ready as soon as support is rolled out.
I could not reproduce the issue with zooming on my machine. Could you give me specific values you are seeing as well as the browser you are using?
It seems that the general issue here can be mitigated by making the sliders wider, which would involve a slight redesign of the picker layout.
(btw, I'd love to see an HSLuv picker similar to the Adobe color wheel, but won't have time to work on it myself)
[1] https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX#Browser_compatibility
from hsluv.
This should do it: http://www.hsluv.org/
from hsluv.
Update:
In fact, it seems like the case appears even worse, the sliders seem to exhibit some weird DPI dependency? The values it snaps to and the 'snap range' seems to change depending on the zoom level of the browser...
from hsluv.
I had a lengthy reply to this typed out, unfortunately it died. What it boiled down to:
Independent of the subpixel precision issue, changing the slider width to 180 should improve matters greatly without messing up the website design.
from hsluv.
Related Issues (20)
- Stopgap solution for Nix on Catalina HOT 10
- Add a link to hsluv.org leading potential contributors to our GitHub Project
- JavaScript implementation: add support for ESM modules HOT 1
- JavaScript implementation: add documentation to `.d.ts` file
- Website: fix line-height for headers (Chrome on Android)
- Add HPLuv to color picker demo HOT 2
- Bring website copy in line with color science HOT 2
- Wide gamut support HOT 4
- Website: add canonical documentation which can be reused by all implementations HOT 3
- contrast ratios HOT 1
- How to measure perceptual difference between colors HOT 9
- negative red value from hsluv.hsluv_to_rgb((200,192,32)) HOT 1
- HPLuv max values? HOT 6
- D65 values are incorrect? HOT 5
- Website: consider copying color codes to clipboard automatically HOT 1
- npm tarball has files with timestamp 1970-01-01 HOT 10
- Saturated reds are darker HOT 1
- Website's demo color picker breaks on #ff0000 and #0000ff, and any color with exactly the same L* value HOT 7
- 1 test fails: Exception: Mismatch: 1543.2358383808844 1543.2358383808553 HOT 2
- Are H/S/L values on color picker in HSL or HSLuv? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hsluv.