Trouver une couleur "équivalente" avec l'opacité

Question

Disons que j'ai une couleur de fond sur laquelle se trouve un "ruban" d'une autre couleur unie. Je souhaite que le ruban soit partiellement transparent pour laisser transparaître certains détails, tout en conservant la "même couleur" sur le fond.

Existe-t-il un moyen de déterminer (facilement), pour une opacité/alpha donnée < 100% de la couleur du ruban, quelles valeurs RVB il devrait avoir pour être identique à sa couleur avec une opacité de 100% sur le fond ?

Voici une photo. L'arrière-plan est rgb(72, 28, 97) , ruban rgb(45, 34, 70) . Je veux un rgba(r, g, b, a) pour le ruban afin qu'il apparaisse identique à cette couleur unie.

Answer 1

Pour développer la réponse de @Tobia et permettre de spécifier l'opacité, plus comme transparentify :

@function rgbaMorph($desired-color, $background-color: rgb(255,255,255), $desired-alpha: 0) {

    $r1: red($desired-color);
    $g1: green($desired-color);
    $b1: blue($desired-color);

    $r2: red($background-color);
    $g2: green($background-color);
    $b2: blue($background-color);

    $r: -1;
    $g: -1;
    $b: -1;

    @if ($desired-alpha != 0) {
        $r: ( $r1 - $r2 + ($r2 * $desired-alpha) ) / $desired-alpha;
        $g: ( $g1 - $g2 + ($g2 * $desired-alpha) ) / $desired-alpha;
        $b: ( $b1 - $b2 + ($b2 * $desired-alpha) ) / $desired-alpha;
    }

    @if (($desired-alpha == 0) or ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255)) {
        //if alpha not attainable, this will find lowest alpha that is

        $alpha: $desired-alpha;
        @while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255) {
            $alpha: $alpha + 1/256;
            $inv: 1 / $alpha;
            $r: $r1 * $inv + $r2 * (1 - $inv);
            $g: $g1 * $inv + $g2 * (1 - $inv);
            $b: $b1 * $inv + $b2 * (1 - $inv);
        }
        @debug "Color not attainable at opacity using alpha: " $alpha " instead of: " $desired-alpha;

        $desired-alpha: $alpha;
    }

    @return rgba($r, $g, $b, $desired-alpha);
}

Answer 2

J'ai écrit un utilitaire que je peux utiliser depuis JSS pour m'aider à rendre une couleur transparente. Il utilise les méthodes utilitaires de material-ui qui peuvent être trouvées aquí .
Voici le code de ma classe utilitaire (en Typescript). Notez qu'il n'est pas possible de rendre certaines couleurs transparentes tout en gardant leur couleur identique à la couleur cible.
Excusez mon manque de codepen ou de code exécutable. J'espère que quelqu'un le trouvera et s'en servira !

import {
  decomposeColor,
  recomposeColor,
  ColorObject,
} from '@material-ui/core/styles/colorManipulator';

/**
 * Take a non transparent color and create a transparent color that looks identical visually.
 * Using formula from this SO post https://stackoverflow.com/questions/12228548/finding-equivalent-color-with-opacity
 * Assuming a white background
 * @param origColor The color you want to match.
 * @param value Transparency value between 0 and 1. Cannot be too low because it is mathematically not possible (usually <0.2 but depends on the color)
 */
export const makeTransparent = (origColor: string, value: number): string => {
  const origColorObj: ColorObject = decomposeColor(origColor);

  if (value >= 1 || value <= 0)
    throw new Error('makeTransparent: invalid value provided');

  if (origColorObj.values[3] != null && origColorObj.values[3] !== 1)
    throw new Error('makeTransparent: origColor cannot be transparent');

  const newColorObj: ColorObject = {
    type: 'rgba',
    values: [0, 0, 0, value],
  };

  for (let i = 0; i < 3; i++) {
    const rgbNum: number = (255 * value + origColorObj.values[i] - 255) / value;

    if (rgbNum < 0 || rgbNum > 255)
      throw new Error('makeTransparent: Transparency value too low');

    newColorObj.values[i] = rgbNum;
  }

  return recomposeColor(newColorObj);
};