Frage Hex Transparenz in Farben [duplizieren]


Diese Frage hat hier bereits eine Antwort:

Ich arbeite daran, eine Wigdget-Transparenz-Option für mein App-Widget zu implementieren, obwohl ich einige Probleme habe, die Hex-Farbwerte richtig zu bekommen. Da ich für Hex-Farbtransparenz völlig neu war, habe ich ein wenig gesucht, obwohl ich keine spezifische Antwort auf meine Frage finden konnte.

Ich möchte die Transparenz durch die Hexadezimalfarbe festlegen, also sagen wir meine Hex-Farb-ID "# 33b5e5" und ich möchte, dass sie 50% transparent ist. Dann verwende ich "# 8033b5e5", weil 80 50% ist.

Ich habe hier eine nützliche Tabelle gefunden: http://www.dtp-aus.com/hexadeci.htm . Mit diesen Daten habe ich es geschafft:

0% = #00
10% = #16
20% = #32
30% = #48
40% = #64
50% = #80
60% = #96
70% = #112
80% = #128
90% = #144

Jetzt erscheinen die Probleme, wenn ich höher als 100 in Hex bin. Hex-Farbcodes können nur 8 Symbole lang sein, oder? Zum Beispiel stürzt # 11233b5e5 (80%) ab.

Was kann ich tun, damit ich auch die höheren Zahlen verwenden kann?


942
2018-04-06 14:30


Ursprung


Antworten:


Hier ist eine korrekte Tabelle von Prozentsätzen zu Hexadezimalwerten. Z.B. Für 50% Weiß würden Sie # 80FFFFFF verwenden.

  • 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

(Quelle)


3015
2018-06-21 16:15



Kurze Antwort

Sie können die vollständige Prozentwerttabelle für die Hexadezimalwerte und sehen Lauf der Code auf diesem Spielplatz in https://play.golang.org/p/l1JaPYFzDkI .

Kurze Erklärung in Pseudocode

Prozentsatz zu Hexadezimalwerten

  1. Dezimal = Prozentsatz * 255/100. zB: dezimal = 50 * 255/100 = 127.5
  2. Konvertieren Dezimal Hexadezimalwert. ex: 127,5 in Dezimal = 7 * 161 + 15 = 7F in Hexadezimal

Hex-Werte in Prozent

  1. Konvertiere den hexadezimalen Wert in dezimal. zB: D6 = 13 * 161 + 6 = 214
  2. Prozentsatz = (Wert in Dezimal) * 100 / 255. Beispiel: 214 * 100/255 = 84%

Weitere Informationen zur Konvertierung dezimal <=> hexadezimal 

Lange Antwort: Wie berechnet man im Kopf?

Das Problem kann generisch durch a gelöst werden Kreuz Multiplikation.

Wir haben einen Prozentsatz (von 0 bis 100) und eine andere Zahl (von 0 bis 255), die dann in Hexadezimal konvertiert wird.

  • 100 <==> 255 (FF in hexadezimal)
  • 0 <==> 0 (00 in hexadezimal)

Für 1%

  • 1 * 255/100 = 2,5
  • 2,5 in Hexa ist 2 wenn du es abrundet.

Für 2%

  • 2 * 255/100 = 5
  • 5 in Hexa ist 5 .

Die Tabelle in der besten Antwort gibt den Prozentsatz in Schritten von 5% an.

Wie berechnet man die Zahlen in deinem Kopf? Aufgrund der 2.5 inkrementieren, addiere 2 zum ersten und 3 zum nächsten

  • 95% - F2 // Start
  • 96% - F4 // füge 2 zu F2 hinzu
  • 97% - F7 // addiere 3. Oder F2 + 5 = F7
  • 98% - F9 // addiere 2
  • 99% - FC // addiere 3. 9 + 3 = 12 in Hexa: C
  • 100% - FF // addiere 2

Ich bevorzuge es, zu lehren, wie man die Lösung findet, anstatt den Tisch zu übergeben

Gib einem Mann einen Fisch und du fütterst ihn für einen Tag; lehre einen Mann zu fischen und   Du fütterst ihn ein Leben lang


89
2018-03-19 10:14



Die hexadezimale Farbnotation ist wie folgt: #AARRGGBB

  • A: Alpha
  • R: rot
  • G: grün
  • B: blau

Sie sollten zuerst schauen, wie hexadezimal funktioniert. Sie können höchstens FF schreiben.


26
2018-04-06 14:35



Dieses Diagramm zeigt keine Prozente. "# 90" ist nicht "90%". Dieses Diagramm zeigt die Hexadezimal-Dezimal-Konvertierung. Die Hexadezimalzahl 90 (typischerweise als 0x90 dargestellt) entspricht der Dezimalzahl 144.

Hexadezimale Zahlen sind Base-16, also ist jede Ziffer ein Wert zwischen 0 und F. Der Maximalwert für einen Zwei-Byte-Hex-Wert (z. B. die Transparenz einer Farbe) ist 0xFF oder 255 in Dezimal. Somit ist 100% 0xFF.


20
2018-04-06 14:39



Ich habe diese kleine Hilfsmethode für eine Android-App gebaut, die vielleicht von Nutzen ist:

 /**
 * @param originalColor color, without alpha
 * @param alpha         from 0.0 to 1.0
 * @return
 */
public static String addAlpha(String originalColor, double alpha) {
    long alphaFixed = Math.round(alpha * 255);
    String alphaHex = Long.toHexString(alphaFixed);
    if (alphaHex.length() == 1) {
        alphaHex = "0" + alphaHex;
    }
    originalColor = originalColor.replace("#", "#" + alphaHex);


    return originalColor;
}

15
2018-06-24 11:03



enter image description here

Dies könnte sehr spät Antwort sein .. Aber dieses Diagramm tötet es.

Alle Prozentwerte werden den Hexadezimalwerten zugeordnet.

http://online.sfsu.edu/chrism/hexval.html


15
2018-04-22 08:31



Probieren Sie dies bei Google Suche (oder Klick hier)

255 * .2 to hex

es wird erzeugen 0x33 als Ergebnis.

Google rundet die Werte jedoch nicht ab, sodass Sie nur 1-stellige Multiplikatoren verwenden können. Wenn Sie zB .85 verwenden möchten, müssen Sie zuerst den abgerundeten Wert 255 * .85 eingeben und dann eingeben (rounded-value here) to hex in der Google-Suche.


5
2018-06-11 06:09



Mit python, um dies zu berechnen, zum Beispiel (in Python 3 geschrieben), 50% Transparenz:

hex(round(256*0.50))

:)


2
2017-12-12 02:16



Mir ist klar, dass das eine alte Frage ist, aber ich bin darauf gestoßen, als ich etwas ähnliches gemacht habe.

Mit SASS haben Sie eine sehr elegante Möglichkeit, RGBA in hexadezimales ARGB umzuwandeln: ie-hex-str. Ich habe es hier in einem Mixin benutzt.

@mixin ie8-rgba ($r, $g, $b, $a){
    $rgba: rgba($r, $g, $b, $a);
    $ie8-rgba: ie-hex-str($rgba);
    .lt-ie9 &{
      background-color: transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{$ie8-rgba}', endColorstr='#{$ie8-rgba}');
  }
}

.transparent{
    @include ie8-rgba(88,153,131,.8);
    background-color: rgba(88,153,131,.8);
}

Ausgänge:

.transparent {
  background-color: rgba(88, 153, 131, 0.8);
}
.lt-ie9 .transparent {
  background-color: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CC589983', endColorstr='#CC589983');
  zoom: 1;
}


2
2017-12-09 19:44