Human-friendly HSL, reference implementation

Build Status NPM package

HSLuv - Human-friendly HSL

Explanation, demo, ports etc.

The reference implementation is written in Haxe.

Build system

HSLuv uses Nix package manager. If you want to build without Nix, see default.nix for dependencies and command line instructions.

Linux, Windows 10 (WSL), macOS:

  • Install Nix
  • Use: ./run.sh <COMMAND> <TARGET>

A Docker wrapper is available for Windows 10 (native), or anyone who finds it more convenient:

  • Install Docker
  • Use: HSLUV_RUNTIME=docker ./run.sh <COMMAND> <TARGET>

The necessary mathematical equations are solved in Maxima. See /math directory for the equations and run the following to verify the solutions:

./run.sh build maximaOutput

To run full test suite:

./run.sh build test

To build JavaScript distributions (Node.js and browser):

./run.sh build nodePackageDist
./run.sh build browserDist

To build website:

./run.sh build website

To build website and start localhost server:

./run.sh run server

Testing

The snapshot file is stored for regression testing. If a backwards-incompatible change is made, a new snapshot file can be generated as follows:

./run.sh build snapshotJson

The format of the file is as follows:

{
  "#000000": {
    rgb: [ 0, 0, 0 ],
    xyz: [ 0, 0, 0 ],
    luv: [ 0, 0, 0 ],
    lch: [ 0, 0, 0 ],
    hsluv: [ 0, 0, 0 ],
    hpluv: [ 0, 0, 0 ]
  },
  ...
}

Deploying

For publishing packages and website you will need access to our shared credentials.

./run.sh run publishPypi
./run.sh run publishPypiTest # for publishing to https://test.pypi.org/
./run.sh run publishNpmJs
./run.sh run publishNpmSass
./run.sh run publishLua
./run.sh run publishWebsite
./run.sh run publishRuby
./run.sh run publishNuget
./scripts/publish-maven.sh

Versioning

Following semantic versioning, the major version must be incremented whenever the color math changes. These changes can be tested for with snapshot files.

Comments
  • Any Sass port ?

    Any Sass port ?

    Hello, i really love this concept but i fail to find any sass implementation or working alternative. Have you any clue for how to make this work in plain css via sass? Thanx.

  • npm tarball has files with timestamp 1970-01-01

    npm tarball has files with timestamp 1970-01-01

    To reproduce:

    curl -s https://registry.npmjs.org/hsluv/-/hsluv-0.1.0.tgz | tar tvz
    -rwxr-xr-x 1000/1000       462 1970-01-01 01:00 package/package.json
    -rwxr-xr-x 1000/1000      2110 1970-01-01 01:00 package/README.md
    -rw-r--r-- 1000/1000      9421 1970-01-01 01:00 package/hsluv.js
    -rwxr-xr-x 1000/1000      1185 1970-01-01 01:00 package/hsluv.d.ts
    

    Please publish a tarball containing files with a valid date.

  • Stopgap solution for Nix on Catalina

    Stopgap solution for Nix on Catalina

    For Mac users unfamiliar with Nix, our build system is unapproachable due to #61. We must make it possible for such a user to configure an HSLuv build quickly.

    Ideas:

    • See if we can use a workaround from https://github.com/NixOS/nix/issues/2925
    • Wrap the build in a Dockerfile (bonus - Windows support)
    • Vagrant? Something else?

    Whatever the solution, it needs to be clearly explained in the README.

  • Extremely small numeric drift against tests

    Extremely small numeric drift against tests

    I'm attempting to port to typescript.

    In running your tests, I am seeing extremely small numeric drift (usually on the order of 10-15 or smaller.)

    image

    I haven't really dug around, but I suspect that Typescript is juggling the math in a way that screws with IEEE numeric precision's edges.

    Are deviations that small considered acceptable?

  • Greatest-common-chroma mode?

    Greatest-common-chroma mode?

    Honestly, I'm more suggesting this because I want to play around with it than because I actually want to use it for a real project. It might be handy in cases where you want to experiment with different hues of not-very-saturated colors.

    It'd be neat to have a version of HSL with no chroma distortion at all. I.e., one that only includes a much smaller range of chroma, such that you can't actually access a color with a chroma unattainable with another hue for the same lightness value. It would require limiting the output to a very desaturated range of the visible color spectrum, but it'd be kind of neat to play with, I think.

    Actually, now that I think of it, I guess you can attain pretty much the same effect by hovering around CIELCHuv(x,25~60,z).

  • There are two Typescript implementations

    There are two Typescript implementations

    I wanted to update an older library of mine, husl-harmony, to the newer math, and newer tooling.

    I went to look at your implementations list because the Haxe approach isn't convenient under Typescript, to see if there was a native typescript one.

    There wasn't, so I wrote one, under the community standard -ts name.

    In trying to publish the completed product, I learned that @gfmio already did, and already published under the standard name, but did not get it added to your site.

    His and my implementation aren't actually the same, and both have advantages and disadvantages.

    As a result I published mine as @stonecypher/hsluv.ts instead of hsluv-ts.

    Please consider adding both the hsluv-ts and @stonecypher/hsluv.ts implementations to your list. Thank you.

  • On website color picker, allow direct editing of HSL numbers

    On website color picker, allow direct editing of HSL numbers

    In the color picker at http://www.boronine.com/husl/, it would be nice if we could directly edit the numbers next to the “H”, “S”, and “L” labels, in addition to editing them by dragging the circle on the hue-saturation map and by dragging the lightness slider.

    HUSL color picker HSL labels

    The numbers should also be styled like a text box, similar to the current hex code text box

    HUSL color picker color text box

    , so that the user knows that they are editable.

    Changing the numbers in the HSL text boxes would also change the position of the controls, just like HSL Color Picker does it.

    Ideally, you would be able to edit any text box representing the color, including the hex code and the RGB values. For example, if the output hex code is edited to another valid hex code, the color should be updated, and its HUSL HSL values should be displayed in their text boxes, and the controls updated. HSL Color Picker supports this too.

    The advantage of allowing direct editing is that it’s easier to type a number that you know you want than to carefully drag the mouse to the correct horizontal or vertical position. I once used the website color picker to generate some colors for a game. I was trying to generate different-hued families of colors with different saturations. When I had written the hex codes for all the light colors, it was a little difficult to move the map circle to the exact same horizontal position to get darker versions of the same hues. If I could have typed “225” into the hue text box, that would have been easier.

  • HPLuv max values?

    HPLuv max values?

    It's my understanding that for the standard implementation, HSLuv ranges from [0, 0, 0] to [360, 100, 100]. I thought HPLuv would have the same range, but looking at snapshot-rev4.json I've seen the S value go over 490. The H and L values appear to have the same range as HSLuv.

    Why is the HPLuv S value range so large? And what is the max value? I ask this so that I can scale to [0..1] for usage in a library.

  • I line-by-line translated the C# port to java

    I line-by-line translated the C# port to java

    complete with tests.

    https://github.com/lahwran/pin/commit/9f18fadf62144dc30acf38842a5356a440923e46 (impl), and https://github.com/lahwran/pin/commit/db89dfa431464a97df7074f32745b3af397c050c (which has a bunch of other stuff too, but also tests.)

    I did this because it said the java port was unfinished. Also because it was fun.

  • Improve precision & smoothness of hsluv/website/picker.js?

    Improve precision & smoothness of hsluv/website/picker.js?

    At the moment the sliders seem to lose a lot of precision needlessly, which results in an accuracy loss. If I set the saturation to 100, the lightness to 50, and move the hue slider to 73.4 (#887700) and I hold the left mouse button and move my mouse ONE PIXEL to the right, the next value becomes 75.7 (#867800).

    A VERY brief glance over the code didn't make me sure where this comes about, so I'll just speculate and assume that this comes about due to either:

    • some snapping to the closest /possible/ 8*3 bit RGB value (seeing how this resulted in an increase by 1 on the green channel, this seems plausible. But I already get that if I plug in ); or
    • using floor for number aesthetics (but really, please don't do this. Really bad UX actually.); or
    • using ints where one ought to use floats

    Either of these seems problematic.

    Also, if you want to go really crazy, redo the picker so it does what Adobe does here:

    https://color.adobe.com/create/color-wheel/

    but in HSLuv.

  • Haskell port candidate

    Haskell port candidate

    Hi, I recently completed the Haskell port.

    The candidate (not official/finalized yet) release is on Hackage at https://hackage.haskell.org/package/hsluv-haskell-0.1.0.0/candidate.

    Source is at https://git.modalduality.org/hsluv-haskell/tree/.

    What else needs to be done (other than finalizing the Hackage release)?

  • Website: consider copying color codes to clipboard automatically

    Website: consider copying color codes to clipboard automatically

    It would be really nice if, while updating the color code text box in the bottom left, the value also got copied to the clipboard. Since very few paint applications provide an hsluv color picker I end up using the website a lot just for color picking.

    But the workflow is a bit tedious: pick color on the website, click on the textbox, select all the text, copy, go back to my painting app, click on whatever color input I have, select all text, paste.

    Having the website copy the colors to the clipboard automatically would make things a bit less cumbersome.

    If the automatic behavior is undesired, then perhaps there could be a checkbox for enabling or disabling the behaviour.

  • How to measure perceptual difference between colors

    How to measure perceptual difference between colors

    How do I find the most similar color to a certain color in a set of colors? Is euclidean distance a decent way to do this? e.g. sqrt((ΔH)**2+(ΔS)**2+(ΔL)**2)

    If not, would euclidean distance be decent when looking for the closest color within a certain Hue? e.g. sqrt((ΔS)**2+(ΔL)**2)

  • Wide gamut support

    Wide gamut support

    New screens support colour spaces wider than sRGB.

    E.g. CSS will be supporting multiple such colour spaces: https://www.w3.org/TR/css-color-4/#icc-colors

    Strictly speaking, HSLuv is limited to sRGB because its constants are plugged into its equations: https://github.com/hsluv/hsluv/blob/master/math/cie.mac#L10

    Of course, for most practical purposes one can simply take the RGB output of HSLuv and plug it into a wide-gamut RGB colour space.

    Maybe this is really all we need. In which case we should document that on the website and/or README.

    Maybe we want more "proper" wide gamut support. This would be quite an undertaking that I would personally not attempt right now, but I will keep this issue open for discussion.

  • Bring website copy in line with color science

    Bring website copy in line with color science

    The author of the project is an expert programmer but a color science dilettante. If you have ever read a color science book from cover to cover, you are qualified to rewrite all website to make sure terminology is correct.

    The website also links to an old blog post of mine: https://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/

    It would be valuable to integrate the information contained in the blog post into https://www.hsluv.org somehow.

  • Add HPLuv to color picker demo

    Add HPLuv to color picker demo

    This has been reported here: https://github.com/hsluv/hsluv/issues/37

    And more recently on Twitter.

    I want to keep the demo as clean as possible. Perhaps we can add a checkbox like this:

    [ ] pastel
    
The OpenEXR project provides the specification and reference implementation of the EXR file format, the professional-grade image storage format of the motion picture industry.
The OpenEXR project provides the specification and reference implementation of the EXR file format, the professional-grade image storage format of the motion picture industry.

OpenEXR OpenEXR provides the specification and reference implementation of the EXR file format, the professional-grade image storage format of the mot

Aug 13, 2022
A read-only, license friendly, FUSE based btrfs implementation

btrfs-fuse About This is a read-only btrfs implementation using FUSE (Filesystem in Userspace). Although btrfs is already in mainline Linux kernel, th

Jan 31, 2022
refterm is a reference renderer for monospace terminal displays.

refterm v2 refterm is a reference renderer for monospace terminal displays. It was designed to demonstrate that even in the worst-case scenario - extr

Aug 17, 2022
code reference materials reguarding ip support session
code reference materials reguarding ip support session

ip-support This repository includes the necessary reference code for ip support sessions @SLIIT Malabe. These IP support sessions are conducted by the

Nov 24, 2021
MAXREFDES1277 is a reference design that enables the evaluation of MAX17853/52 for battery management in a 48V system.
MAXREFDES1277 is a reference design that enables the evaluation of MAX17853/52 for battery management in a 48V system.

MAXREFDES1277 The MAXREFDES1277 reference design enables quick evaluation of MAX17853/52 for battery management in a 48V system. It can be used to tes

Dec 2, 2021
Reference Implementations of P0267, the proposed 2D graphics API for ISO C++

P0267 Reference Implementation Please read the LICENSE before cloning or forking the code as there is important information there! Please see the wiki

Aug 1, 2022
Quick reference on command line tools and techniques

1. Introduction 1.1. Scope 1.2. Background 1.3. Purpose 1.4. Next steps 2. Basics 2.1. Common commands 2.2. Shortcuts 2.2.1. Navigation 2.2.2. Editing

Aug 9, 2022
Khronos-reference front end for GLSL/ESSL, partial front end for HLSL, and a SPIR-V generator.

News Visual Studio 2013 is no longer supported As scheduled, Microsoft Visual Studio 2013 is no longer officially supported. Please upgrade to at leas

Aug 17, 2022
`lv_lib_100ask` is a reference for various out of the box schemes based on lvgl library or an enhanced interface for various components of lvgl library.

Introduction lv_lib_100ask is a reference for various out of the box schemes based on lvgl library or an enhanced interface for various components of

Aug 11, 2022
A beginner friendly desktop UI for Tasmota flashed devices for Windows, macOS and Linux.
A beginner friendly desktop UI for Tasmota flashed devices for Windows, macOS and Linux.

TasmoManager A beginner friendly desktop UI for Tasmota flashed devices for Windows, macOS and Linux. Features Native Tasmota device discovery (via ta

Jul 16, 2022
Windows 11 compability check with user friendly output
Windows 11 compability check with user friendly output

Win11SysCheck Windows 11 compability check software with user friendly output GUI available as experimental release in experimental_ui branch Contribu

Jul 10, 2022
A friendly C++ library to create Wayland Compositors.

A friendly C++ library to create Wayland compositors that runs directly on top of DRM.

Jul 8, 2022
A beginner friendly repo in the world of open source. Contribute here to add here project in any languages.
A beginner friendly repo in the world of open source. Contribute here to add here project in any languages.

Hacktober Fest 2021 Heyy There (●'◡'●) Here you can contribute to opensource project in any valid language and project. Just follow the contribution g

May 24, 2022
This is a beginner-friendly DSA repo.
This is a beginner-friendly DSA repo.

Data structures and algorithms in C++ This repo contains all the DSA topics from beginner to advance. This is still in the development stage and you m

Feb 1, 2022
Beginner-friendly repository to make your first Pull Request and contribute to the open-source.
Beginner-friendly repository to make your first Pull Request and contribute to the open-source.

HacktoberFest Repository ( ?? Star this repository! ?? ) This is a Hacktoberfest-Repository,feel free to make your contributions here this month to wi

Jul 31, 2022
fx is a workspace tool manager. It allows you to create consistent, discoverable, language-neutral and developer friendly command line tools.
fx is a workspace tool manager. It allows you to create consistent, discoverable, language-neutral and developer friendly command line tools.

fx is a workspace tool manager. It allows you to create consistent, discoverable, language-neutral and developer friendly command line tools.

Jun 2, 2022
In DFS-BFS Implementation In One Program Using Switch Case I am Using an Simple And Efficient Code of DFS-BFS Implementation.
In DFS-BFS Implementation In One Program Using Switch Case I am Using an Simple And Efficient Code of DFS-BFS Implementation.

DFS-BFS Implementation-In-One-Program-Using-Switch-Case-in-C Keywords : Depth First Search(DFS), Breadth First Search(BFS) In Depth First Search(DFS),

Nov 17, 2021
Implementation of python itertools and builtin iteration functions for C++17

CPPItertools Range-based for loop add-ons inspired by the Python builtins and itertools library. Like itertools and the Python3 builtins, this library

Aug 8, 2022
Espressif ESP32 implementation of ANSI-ESTA E1.11 DMX-512A

This library allows for transmitting and receiving ANSI-ESTA E1.11 DMX-512A using an Espressif ESP32. It provides control and analysis of the packet configuration and allows the user to read synchronously or asynchronously from the DMX bus. This library also includes tools for data error-checking to safely process DMX commands.

Aug 13, 2022