1. 31
  1.  

  2. 5

    Wow, this looks great. I have a side project that needs to generate colours from other colours:

    • x% darker than y
    • x% lighter than y
    • darker than x and otherwise similar to y
    • lighter than x and otherwise similar to y
    • contrasting with x, but pleasantly so

    HSLuv seems to make all of those simple. And it’s simple to write if(x is a dark colour) {… too. Great. The one thing I miss is a general contrast function — “how different are two colours x and y?”

    Thanks for posting this, @friendlysock.

    1. 3

      RGB is a way to represent color, not a color space. Same with HSL. What the author is referring to as RGB in the first part, is actually sRGB. Yes sRGB is nonlinear, this doesn’t mean that RGB cannot represent colors in a linear color space.

      Comparing HSL to HSLuv with the same values is not quite an apples to apples comparison, as HSL in example is over sRGB color space, and HSLuv is not. Therefore, the same values in different color spaces should not be used to compare methods of color representation.

      1. 3

        The comparisons between HSL and HSLuv aren’t interesting because HSL(250, 100%, 50%) and HSLuv(250, 100%, 50%) look different; that’s expected for the reasons you mention. However, comparing HSL(250, 100%, 50%) to HSL(60, 100%, 50%), and comparing HSLuv(250, 100%, 50%) to HSLuv(60, 100%, 50%), is very interesting. HSLuv(250, 100%, 50%) and HSLuv(60, 100%, 50%) perceptually seem to have about the same brightess, while HSL(250, 100%, 50%) looks way darker than HSL(60, 100%, 50%) even though both ostensibly have a brightness of 50%.

        Similarly, HSL(0, 90%, 80%) looks way more saturated than HSL(0, 90%, 40%), while HSLuv(0, 90%, 80%) looks about as saturated to a human eye as HSLuv(0, 90%, 40%) does. That HSL(0, 90%, 80%) looks more saturated than HSLuv(0, 90%, 80%) isn’t the important part.

        I don’t know a lot about color theory, so I might have completely misunderstood your arguments.

        1. 1

          That part was mostly directed towards the part where he builds a palette, towards “The same palette with HSL/RGB:” part to be exact.

      2. 3

        In a similar vein, there’s also cubehelix: pretty, with a brightness that doesn’t vary too much, but not perceptually uniform.

        See the pages below:

        https://jiffyclub.github.io/palettable/cubehelix/

        http://davidjohnstone.net/pages/cubehelix-gradient-picker

        https://bl.ocks.org/mbostock/310c99e53880faec2434