How to Recolor Black Using CSS Filters to Match Any RGB Color?-JS Tutorial-php.cn

How to Recolor Black Using CSS Filters to Match Any RGB Color?

Mary-Kate Olsen

Release： 2024-10-19 14:07:30

Original

547 people have browsed it

How to Recolor Black Using CSS Filters to Match Any RGB Color?

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

Problem: Given a target RGB color, how do you recolor black (#000) into that color using only CSS filters?

Solution: Use the following function to convert a target RGB color into a CSS filter string:

<code class="python">def css_filter(target_color):
  """Converts a target RGB color into a CSS filter string.

  Args:
    target_color: A tuple of three integers representing the target RGB color.

  Returns:
    A CSS filter string that transforms black into the target color.
  """

  # Convert the target RGB color to HSL.
  h, s, l = colorsys.rgb_to_hls(*target_color)

  # Calculate the CSS filter values.
  invert = 1 - (l / 100)
  sepia = 1 - s
  saturate = s / 100
  hue_rotate = h * 360
  brightness = l
  contrast = 1

  # Return the CSS filter string.
  return "filter: invert({0}%) sepia({1}%) saturate({2}%) hue-rotate({3}deg) brightness({4}%) contrast({5});".format(
      invert, sepia, saturate, hue_rotate, brightness, contrast)</code>

Copy after login

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