I’m sure I’ll need some custom css and js for this (I’m not the greatest at js), but I thought, I’d asks anyway:
I have an svg icon (arrow) inside of a div (bgCircle). This bgCircle has a background-color that is pulled from CMS.
1.) I want to get the contrast/luminance number of the bgCircle color.
2.) if the contrast is < .5, svg Icon fill is white. If contrast is > .5, svg icon fill is black.
I want to be able to do this within the confines of Webflow. I’m just not sure how to set up the js to work with the svg and CMS. I’ve used 3rd party libraries like Polished to do something like this before and easily get the luminance, but not sure how to do this within Webflow.
Any help/direction would be much appreciated!
(Area in question is the indiv project section on the right side when you hover.
Here is my public share link: LINK