I am a HUGE fan of CSS. I don't always make my sites look pretty (just look at my latest creation at wordle.barrybenson.dev), but the thing is CSS is fan-freaking-tastic. I have my issues with Tailwind, but even that can do the vast majority of what CSS can do, and I love it. New CSS features like "if()" and custom properties are game changers. What isn't a game changer, to me, is the new "color-mix()" function.
From a purely functional standpoint, the color-mix() function is actually pretty dope. If you want to use it, I have a good video from Kevin Powell for you to watch below this paragraph.
Even having watched this video, however, I don't get it. I just don't. From a functional standpoint, it can do a lot of good things, but from a design to implementation standpoint... it is the most useless CSS feature we've had come out in the last five years.
Introducing a book titled Refactoring UI, by Adam Wathan and Steve Schoger of TailwindCSS fame. In the book there is an entire chapter titled "Working with Color" that gives solid (though slightly outdated in my copy) advice for color. In this chapter, there is a subchapter about defining your shades up front, meaning you should select five to ten colors for primaries, neutrals, and a few accent colors each with their own shades. These shades should be defined by the designer (or developer if no designer is on the team) with intention.
Here is a snippet from the book that really illustrates why color-mix() is practically useless. "As tempting as it is, you can’t rely purely on math to craft the perfect color palette. A systematic approach like the one described above is great to get you started, but don’t be afraid to make little tweaks if you need to. Once you actually start using your colors in your designs, it’s almost inevitable that you’ll want to tweak the saturation on a shade, or make a couple of shades lighter or darker. Trust your eyes, not the numbers. Just try to avoid adding new shades too often if you can avoid it. If you’re not diligent about limiting your palette, you might as well have no color system at all."
There is one part in there where color-mix() may possibly be useful, except for one tiny little problem we will discuss in a moment. "...it’s almost inevitable that you’ll want to tweak the saturation on a shade, or make a couple of shades lighter or darker." This sounds like a perfect situation for color-mix(), right?
Eh, not so much. See, CSS now has this feature where you can take a color (from any space), and use it in another, and change it, all at the same time. This is called "relative color", because it creates a new color relative to the color you give it. It looks something like this:
This is an OKLCH color, relative to the hex code for fuchsia, just with a change of hue. This isn't far off from how you would actually use this feature in practice, either.
That is, however, if you're not defining an entire color palette up front, completely intentionally. Even this feature is only partially useful, however, it can do infinitely more than color-mix() because it's supported in every color function, including RGB, HSL, etc..
I genuinely cannot think of a good reason to use color-mix(), except to mix colors to make a color you can envision, but somehow not implement in HSL or OKLCH. There isn't a lot of use cases I have seen that show color-mix() to be worth while in any modern CSS project.
Comments
Post a Comment