HUSL HUSL / asset / free

http://boronine.com/husl

HUSL is a human-friendly alternative to the HSL color space. HSL was designed back in the 70s to be computationally cheap. It is a clever geometric transformation of the RGB color space and it does not take into account the complexities of human color vision.
1 favorite
submitted almost 4 years ago, by lush
HUSL popular asset

5 Comments

pineapple

This is crazy, I wish I understood what all this meant. SkinnyGeek, I need you to explain this :o

pineapple, almost 4 years ago

SkinnyGeek1010

This is crazy, I wish I understood what all this meant. SkinnyGeek, I need you to explain this :o

Oh Wow, that's a pretty tough read!
I don't really understand the purpose of HUSL, it makes lightness and saturation an absolute value, but it seems rather unnecessarily complex. It says a human friendly version of HSL but it seems like it's just the opposite, a computer friendly version of HSL used to compute colors with the ability of calculating colors not in the human eye spectrum.

It seems like a more suitable tool would be the Lab color space which has absolute values and imaginary colors. Getting off topic but I once bought a 400 pg book on just the Lab color space.... I never finished it though :/

The ironic part is I tend to use HSL all the time because i'm partially red/green color blind =) It makes it really easy to go 10% lighter without shifting hues.

SkinnyGeek1010, almost 4 years ago

pineapple

Oh interesting never knew you were partially color blind. Does pineapple give you a headache with red/purple/blue for color coding? I realize in retrospect those are not good colors :/

And yes i remember some very cool videos about Lab. at one point i read all about it, and I saw some things people can do in photoshop with it (such as changing the color of something in a way that just hue adjusting cant). Fascinating stuff, I just never know when to use it.

pineapple, almost 4 years ago

SkinnyGeek1010

Oh interesting never knew you were partially color blind. Does pineapple give you a headache with red/purple/blue for color coding? I realize in retrospect those are not good colors :/

They're actually not bad... the blue and purple look a little similar to me but the purple has a lower luminosity and it less saturated so it's pretty easy to pick apart.

One of the worst is Ebay's completed/not sold colors, I can't tell the difference at all... I actually made an extension to make the red darker and the green lime'yer lol

I never use Lab anymore but I used to use it for retouching really bad photos that are dark and foggy.

SkinnyGeek1010, almost 4 years ago

SkinnyGeek1010

To boil down normal HSB for anyone interested... compared to RGB it lets you adjust just the hue, saturation or luminosity separately instead of the RGB mix.

The Hue value will essentially spin around the color wheel in degrees. 0 is red, 180 is cyan, and 360 is back to red. These are fully saturated colors. This could be useful for switching to an opponent color or just nudging into the next color without changing brightness or saturation.

The Saturation is just how intense the color is, 100 being the most vibrant. For example you could pick out a bright ass navy blue for your text editor background but it would be way too intense for a background. Adjusting the saturation from 100 down to the 30's will make it way easier on your eyes.

The Brightness is basically how bright it is. 0 being black and 100 being as bright as possible.

If you don't have Photoshop, http://www.colorpicker.com/ has a pretty decent color picker

--edited-- , converted from HSL to HSB since that's more applicable for web

SkinnyGeek1010, almost 4 years ago


Login or to comment.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.