Visualizing CSS color-mix
TL;DR: colormix.site and github.com/tylergaw/colormix.site
Way back in 2017, I built ColorMe for working with a proposed CSS color function. That proposal didn't end up sticking, so that
color function is no longer valid. ColorMe is still a useful color picker though.
Now, in 2022, there's a proposal for a new CSS color function. This version is named
color-mix. It's part of the CSS Color Module Level 5 spec. It allows you to mix two colors in a given colorspace in CSS. That's very cool.
Similar to the deprecated color function, I wanted a quick way to see the results and code snippet for
color-mix. So I built a new tool to do just that; colormix.site.
What does it do?
This is an MVP and something I'll keep working on. For now, it provides the basic functionality of
color-mix. It allows you to pick two colors, set the percentage mix for each color, select a colorspace, and see the results and CSS snippet to produce it.
Unless you're in the habit of fiddling with browser feature flags, this likely won't work completely for you.
color-mix is only available in a couple browsers and those require a feature flag to be enabled. At the time of this writing, it's latest Firefox and Safari. Check MDN Browser compatibility for details on how to enable it.
As always, I have a list of to-dos I want to get done and I want to write more about what I've learned researching and working with
color-mix. This is a prompt and reminder for myself to do that. Let me know if you use ColorMix and find it useful or run into issues.