Hacker News Reader

Comment by buro9 | Hacker News Reader

This is nice, and I tried it out... and it's led to a general CSS question.

    #ff9f

Is that valid? What colour is that?!

View on HN

It's part of CSS Colors Level 4, which is still in draft stages, but some browsers (but not all) already support it. It's the same as #ffff99ff (same draft), which is the same as rgba(255,255,153,100%) or #ffff99

Browser support isn’t really that relevant here. PostCSS has a plugin that adds a fallback during the build step. If you want to use the #RGBA and #RRGGBBAA syntax, you can do it today. (I use it.)

It's relevant information, because not everyone uses the same postprocessing pipeline as you do (or even any at all)

What advantage does this give when we have SASS and other systems that support variables?

This is a spec going through draft-review-deployment so we can type 3 less characters?

Until now, the variants where #rrggbb and #rgb, so the extension to alpha is parallel: #rrggbbaa, #rgba. I personally like that extension, so you can just add an alpha component to a color without transforming it to a different form first. It's also relevant to people using automated systems, since those automatically can choose the most compact representation of a color possible in their output.

> This is a spec going through draft-review-deployment so we can type 3 less characters?

The key phrase above is is part of, it's one of the smaller aspects of the spec.

This doesn't have anything to do with variables, it's simply adding an opacity value to hex-encoded colours. So `#ffff` (or `#ffffffff`) is the sames as `rgba(255, 255, 255, 1)`, and `#ffffff7f` would be `rgba(255, 255, 255, 0.5)`.

Until now, if you wanted to assign a colour with opacity, you had to use the `rgba()` format. Now you can just hex-encode it :)

This is 4-digit hex rgba notation. It's a shorthand for #rrggbbaa, literally as #rgba. In this case alpha is f = 1.0, so #ff9f = #ff9.

That's #rgba where 4th character is the alpha.

Why is it # ff ff 99 ff

Would # f0 f0 90 f0 not be much more logical? It it were decimals 10, 20, 30 would get a shrthand of 1, 2, 3. It would not mean 11, 22, 33. At 1 it's not much of a differenct but at f it's quite a bit.

If you start with the premises that A: the shorthand notation should have access to the 0 value B: the shorthand notation should have access to the full value #ff and C: the shorthand notation should be linear in the RGBA scale, then the current system falls out of that as the uniquely-identified solution.

(Ignoring questions about how linear RGBA really is. In this case we're just looking at how to map 0-f to 00-ff. Whether RGBA is broken is a separate question.)

Because it gives you the greatest range, from 00 -> FF. That way you can represent full black and full white without either looking grey.

If #fff was #f0f0f0 then it would be impossible to express pure white in the shorter notation

Its popularity as a shorthand arose from the use of the “web safe” colour palette back in the late 90s/early 2000s which exclusively used 00, 33, 66, 99, CC, and FF: https://en.m.wikipedia.org/wiki/Web_colors#Web-safe_colors

That should expand out to #ffff99ff, where the last pair is the alpha, i.e. rgba

Reply on news.ycombinator.com