DEV Community

Cover image for Unlocking the Power of Modern CSS Color Functions: History, Uses, and Practical Applications

Unlocking the Power of Modern CSS Color Functions: History, Uses, and Practical Applications

MD Hasan Patwary on July 14, 2024

CSS color functions provide developers with a robust toolkit for defining and manipulating colors in web design. These functions offer flexibility ...
Collapse
 
best_codes profile image
Best Codes

Nice! I knew about most of these, but a few of them either don't work in my browser or don't exist (did AI hallucinate them?).

Great post, though!

Collapse
 
mdhassanpatwary profile image
MD Hasan Patwary

Thank you for your feedback! Some of the more recent color functions might not be supported in all browsers yet. For the latest compatibility info, you can check Can I use or MDN Web Docs. If you noticed any functions that seem unfamiliar, please let me know. I'm glad you enjoyed the post!

Collapse
 
syeo66 profile image
Red Ochsenbein (he/him)

cmyk? saturate? desaturate? darken? lighten? Can you show me the sources?

There is a device-cmyk (without browser support) which does something different than your article suggests. saturate/desaturate are filters (filter: saturate(2);) and darken/lighten are options of mix-blend-mode.

Don't trust your AI overlord...

Thread Thread
 
mdhassanpatwary profile image
MD Hasan Patwary

Thank you for your comment! I appreciate the points you raised. You are correct about device-cmyk, and I apologize for any confusion. As for saturate, desaturate, darken, and lighten, you’re right—these are primarily used as filters and blend modes.

The article aims to cover a broad range of color-related functionalities in CSS, and I’ll clarify these distinctions. For accurate information on supported features, I recommend checking the MDN Web Docs and Can I use.

Thank you for helping improve the content!

Thread Thread
 
syeo66 profile image
Red Ochsenbein (he/him)

So, in short: "you" wrote an article about things you don't know and did no research...

Thread Thread
 
mdhassanpatwary profile image
MD Hasan Patwary

I understand your concern. The article was based on thorough research and knowledge of CSS color functions. However, I appreciate your perspective and will take your feedback into consideration for future content. If you have specific points or sources you'd like to discuss further, I'm open to that discussion.

Collapse
 
best_codes profile image
Best Codes

Looks like color-contrast isn't supported at all unless you enable some certain browser flags.

caniuse.com/?search=color-contrast

Thread Thread
 
mdhassanpatwary profile image
MD Hasan Patwary

Yeah, it's still experimental. Hopefully, full support will come soon! Have you tried enabling the flags?

Thread Thread
 
best_codes profile image
Best Codes

There are flags for some of them. Others don't seem to be supported at all (or even exist). 🤔

Collapse
 
lucaargentieri profile image
Luca Argentieri • Edited

Great article!
currentColor is my new love lol

Collapse
 
mdhassanpatwary profile image
MD Hasan Patwary

Glad to hear that!