Color

I’m not the world’s biggest fan of LQIP’s (low quality image placeholders) generally (doing nothing other than handling aspect ratio is… fine), but I really like how much creativity it inspires. I’ve seen a ton of different approaches to it over the years, that all use different technology and all have different advantages and disadvantages. […]

Do you need it? Not really, custom properties are probably a better bet. But it still has a bit of utility and it’s fun to think about.

Using hard color stops with `repeating-conic-gradient()` and the double-stop syntax, we can pretty easily create a burst background. Then get fancier.

I love the idea of being able to take a color you already have in CSS, like currentColor, a custom property, or a color pulled from an attr(), and manipulate it. The big examples being darken, lighten, or apply opacity to it for different adjacent elements or states. We have a ton of “newly available” […]

Sometimes giving a good name to something is what helps it sink into people’s minds. Daniel Karuna may have pulled that off here with “Colormaxxing“. The P3 color space is just bigger than the sRGB color space, and the extra colors tend to be in the more intense regions. What if I told you that #ff0000 or rgb(255, […]

For who-knows-what reason color inputs only show a color swatch, not a string representation of the color. Let’s see if we can fix that.

What is a good contrast text color on a black background? White. What about on a white background? Black. What about on #f06d06? Less clear. Devon Govett posted a good trick to having CSS pick for you, which works across browsers today. Lea Verou has a much deeper dive. There is supposed to be a […]

One approach to color modes it to do it all in CSS with prefers-color-scheme media queries and/or the light-dark() function. A user toggle can be a future improvement.

Syntax highlighting code on the web happens like coloring any other text on the web happens. You wrap the bits of text you want colored uniquely in some element, probably a meaningless <span>, then select that in CSS and apply a color. Ideally, the span-wrapping happens server-side so client-side JavaScript isn’t tied up doing something […]

Support for the relative color syntax in CSS is across the board now (go interop!), so here we look at some basic (and still very useful) use cases, like applying alpha to a color you have on hand.