Comment puis-je convertir une couleur RVB en couleur RVBA transparente pour une utilisation sur un fond blanc ?

Convertir RVB en RVBA transparent pour un fond blanc

Lors de l'affichage des couleurs sur un fond blanc, il est souhaitable d'ajuster ces couleurs pour qu'elles apparaissent comme transparentes possible tout en préservant leur impact visuel. Ce processus implique une transformation de RVB en RVBA, où le canal alpha détermine le niveau de transparence.

Algorithme de conversion RVB en RVBA

L'algorithme suivant calcule le RVBA valeurs basées sur les composants de couleur RVB donnés :

1. Identifier le composant minimum : Déterminez la plus petite valeur parmi les composants RVB (minimum = min).
2. Calculer la valeur alpha : Convertir le composant minimum en une valeur alpha (a) : a = (255 - min) / 255.

3. Échelle des composants RVB : Soustrayez le minimum de chaque composant RVB et divisez le résultat par la valeur alpha. Cela met à l'échelle les composants :

   • r = (r - min) / a
   • g = (g - min) / a
   • b = (b - min ) / a
4. Formater la chaîne RGBA : Construisez la chaîne RGBA en utilisant les valeurs calculées : rgba(r, g, b, a).

Mise en œuvre :

<code class="javascript">function RGBtoRGBA(r, g, b) {
  if ((g == null) && (typeof r === 'string')) {
    var hex = r.replace(/^\s*#|\s*$/g, '');
    if (hex.length === 3) {
      hex = hex.replace(/(.)/g, '');
    }
    r = parseInt(hex.substr(0, 2), 16);
    g = parseInt(hex.substr(2, 2), 16);
    b = parseInt(hex.substr(4, 2), 16);
  }

  var min = Math.min(r, g, b);
  var a = (255 - min) / 255;

  return {
    r: 0 | (r - min) / a,
    g: 0 | (g - min) / a,
    b: 0 | (b - min) / a,
    a: (0 | 1000 * a) / 1000,
    rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')',
  };
}</code>

Exemple :

RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') ==
  {
    r: 170,
    g: 85,
    b: 0,
    a: 0.6,
    rgba: 'rgba(170, 85, 0, 0.6)'
  }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!