Since we need negative results to resolve in white and positive results to resolve in black, we also have to invert it multiplying the result by -1. So, we can declare the color as HSL, subtract the desired threshold from the lightness parameter, then multiply by 100% to force it to overshoot one of the limits (either sub-zero or higher than 100%). The lightness parameter of an HSL color declaration behaves in a similar way, capping any negative value to 0 (which results in black, whatever the hue and saturation happen to be) and anything above 100% is capped to 100% (which is always white). :root Applying the trick to our font color declaration Setting the background declarations as HSL where each parameter is a CSS custom property allows for a really simple way to determine lightness and use it as a base for our conditional statements. The easiest approach I could think for this implies running HSL colors. Working with HSL colors and CSS variables
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |