3 ms·

You can’t make a conditional using < and ?: in CSS, can you? That’s why they are using a very sharp black/white gradient, which unfortunately creates a gray in

• dan-robertson 4y ago
  Yeah I think it doesn’t exist. In theory a solution would be something like: clamp(0,(var(--perceived-lightness) - var(--threshold)) * Infinity, 1) But most browsers don’t support Infinity. I assume that GitHub can find a suitably large number to put there though. (Maybe I’m wrong though because of precision issues elsewhere). Another potential solution would be with sign but this function is also largely unsupported
• gpvos 4y ago
  Some browsers have round() and sign(), either of which can make it work. It's a pity that defining sign(x) as x/abs(x) breaks down when x = 0, otherwise you could use that since abs(x) = max(-x,x), and max() is supported widely.
• Etherlord87 4y ago
  You don't need much to figure out a conditional, for example here you're dealing with two cases before and after 0.453, so just subtract this threshold from a value, divide this number by the absolute value of that number, and now you have -1 for a number before the threshold, and +1 for the number after the threshold. You can normalize it by dividing it by 2 and adding 0.5. Now you have a number `t` that is either 0 for the input before the threshold or 1 for the input after the threshold. You could use it to switch between two values like so: bt + a(1-t) In the case of generating a white or black number, this works (unless you want a number between 0 and 255, then just multiply the result by 255): https://i.imgur.com/hXNw0EA.png https://i.imgur.com/hXNw0EA.png
  • gpvos 4y ago
    Dividing by the absolute value fails for 0. Also, only some CSS implementations support abs().