Image load – grey square

Hi Litespeed

I am using some lazy load css to avoid the grey background that shows a splaceholder before load of images, like so:

/******** Litespeed Cache - Articicial Lazy Load ********/
img[data-lazyloaded]{
    opacity: 0;
}

/******** Litespeed Cache - Transition (Delay) Lazy Load *********/
img.litespeed-loaded {
    -webkit-transition: opacity .1s linear .1s;
    -moz-transition: opacity .1s linear .1s;
    transition: opacity .1s linear .1s;
    opacity: 1;
}

/******** Litespeed Cache - Ignore Lazy Load (logo and such) ********/
.instant-load img[data-lazyloaded] {
    opacity: 1;
} 

where last bit loads some images immediately. I wish to use this for logo fx. However, that brings back the grey background. How can I avoid the grey entirely, yet have few images load immediately?

Where does this grey get it’s grey colour temporarily. Can I recolor to WordPress variable base like this:

background-color: var(--wp--preset--color--base);

and what would the hook be?

thx