Transparenter ARGB-Hex-Wert


166

Die Farben in dieser Tabelle sind alle nicht transparent. Ich denke, der Wert für Aist auf gesetzt FF.

Was ist der Code für Transparenz?

Zum Beispiel diese Farbe FFF0F8FF (AliceBlue), um einen transparenten Code wie ??F0F8FF ?


Schließlich gibt es eine Möglichkeit, für bestimmte Browser eine transparente Farbe mit Hex-Code festzulegen (neue Funktion). Bitte werfen Sie einen Blick auf stackoverflow.com/a/60876347/2457251
Almir Campos

Antworten:


208

Die Transparenz wird über den Alphakanal gesteuert ( AAin#AARRGGBB ) . Maximalwert (255 Dez, FF hex) bedeutet vollständig undurchsichtig. Minimalwert (0 Dez, 00 Hex) bedeutet vollständig transparent. Die dazwischen liegenden Werte sind halbtransparent, dh die Farbe wird mit der Hintergrundfarbe gemischt.

Um eine vollständig transparente Farbe zu erhalten, setzen Sie das Alpha auf Null. RR, GGUnd BBist in diesem Fall nicht relevant , da keine Farbe sichtbar. Dies bedeutet, dass #00FFFFFF("transparentes Weiß") dieselbe Farbe hat wie #00F0F8FF("transparentes AliceBlue"). Um es einfach zu halten, wählt man schwarz ( #00000000) oder weiß ( #00FFFFFF), wenn die Farbe keine Rolle spielt.

In der Tabelle, mit der Sie verlinkt haben, finden Sie Transparentdefiniert als #00FFFFFF.


2
Nehmen wir an, ich brauche 50% Deckkraft. Was ist der Code für weiße Farbe mit 50% Deckkraft / transparent?
user3332579

10
@ user3332579: 50% ist 7F. Versetzen Sie Ihren Rechner in den Hex-Modus, er erledigt den Trick für Sie.
TheHacker

1
@ user3332579: Also 50% Weiß ist #7FFFFFFF.
TheHacker

8
Das Format ist #RRGGBBAA Hex8 (oder #RGBA in Hex4) und NICHT #AARRGGBB (oder #ARGB). Ich habe es in Chrome getestet. 62,63,64 Siehe CanIUse.com , https://css-tricks.com/8- Ziffern-Hex-Codes / , Chrome Feature Status
SGS Sandhu

3
@ SGSSandhu Die Frage richtet sich nicht an CSS. Siehe die Frage noch einmal, das Format ist ARGB.
Hacker

511

Hier ist die Tabelle der% bis Hex-Werte:

Beispiel : Für 85% Weiß würden Sie verwenden #D9FFFFFF. Hier 85% = "D9" & Weiß = "FFFFFF"


100% — FF
95% — F2
90% — E6

85% — D9

80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

Wie wird es berechnet?

FF ist eine im Hex-Modus geschriebene Zahl. Diese Zahl steht für 255 in Dezimalzahl. Wenn Sie beispielsweise 42% berechnen möchten, müssen Sie 42% von numbeer 255 finden und diese Zahl in hex umwandeln. 255 * 0,42 ~ = 107 107 zu hex ist "6B - Maleta


3
Wie berechnet man das?
Saeed Jassani

36
@SaeedJassani FF ist eine Zahl, die im Hex-Modus geschrieben wurde. Diese Zahl steht für 255 in Dezimalzahl. Wenn Sie beispielsweise 42% berechnen möchten, müssen Sie 42% von numbeer 255 finden und diese Zahl in hex umwandeln. 255 * 0,42 ~ = 107 107 zu hex ist "6B"
Maleta

1
@ Maleta Vielen Dank
Saeed Jassani

10

Zusätzlich zu den anderen Antworten und nichts zu tun , mehr von dem, was @Maleta in einem Kommentar erklärt auf https://stackoverflow.com/a/28481374/1626594 , tut alpha * 255 dann um dann zu hex . Hier ist ein schneller Konverter http://jsfiddle.net/8ajxdLap/4/

function rgb2hex(rgb) {
  var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?((?:[0-9]*[.])?[0-9]+)[\s+]?\)/i);
  if (rgbm && rgbm.length === 5) {
    return "#" +
      ('0' + Math.round(parseFloat(rgbm[4], 10) * 255).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
  } else {
    var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    if (rgbm && rgbm.length === 4) {
      return "#" +
        ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
    } else {
      return "cant parse that";
    }
  }
}

$('button').click(function() {
  var hex = rgb2hex($('#in_tb').val());
  $('#in_tb_result').html(hex);
});
body {
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Convert RGB/RGBA to hex #RRGGBB/#AARRGGBB:<br>
<br>
<input id="in_tb" type="text" value="rgba(200, 90, 34, 0.75)"> <button>Convert</button><br>
<br> Result: <span id="in_tb_result"></span>



2

Wenn Sie Ihren Hex-Wert haben und sich nur fragen, wie hoch der Wert für das Alpha sein würde, kann dieses Snippet helfen:

const alphaToHex = (alpha => {
  if (alpha > 1 || alpha < 0 || isNaN(alpha)) {
    throw new Error('The argument must be a number between 0 and 1');
  }
  return Math.ceil(255 * alpha).toString(16).toUpperCase();
})

console.log(alphaToHex(0.45));


0

BE AWARE 👇🏼

In CSS ist das Format #RRGGBBAAmit dem Alphakanal als letzten beiden hexadezimalen Ziffern.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.