Wie kann ich Schwarz nur mit CSS-Filtern in eine beliebige RGB-Farbe umwandeln?

Schwarz nur mit CSS-Filtern in eine beliebige Farbe umfärben

Problem:
Gegeben eine Ziel-RGB-Farbe, Wandeln Sie Schwarz (#000) nur mit CSS in diese Farbe um Filter.

Lösung:

Die Lösung beinhaltet eine Funktion, die eine Zielfarbe als Eingabe nimmt und eine CSS-Filterzeichenfolge zurückgibt, die Schwarz in die Zielfarbe umwandelt.

Die Funktion verwendet eine Kombination von Filtern, darunter Invertieren, Sepia, Sättigung, Farbtondrehung, Helligkeit und Kontrast, um das gewünschte Ergebnis zu erzielen Effekt.

1. Invertieren: Kehrt die Farben um und verwandelt Schwarz in Weiß.
2. Sepia: Fügt einen Sepia-Farbton hinzu, der die Farbe erwärmt .
3. Saturate: Passt die Sättigung an Farbe.
4. Hue-Rotate: Dreht den Farbton der Farbe.
5. Helligkeit: Passt die Helligkeit der Farbe an.
6. Kontrast: Passt den Kontrast des an Farbe.

Implementierung:

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}%);`;
}

Beispiel:

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

Dadurch wird ein Blau angewendet tint zum Element, da Blau als 'rgb'-Parameter angegeben ist ((255, 0, 0) ist blau).

Hinweis: Die obige JavaScript-Funktion und CSS-Implementierung sind zur Veranschaulichung hypothetisch. Die tatsächliche Umsetzung kann variieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Schwarz nur mit CSS-Filtern in eine beliebige RGB-Farbe umwandeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!