Giwrgos Tsopanoglou
Giwrgos Tsopanoglou

Reputation: 1215

HSB vs HSL vs HSV

I am making a Color class as a part of a very basic graphics API in c++. So I decided to take a look at Microsoft's .NET framework and noticed that their Color class has functions for HSB.

Then I started a research to determine whether I should provide HSB, HSL or HSV or ALL of them in my class.

So, I have 3 questions on HSB, HSL, HSV:

  1. Is HSB same as HSL?

  2. If not, why isn't there an HSBL or even HSBLV?

  3. I find many different methods of calculating these values, can someone show me the FASTEST ones?

Upvotes: 69

Views: 70575

Answers (5)

JoseV
JoseV

Reputation: 962

Is HSB same as HSL?

No. HSB is the same as HSV, but HSL is different. All these are used as a friendly way to represent RGB colors. The Wikipedia article on HSL and HSV explains the differences using color cylinders: HSL and HSV.

Basically, Hue is the same for HSB and HSL but the Saturation takes different values, and Brightness and Lightness are also different.

If not, why isn't there an HSBL or even HSBLV?

I don't get the point. Both HSB/HSV and HSL can represent any RGB color. Having B and L independently is not possible because of the way they are defined. A given HSB Brightness and Saturation is associated to a fixed Lightness. In fact converting between them is very easy.

I find many different methods of calculating these values, can someone show me the FASTEST ones?

There's a similar question here for calculating HSB from RGB: Fast, optimized and accurate RGB <-> HSB conversion code in C. There's a Java implementation there that might help. For converting between HSB/HSV and HSL see HSL vs HSB vs HSV.

Upvotes: 69

user14638282
user14638282

Reputation:

HSB and HSV are the same, but HSL is different.

  • HSB stands for Hue, Saturation, Brightness.
  • HSV stands for Hue, Saturation, Value.
  • HSL stands for Hue, Saturation, Light.

Here is a visual difference from wikipedia: hsl v hsv comparison showing multiple colour graphs

Upvotes: 17

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

  1. HSB!=HSL and HSB==HSV
  2. HSBL and HSBLV not exists because Lightness and Brightness (also called Value) are substitutes
  3. Here are conversion methods (more on wiki HSL2RGB and HSV2RGB)

HSV -> RGB (implementation in js here)

enter image description here

RGB -> HSV (implementation in js here)

enter image description here

Upvotes: 11

user1034912
user1034912

Reputation: 2257

If you are doing UI it makes more sense to use HSL rather than HSV as you need to control the brightness (L) value of your color palette.

Upvotes: 2

aziz
aziz

Reputation: 121

Originally the difference between Brightness And Lightness Is. "Brightness" is used for Subtractive colors and "Lightness" for Additive colors. Now if your program is dealing with Subtractive colors like the CMYK system it is better to use HSB otherwise it is better HSL.

Upvotes: 12

Related Questions