Color

Keith Cirkel has been building some interesting and educational web games lately:

I just complained that color inputs couldn’t deal in P3 colors. Looks like Safari is the first-mover on supporting that, as well as alpha: I was able to make a quick demo and see it on iOS: Under the Sliders tab, it’s still just R G & B, but it seems to me you can […]

When I first looked at the new color contract function in CSS, the words were reversed, so that’s notable. It’s contrast-color() now, and starting it’s life in Safari Technology Preview. Now it only takes one argument, a color, and you get back either black or white (rather than providing your own color choices). Once this […]

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 […]