DEV Community

Stephen Chiang
Stephen Chiang

Posted on

6

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay