Hex, rgba, or hsla?
Stephen Chiang

Stephen Chiang @chiangs

About: Design Technologist. Harmonizing design and development daily. Apply ☕ || 🍺 liberally.

Location:
Stavanger, Norway
Joined:
Dec 16, 2017

Hex, rgba, or hsla?

Publish Date: Aug 28 '19
14 6

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?

Comments 6 total

  • Michael Caveney
    Michael CaveneyAug 28, 2019

    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.

    • Jan Küster 🔥
      Jan Küster 🔥Aug 28, 2019

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

  • Cécile Lebleu
    Cécile LebleuAug 28, 2019

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

  • Austin S. Hemmelgarn
    Austin S. HemmelgarnAug 28, 2019

    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).

  • Emma Goto 🍙
    Emma Goto 🍙Aug 29, 2019

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

    • Stephen Chiang
      Stephen ChiangAug 29, 2019

      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

Add comment