DEV Community

Stephen Chiang
Stephen Chiang

Posted on

Hex, rgba, or hsla?

I was reading an older edition of Design for Hackers last night and there was a statement that hsl was the latest and greatest due to its easier use compared to hex and it got me thinking...I almost always use rgba, and never really gave it a second thought.

So do you prefer to use hex, rgba, hsla, or mix them? Why?

Top comments (6)

Collapse
 
dylanesque profile image
Michael Caveney

HSL is definitely the most useful when building a palette; start with your base color, then just tweak the saturation and lightness as needed to build off of that.

Collapse
 
jankapunkt profile image
Jan Küster

Also not so biased against darkness when generating random colors compared to rgb.

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

For coding, almost always RGB (I only list the alpha channel if it needs a value other than full opacity). It's a bit easier to understand right off the bat (at least for me) than hex values are and it mirrors how the computer is (probably) actually handling colors.

When actually deciding on color schemes though, I often use HSL or HSV models, as they're easier to extrapolate theming from. For example, it's trivial to find the complement of a color using a HSL or HSV model, because you only have to adjust one of the values, while for RGB you need to adjust all three (in potentially complicated ways if you don't want the direct complement of the base color).

Collapse
 
cecilelebleu profile image
Cécile Lebleu

I use hex most of the time, though HSL and RGB are easier to use for animating

Collapse
 
emma profile image
Emma Goto 🍙

Hex 100% of the time - that's how I've always done it! Never heard of HSL, I'll check it out.

Collapse
 
chiangs profile image
Stephen Chiang

Same...hex and rgb...but now that it has wide-spread browser support I suppose it's also great way to double-check accessibility by checking the luminance contrast since that is what enable the color-blind to distinguish dark against light. ref: MDN