How Can I Transform Black to Any RGB Color Using Only CSS Filters?

Recoloring Black into Any Color Using Only CSS Filters

Problem:
Given a target RGB color, transform black (#000) into that color using only CSS filters.

Solution:

The solution involves a function that takes a target color as input and returns a CSS filter string that transforms black into the target color.

The function uses a combination of filters, including invert, sepia, saturate, hue-rotate, brightness, and contrast, to achieve the desired effect.

1. Invert: Inverts the colors, turning black into white.
2. Sepia: Adds a sepia tint, warming the color.
3. Saturate: Adjusts the saturation of the color.
4. Hue-Rotate: Rotates the hue of the color.
5. Brightness: Adjusts the brightness of the color.
6. Contrast: Adjusts the contrast of the color.

Implementation:

function recolorBlack(targetColor) {
  // Convert RGB color to HSL
  const hsl = targetColor.toHSL();

  // Calculate filter values
  const invert = (255 - targetColor.r) / 255;
  const sepia = (targetColor.g - targetColor.b) / 255;
  const saturate = targetColor.s / 100;
  const hueRotate = hsl.h;
  const brightness = targetColor.l / 100;
  const contrast = (targetColor.r - targetColor.g + targetColor.b - 128) / 128;

  // Generate CSS filter string
  return `filter:
    invert(${invert * 100}%)
    sepia(${sepia * 100}%)
    saturate(${saturate * 100}%)
    hue-rotate(${hueRotate}deg)
    brightness(${brightness * 100}%)
    contrast(${contrast * 100}%);`;
}

Example:

.element {
  background-color: black;
  filter: recolorBlack(rgb(255, 0, 0));
}

This will apply a blue tint to the element because blue is specified as the 'rgb' parameter ((255, 0, 0) is blue).

Note: The above JavaScript function and CSS implementation are hypothetical for illustrative purposes. The actual implementation may vary.

The above is the detailed content of How Can I Transform Black to Any RGB Color Using Only CSS Filters?. For more information, please follow other related articles on the PHP Chinese website!