How to transform black into any given color using only CSS filters

In CSS, converting black to a specific color typically requires combining multiple CSS filters. Since black represents the darkest form of all colors, to transform it into other hues, we first increase brightness and then adjust hue and saturation. Below is a specific example of converting a black element to blue:

Assume we have a black div element, as shown below:

html
<div class="black-box">黑色区域</div>

The corresponding CSS code can be as follows:

css
.black-box {
    background-color: black;
    width: 100px;
    height: 100px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.black-box.blue {
    filter: brightness(0) saturate(100%) invert(47%) sepia(100%) saturate(6700%) hue-rotate(177deg) brightness(99%) contrast(101%);
}

In this example, the .black-box.blue class utilizes multiple filters:

1. brightness(0) - First, set the element's brightness to the darkest (black).
2. saturate(100%) - Increase saturation.
3. invert(47%) - Apply color inversion.
4. sepia(100%) - Add a sepia tone.
5. saturate(6700%) - Significantly increase saturation to intensify the color.
6. hue-rotate(177deg) - Change the color by rotating the hue circle.
7. brightness(99%) - Significantly increase brightness.
8. contrast(101%) - Slightly adjust contrast to enhance color depth.

You can adjust these values based on the target color. This combination of filters enables converting a black background to a color close to blue. Modifying the hue-rotate value alters the final color. Although this approach may not be intuitive, it achieves the desired effect through experimentation and fine-tuning.