4 ms·

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?!

• xPaw 8y ago
  That's #rgba where 4th character is the alpha.
• francislavoie 8y ago
  That should expand out to #ffff99ff, where the last pair is the alpha, i.e. rgba
• jgtrosh 8y ago
  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.
• deleted 8y ago
  [deleted]
• detaro 8y ago
  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
  • Novashi 8y ago
    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?
    • detaro 8y ago
      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.
    • metaloha 8y ago
      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 :)
  • SimeVidas 8y ago
    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.)
    • detaro 8y ago
      It's relevant information, because not everyone uses the same postprocessing pipeline as you do (or even any at all)
• ThaJay 8y ago
  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.
  • FreeFull 8y ago
    If #fff was #f0f0f0 then it would be impossible to express pure white in the shorter notation
  • bArray 8y ago
    Because it gives you the greatest range, from 00 -> FF. That way you can represent full black and full white without either looking grey.
  • jerf 8y ago
    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.)
  • deleted 8y ago
    [deleted]
  • lstamour 8y ago
    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 https://en.m.wikipedia.org/wiki/Web_colors#Web-safe_colors