alex laughnan

@alexlaughnan.com

ai & ui @ asana, cold brew enthusiast, well-formatted docs are my love language. 💜 🏳️‍🌈

Found a neat CSS trick to automatically swap between black or white text based on any arbitrary background color! With relative color syntax, you can use calc to adjust the text color depending if the background is above or below 50% lightness in the LCH color space.

CSS code snippet:

.magic {
  --bg: red;
  background: var(--bg);
  /* Swap between white or black based on the background. */
  color: lch(from var(--bg) calc((50 - l) * infinity) 0 0);
}

Hi folks! 👋 I’m Alex and I live in San Francisco, CA. I work at asana.com and spend most of my day thinking about design systems and supporting product teams. Outside of work you can find me: sipping on a cold brew, avidly learning a foreign language and attempting to crush my latest reading goal

My phone just auto corrected "trauma dumping" to "trauma dumpling," so I painted this in case anyone would like a visual of my mental state. How's everyone else doing?

A small watercolor painting of a horrified looking cartoon dumpling.